"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 parts = config.parts
      .sort((a, b) => a.order - b.order)
      .map((part) => {
        if (part.generationMethod === "manual") {
          return part.manualConfig?.value || "XXX";
        }

        const autoConfig = part.autoConfig || {};

        switch (part.partType) {
          case "prefix":
            return autoConfig.prefix || "PREFIX";

          case "sequence": {
            const length = autoConfig.sequenceLength || 4;
            const startFrom = autoConfig.startFrom || 1;
            return String(startFrom).padStart(length, "0");
          }

          case "date": {
            const format = autoConfig.dateFormat || "YYYYMMDD";
            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 "year": {
            const now = new Date();
            const format = autoConfig.dateFormat || "YYYY";
            return format === "YY" 
              ? String(now.getFullYear()).slice(-2) 
              : String(now.getFullYear());
          }

          case "month": {
            const now = new Date();
            return String(now.getMonth() + 1).padStart(2, "0");
          }

          case "custom":
            return autoConfig.value || "CUSTOM";

          default:
            return "XXX";
        }
      });

    return parts.join(config.separator || "");
  }, [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="space-y-2">
      <p className="text-xs text-muted-foreground sm:text-sm">코드 미리보기</p>
      <div className="rounded-md bg-muted p-3 sm:p-4">
        <code className="text-sm font-mono text-foreground sm:text-base">{generatedCode}</code>
      </div>
    </div>
  );
};