"use client";

import { useState, useRef, useEffect } from "react";
import { Card } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Wand2 } from "lucide-react";

interface SignatureGeneratorProps {
  onSignatureSelect: (dataUrl: string) => void;
}

// 서명용 손글씨 폰트 목록 (완전한 한글 지원 폰트만 사용)
const SIGNATURE_FONTS = {
  korean: [
    { name: "나눔손글씨 붓", style: "'Nanum Brush Script', cursive", weight: 400 },
    { name: "나눔손글씨 펜", style: "'Nanum Pen Script', cursive", weight: 400 },
    { name: "손글씨 (Gaegu)", style: "Gaegu, cursive", weight: 700 },
    { name: "하이멜로디", style: "'Hi Melody', cursive", weight: 400 },
    { name: "감자꽃", style: "'Gamja Flower', cursive", weight: 400 },
    { name: "푸어스토리", style: "'Poor Story', cursive", weight: 400 },
    { name: "도현", style: "'Do Hyeon', sans-serif", weight: 400 },
    { name: "주아", style: "Jua, sans-serif", weight: 400 },
  ],
  english: [
    { name: "Allura (우아한)", style: "Allura, cursive", weight: 400 },
    { name: "Dancing Script (춤추는)", style: "'Dancing Script', cursive", weight: 700 },
    { name: "Great Vibes (멋진)", style: "'Great Vibes', cursive", weight: 400 },
    { name: "Pacifico (파도)", style: "Pacifico, cursive", weight: 400 },
    { name: "Satisfy (만족)", style: "Satisfy, cursive", weight: 400 },
    { name: "Caveat (거친)", style: "Caveat, cursive", weight: 700 },
    { name: "Permanent Marker", style: "'Permanent Marker', cursive", weight: 400 },
    { name: "Shadows Into Light", style: "'Shadows Into Light', cursive", weight: 400 },
    { name: "Kalam (볼드)", style: "Kalam, cursive", weight: 700 },
    { name: "Patrick Hand", style: "'Patrick Hand', cursive", weight: 400 },
    { name: "Indie Flower", style: "'Indie Flower', cursive", weight: 400 },
    { name: "Amatic SC", style: "'Amatic SC', cursive", weight: 700 },
    { name: "Covered By Your Grace", style: "'Covered By Your Grace', cursive", weight: 400 },
  ],
};

