"use client"

import { useState, useEffect } from "react"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { solar2lunar, parseDate } from "@/lib/lunar-calendar"
import { Calendar } from "lucide-react"

interface DateInputWithLunarProps {
  label: string
  value?: string
  isLunar?: boolean
  onChange: (value: string) => void
  onLunarChange?: (isLunar: boolean) => void
  id?: string
  showLunarToggle?: boolean // 是否显示公历/农历切换
}

export function DateInputWithLunar({
  label,
  value,
  isLunar = false,
  onChange,
  onLunarChange,
  id,
  showLunarToggle = true,
}: DateInputWithLunarProps) {
  const [lunarInfo, setLunarInfo] = useState<string>("")

  // 当日期改变时，更新农历信息
  useEffect(() => {
    if (!value) {
      setLunarInfo("")
      return
    }

    const date = parseDate(value)
    if (!date) {
      setLunarInfo("")
      return
    }

    try {
      const lunar = solar2lunar(date)
      if (lunar) {
        setLunarInfo(lunar.toString())
      } else {
        const year = date.getFullYear()
        setLunarInfo(`⚠️ 农历转换仅支持1900-2100年 (当前: ${year}年)`)
      }
    } catch (error) {
      console.error("日期转换错误:", error)
      setLunarInfo("")
    }
  }, [value])

  return (
    <div className="space-y-3">
      <Label htmlFor={id} className="text-base font-medium">
        {label}
      </Label>

      {/* 公历日期输入 */}
      <div className="relative">
        <Input
          id={id}
          type="date"
          value={value || ""}
          onChange={(e) => onChange(e.target.value)}
          className="pr-10"
        />
        <Calendar className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
      </div>

      {/* 农历对照显示 */}
      {lunarInfo && (
        <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
          <div className="flex items-start gap-2">
            <Calendar className="h-4 w-4 text-amber-600 mt-0.5 flex-shrink-0" />
            <div className="flex-1 space-y-1">
              <div className="text-sm font-medium text-amber-900">
                农历对照
              </div>
              <div className="text-sm text-amber-800">
                {lunarInfo}
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 纪念日类型选择 */}
      {showLunarToggle && value && lunarInfo && !lunarInfo.includes('⚠️') && onLunarChange && (
        <div className="space-y-2">
          <Label className="text-sm font-medium">纪念日计算方式</Label>
          <RadioGroup
            value={isLunar ? "lunar" : "solar"}
            onValueChange={(val) => onLunarChange(val === "lunar")}
            className="flex flex-row gap-6"
          >
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="solar" id={`${id}-solar`} />
              <Label htmlFor={`${id}-solar`} className="text-sm font-normal cursor-pointer">
                按公历 (每年固定日期)
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <RadioGroupItem value="lunar" id={`${id}-lunar`} />
              <Label htmlFor={`${id}-lunar`} className="text-sm font-normal cursor-pointer">
                按农历 (对应农历日期)
              </Label>
            </div>
          </RadioGroup>
          <p className="text-xs text-muted-foreground">
            {isLunar 
              ? "💡 将按农历日期计算每年的纪念日,如生日、祭日等" 
              : "💡 将按公历日期计算每年的纪念日"}
          </p>
        </div>
      )}
    </div>
  )
}