"use client";

import { useState, useEffect } from "react";
import { DashboardElement } from "../types";
import { AnalogClock } from "./AnalogClock";
import { DigitalClock } from "./DigitalClock";

interface ClockWidgetProps {
  element: DashboardElement;
}

/**
 * 시계 위젯 메인 컴포넌트
 * - 실시간으로 1초마다 업데이트
 * - 아날로그/디지털/둘다 스타일 지원
 * - 타임존 지원
 */
export function ClockWidget({ element }: ClockWidgetProps) {
  const [currentTime, setCurrentTime] = useState(new Date());

  // 기본 설정값
  const config = element.clockConfig || {
    style: "digital",
    timezone: "Asia/Seoul",
    showDate: true,
    showSeconds: true,
    format24h: true,
    theme: "light",
  };

  // 1초마다 시간 업데이트
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    // cleanup: 컴포넌트 unmount 시 타이머 정리
    return () => clearInterval(timer);
  }, []);

  // 스타일별 렌더링
  if (config.style === "analog") {
    return (
      <div className="h-full w-full">
        <AnalogClock
          time={currentTime}
          theme={config.theme}
          timezone={config.timezone}
          customColor={config.customColor}
        />
      </div>
    );
  }

  if (config.style === "digital") {
    return (
      <div className="h-full w-full">
        <DigitalClock
          time={currentTime}
          timezone={config.timezone}
          showDate={config.showDate}
          showSeconds={config.showSeconds}
          format24h={config.format24h}
          theme={config.theme}
          customColor={config.customColor}
        />
      </div>
    );
  }

  // 'both' - 아날로그 + 디지털 (작은 크기에 최적화)
  return (
    <div className="flex h-full w-full flex-col overflow-hidden">
      {/* 아날로그 시계 (상단 55%) */}
      <div className="flex-[55] overflow-hidden">
        <AnalogClock
          time={currentTime}
          theme={config.theme}
          timezone={config.timezone}
          customColor={config.customColor}
        />
      </div>

      {/* 디지털 시계 (하단 45%) - 컴팩트 버전 */}
      <div className="flex-[45] overflow-hidden">
        <DigitalClock
          time={currentTime}
          timezone={config.timezone}
          showDate={false}
          showSeconds={config.showSeconds}
          format24h={config.format24h}
          theme={config.theme}
          customColor={config.customColor}
          compact={true}
        />
      </div>
    </div>
  );
}