export function SignatureGenerator({ onSignatureSelect }: SignatureGeneratorProps) {
  const [language, setLanguage] = useState<"korean" | "english">("korean");
  const [name, setName] = useState("");
  const [generatedSignatures, setGeneratedSignatures] = useState<string[]>([]);
  const [isGenerating, setIsGenerating] = useState(false);
  const [fontsLoaded, setFontsLoaded] = useState(false);
  const canvasRefs = useRef<(HTMLCanvasElement | null)[]>([]);

  const fonts = SIGNATURE_FONTS[language];

  // 컴포넌트 마운트 시 폰트 미리 로드
  useEffect(() => {
    const loadAllFonts = async () => {
      try {
        await document.fonts.ready;

        // 모든 폰트를 명시적으로 로드
        const allFonts = [...SIGNATURE_FONTS.korean, ...SIGNATURE_FONTS.english];
        const fontLoadPromises = allFonts.map((font) => document.fonts.load(`${font.weight} 124px ${font.style}`));
        await Promise.all(fontLoadPromises);

        // 임시 Canvas를 그려서 폰트를 강제로 렌더링 (브라우저가 폰트를 실제로 사용하도록)
        const tempCanvas = document.createElement("canvas");
        tempCanvas.width = 100;
        tempCanvas.height = 100;
        const tempCtx = tempCanvas.getContext("2d");

        if (tempCtx) {
          for (const font of allFonts) {
            tempCtx.font = `${font.weight} 124px ${font.style}`;
            tempCtx.fillText("테", 0, 50);
            tempCtx.fillText("A", 0, 50);
          }
        }

        // 폰트 렌더링 후 대기
        await new Promise((resolve) => setTimeout(resolve, 500));

        setFontsLoaded(true);
      } catch (error) {
        console.warn("Font preloading failed:", error);
        await new Promise((resolve) => setTimeout(resolve, 1500));
        setFontsLoaded(true);
      }
    };

    loadAllFonts();
  }, []);

  // 서명 생성
  const generateSignatures = async () => {
    if (!name.trim()) return;

    setIsGenerating(true);

    // 폰트가 미리 로드될 때까지 대기
    if (!fontsLoaded) {
      await new Promise((resolve) => {
        const checkInterval = setInterval(() => {
          if (fontsLoaded) {
            clearInterval(checkInterval);
            resolve(true);
          }
        }, 100);
      });
    }

    // 사용자가 입력한 텍스트로 각 폰트의 글리프를 미리 로드
    const preloadCanvas = document.createElement("canvas");
    preloadCanvas.width = 500;
    preloadCanvas.height = 200;
    const preloadCtx = preloadCanvas.getContext("2d");

    if (preloadCtx) {
      for (const font of fonts) {
        preloadCtx.font = `${font.weight} 124px ${font.style}`;
        preloadCtx.fillText(name, 0, 100);
      }
    }

    // 글리프 로드 대기 (중요: 첫 렌더링 후 폰트가 완전히 로드되도록)
    await new Promise((resolve) => setTimeout(resolve, 300));

    const newSignatures: string[] = [];

    // 동기적으로 하나씩 생성
    for (const font of fonts) {
      const canvas = document.createElement("canvas");
      canvas.width = 500;
      canvas.height = 200;
      const ctx = canvas.getContext("2d");

      if (ctx) {
        // 배경 흰색
        ctx.fillStyle = "#ffffff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 텍스트 스타일
        ctx.fillStyle = "#000000";
        let fontSize = 124;
        ctx.font = `${font.weight} ${fontSize}px ${font.style}`;
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";

        // 텍스트 너비 측정 및 크기 조정 (캔버스 너비의 90% 이내로)
        let textWidth = ctx.measureText(name).width;
        const maxWidth = canvas.width * 0.9;

        while (textWidth > maxWidth && fontSize > 30) {
          fontSize -= 2;
          ctx.font = `${font.weight} ${fontSize}px ${font.style}`;
          textWidth = ctx.measureText(name).width;
        }

        // 텍스트 그리기
        ctx.fillText(name, canvas.width / 2, canvas.height / 2);

        // 데이터 URL로 변환
        newSignatures.push(canvas.toDataURL("image/png"));
      }
    }

    setGeneratedSignatures(newSignatures);
    setIsGenerating(false);
  };

  // 서명 선택 (더블클릭)
  const handleSignatureDoubleClick = (dataUrl: string) => {
    onSignatureSelect(dataUrl);
  };

  return (
    <div className="space-y-3">
      {/* 언어 선택 */}
      <div className="space-y-2">
        <Label className="text-xs">맞춤 방식</Label>
        <Select
          value={language}
          onValueChange={(value: "korean" | "english") => {
            setLanguage(value);
            setName(""); // 언어 변경 시 입력값 초기화
            setGeneratedSignatures([]); // 생성된 서명도 초기화
          }}
        >
          <SelectTrigger className="h-8">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="korean">국문</SelectItem>
            <SelectItem value="english">영문</SelectItem>
          </SelectContent>
        </Select>
      </div>

      {/* 이름 입력 */}
      <div className="space-y-2">
        <Label className="text-xs">서명:</Label>
        <div className="flex gap-2">
          <Input
            value={name}
            onChange={(e) => {
              const input = e.target.value;
              // 국문일 때는 한글, 영문일 때는 영문+숫자+공백만 허용
              if (language === "korean") {
                // 한글만 허용 (자음, 모음, 완성된 글자)
                const koreanOnly = input.replace(/[^\u3131-\u3163\uac00-\ud7a3\s]/g, "");
                setName(koreanOnly);
              } else {
                // 영문, 숫자, 공백만 허용
                const englishOnly = input.replace(/[^a-zA-Z\s]/g, "");
                setName(englishOnly);
              }
            }}
            placeholder={language === "korean" ? "홍길동" : "John Doe"}
            maxLength={14}
            className="h-8 flex-1"
            onKeyDown={(e) => {
              if (e.key === "Enter") {
                generateSignatures();
              }
            }}
          />
          <Button
            type="button"
            size="sm"
            onClick={generateSignatures}
            disabled={!name.trim() || isGenerating || !fontsLoaded}
          >
            <Wand2 className="mr-1 h-3 w-3" />
            {!fontsLoaded ? "폰트 로딩 중..." : isGenerating ? "생성 중..." : "만들기"}
          </Button>
        </div>
      </div>

      {/* 생성된 서명 목록 */}
      {generatedSignatures.length > 0 && (
        <div className="space-y-2">
          <Label className="text-xs">레이블 위치</Label>
          <p className="text-xs text-gray-500">더블클릭하여 서명을 선택하세요</p>
          <ScrollArea className="h-[300px] rounded-md border bg-white">
            <div className="space-y-2 p-2">
              {generatedSignatures.map((signature, index) => (
                <Card
                  key={index}
                  className="group hover:border-primary cursor-pointer border-2 border-transparent p-3 transition-all"
                  onDoubleClick={() => handleSignatureDoubleClick(signature)}
                >
                  <div className="flex items-center justify-between">
                    <img
                      src={signature}
                      alt={`서명 ${index + 1}`}
                      className="h-auto max-h-[45px] w-auto max-w-[280px] object-contain"
                    />
                    <p className="ml-2 text-xs text-gray-400 opacity-0 transition-opacity group-hover:opacity-100">
                      {fonts[index].name}
                    </p>
                  </div>
                </Card>
              ))}
            </div>
          </ScrollArea>
        </div>
      )}
    </div>
  );
}