"use client";

import React, { useMemo } from "react";
import { NumberingRuleConfig } from "@/types/numbering-rule";

interface NumberingRulePreviewProps {
  config: NumberingRuleConfig;
  compact?: boolean;
}

export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({ 
  config, 
  compact = false 
}) => {
  const generatedCode = useMemo(() => {
    if (!config.parts || config.parts.length === 0) {
      return "규칙을 추가해주세요";
    }

    const sortedParts = config.parts.sort((a, b) => a.order - b.order);
    
    const partValues = sortedParts.map((part) => {
      if (part.generationMethod === "manual") {
        return part.manualConfig?.value || "XXX";
      }

      const autoConfig = part.autoConfig || {};

      switch (part.partType) {
        case "sequence": {
          const length = autoConfig.sequenceLength || 3;
          const startFrom = autoConfig.startFrom || 1;
          return String(startFrom).padStart(length, "0");
        }
        case "number": {
          const length = autoConfig.numberLength || 4;
          const value = autoConfig.numberValue || 0;
          return String(value).padStart(length, "0");
        }
        case "date": {
          const format = autoConfig.dateFormat || "YYYYMMDD";
          if (autoConfig.useColumnValue && autoConfig.sourceColumnName) {
            switch (format) {
              case "YYYY": return "[YYYY]";
              case "YY": return "[YY]";
              case "YYYYMM": return "[YYYYMM]";
              case "YYMM": return "[YYMM]";
              case "YYYYMMDD": return "[YYYYMMDD]";
              case "YYMMDD": return "[YYMMDD]";
              default: return "[DATE]";
            }
          }
          const now = new Date();
          const year = now.getFullYear();
          const month = String(now.getMonth() + 1).padStart(2, "0");
          const day = String(now.getDate()).padStart(2, "0");
          switch (format) {
            case "YYYY": return String(year);
            case "YY": return String(year).slice(-2);
            case "YYYYMM": return `${year}${month}`;
            case "YYMM": return `${String(year).slice(-2)}${month}`;
            case "YYYYMMDD": return `${year}${month}${day}`;
            case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
            default: return `${year}${month}${day}`;
          }
        }
        case "text":
          return autoConfig.textValue || "TEXT";
        default:
          return "XXX";
      }
    });

    // 파트별 개별 구분자로 결합
    const globalSep = config.separator ?? "-";
    let result = "";
    partValues.forEach((val, idx) => {
      result += val;
      if (idx < partValues.length - 1) {
        const sep = sortedParts[idx].separatorAfter ?? globalSep;
        result += sep;
      }
    });
    return result;
  }, [config]);

  if (compact) {
    return (
      <div className="rounded-md bg-muted px-2 py-1">
        <code className="text-xs font-mono text-foreground">{generatedCode}</code>
      </div>
    );
  }

  return (
    <div className="rounded-md bg-muted px-3 py-2">
      <code className="text-sm font-mono text-foreground">{generatedCode}</code>
    </div>
  );
};