"use client";

interface AnalogClockProps {
  time: Date;
  theme: "light" | "dark" | "blue" | "gradient";
}

/**
 * 아날로그 시계 컴포넌트
 * - SVG 기반 아날로그 시계
 * - 시침, 분침, 초침 애니메이션
 * - 테마별 색상 지원
 */
export function AnalogClock({ time, theme }: AnalogClockProps) {
  const hours = time.getHours() % 12;
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();

  // 각도 계산 (12시 방향을 0도로, 시계방향으로 회전)
  const secondAngle = seconds * 6 - 90; // 6도씩 회전 (360/60)
  const minuteAngle = minutes * 6 + seconds * 0.1 - 90; // 6도씩 + 초당 0.1도
  const hourAngle = hours * 30 + minutes * 0.5 - 90; // 30도씩 + 분당 0.5도

  // 테마별 색상
  const colors = getThemeColors(theme);

  return (
    <div className="flex h-full items-center justify-center p-4">
      <svg viewBox="0 0 200 200" className="h-full max-h-[250px] w-full max-w-[250px]">
        {/* 시계판 배경 */}
        <circle cx="100" cy="100" r="98" fill={colors.background} stroke={colors.border} strokeWidth="2" />

        {/* 눈금 표시 */}
        {[...Array(60)].map((_, i) => {
          const angle = (i * 6 - 90) * (Math.PI / 180);
          const isHour = i % 5 === 0;
          const startRadius = isHour ? 85 : 90;
          const endRadius = 95;

          return (
            <line
              key={i}
              x1={100 + startRadius * Math.cos(angle)}
              y1={100 + startRadius * Math.sin(angle)}
              x2={100 + endRadius * Math.cos(angle)}
              y2={100 + endRadius * Math.sin(angle)}
              stroke={colors.tick}
              strokeWidth={isHour ? 2 : 1}
            />
          );
        })}

        {/* 숫자 표시 (12시, 3시, 6시, 9시) */}
        {[12, 3, 6, 9].map((num, idx) => {
          const angle = (idx * 90 - 90) * (Math.PI / 180);
          const radius = 70;
          const x = 100 + radius * Math.cos(angle);
          const y = 100 + radius * Math.sin(angle);

          return (
            <text
              key={num}
              x={x}
              y={y}
              textAnchor="middle"
              dominantBaseline="middle"
              fontSize="20"
              fontWeight="bold"
              fill={colors.number}
            >
              {num}
            </text>
          );
        })}

        {/* 시침 (짧고 굵음) */}
        <line
          x1="100"
          y1="100"
          x2={100 + 40 * Math.cos((hourAngle * Math.PI) / 180)}
          y2={100 + 40 * Math.sin((hourAngle * Math.PI) / 180)}
          stroke={colors.hourHand}
          strokeWidth="6"
          strokeLinecap="round"
        />

        {/* 분침 (중간 길이) */}
        <line
          x1="100"
          y1="100"
          x2={100 + 60 * Math.cos((minuteAngle * Math.PI) / 180)}
          y2={100 + 60 * Math.sin((minuteAngle * Math.PI) / 180)}
          stroke={colors.minuteHand}
          strokeWidth="4"
          strokeLinecap="round"
        />

        {/* 초침 (가늘고 긴) */}
        <line
          x1="100"
          y1="100"
          x2={100 + 75 * Math.cos((secondAngle * Math.PI) / 180)}
          y2={100 + 75 * Math.sin((secondAngle * Math.PI) / 180)}
          stroke={colors.secondHand}
          strokeWidth="2"
          strokeLinecap="round"
        />

        {/* 중심점 */}
        <circle cx="100" cy="100" r="6" fill={colors.center} />
        <circle cx="100" cy="100" r="3" fill={colors.background} />
      </svg>
    </div>
  );
}

/**
 * 테마별 색상 반환
 */
function getThemeColors(theme: string) {
  const themes = {
    light: {
      background: "#ffffff",
      border: "#d1d5db",
      tick: "#9ca3af",
      number: "#374151",
      hourHand: "#1f2937",
      minuteHand: "#4b5563",
      secondHand: "#ef4444",
      center: "#1f2937",
    },
    dark: {
      background: "#1f2937",
      border: "#4b5563",
      tick: "#6b7280",
      number: "#f9fafb",
      hourHand: "#f9fafb",
      minuteHand: "#d1d5db",
      secondHand: "#ef4444",
      center: "#f9fafb",
    },
    blue: {
      background: "#dbeafe",
      border: "#3b82f6",
      tick: "#60a5fa",
      number: "#1e40af",
      hourHand: "#1e3a8a",
      minuteHand: "#2563eb",
      secondHand: "#ef4444",
      center: "#1e3a8a",
    },
    gradient: {
      background: "#fce7f3",
      border: "#ec4899",
      tick: "#f472b6",
      number: "#9333ea",
      hourHand: "#7c3aed",
      minuteHand: "#a855f7",
      secondHand: "#ef4444",
      center: "#7c3aed",
    },
  };

  return themes[theme as keyof typeof themes] || themes.light;
}