"use client"

import { solar2lunar, formatDate } from "@/lib/lunar-calendar"

interface DualCalendarDisplayProps {
  date: Date
  className?: string
  size?: "sm" | "md" | "lg"
  showWeekday?: boolean
  compact?: boolean
}

export function DualCalendarDisplay({ 
  date, 
  className = "",
  size = "md",
  showWeekday = true,
  compact = false
}: DualCalendarDisplayProps) {
  // 获取农历信息
  const lunarInfo = solar2lunar(date)
  
  // 格式化显示
  const solarStr = formatDate(date)
  const [year, monthNum, day] = solarStr.split('-')
  const weekDay = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()]

  // 尺寸配置
  const sizeConfig = {
    sm: {
      container: "h-[80px]",
      padding: "p-3",
      titleGap: "mb-2",
      contentGap: "space-y-1",
      solarText: "text-lg",
      weekText: "text-xs",
      lunarText: "text-sm",
      tagText: "text-[10px]",
      tagPadding: "px-1.5 py-0.5"
    },
    md: {
      container: "h-[110px]",
      padding: "p-5",
      titleGap: "mb-3",
      contentGap: "space-y-2",
      solarText: "text-2xl",
      weekText: "text-sm",
      lunarText: "text-lg",
      tagText: "text-xs",
      tagPadding: "px-2 py-0.5"
    },
    lg: {
      container: "h-[140px]",
      padding: "p-6",
      titleGap: "mb-4",
      contentGap: "space-y-3",
      solarText: "text-3xl",
      weekText: "text-base",
      lunarText: "text-xl",
      tagText: "text-sm",
      tagPadding: "px-3 py-1"
    }
  }

  const config = sizeConfig[size]

  if (compact) {
    // 紧凑模式：单行显示
    return (
      <div className={`flex items-center gap-2 ${className}`}>
        <span className="text-sm font-medium">
          {year}年{parseInt(monthNum)}月{parseInt(day)}日
        </span>
        {lunarInfo && (
          <>
            <span className="text-xs text-muted-foreground">|</span>
            <span className="text-sm text-muted-foreground font-serif">
              {lunarInfo.monthName}{lunarInfo.dayName}
            </span>
          </>
        )}
      </div>
    )
  }

  return (
    <div className={`grid md:grid-cols-2 gap-4 ${className}`}>
      {/* 公历信息 */}
      <div className={`rounded-xl border-2 border-blue-200 bg-gradient-to-br from-blue-50 to-sky-50 ${config.padding} ${config.container} flex flex-col`}>
        <div className={`flex items-center gap-2 ${config.titleGap}`}>
          <div className="h-1 w-1 rounded-full bg-blue-600"></div>
          <h3 className="text-xs font-medium text-blue-900">公历</h3>
        </div>
        <div className={`${config.contentGap} flex-1 flex flex-col justify-center`}>
          <div className={`${config.solarText} font-bold text-blue-900 font-serif leading-tight`}>
            {year}年{parseInt(monthNum)}月{parseInt(day)}日
          </div>
          {showWeekday && (
            <div className={`${config.weekText} text-blue-700 font-medium`}>
              星期{weekDay}
            </div>
          )}
        </div>
      </div>

      {/* 农历信息 */}
      {lunarInfo ? (
        <div className={`rounded-xl border-2 border-red-200 bg-gradient-to-br from-red-50 to-amber-50 ${config.padding} ${config.container} flex flex-col overflow-hidden`}>
          <div className={`flex items-center gap-2 ${config.titleGap}`}>
            <div className="h-1 w-1 rounded-full bg-red-600"></div>
            <h3 className="text-xs font-medium text-red-900">农历</h3>
          </div>
          <div className="flex-1 flex items-center min-h-0">
            <div className="flex items-center gap-2 flex-wrap">
              <span className={`${config.lunarText} font-bold text-red-900 font-serif leading-tight whitespace-nowrap`}>
                {lunarInfo.ganZhiYear}年 {lunarInfo.monthName}{lunarInfo.dayName}
              </span>
              <span className={`${config.tagPadding} rounded-full bg-red-100 text-red-700 ${config.tagText} font-medium border border-red-200 whitespace-nowrap`}>
                {lunarInfo.animal}年
              </span>
              {lunarInfo.isLeap && (
                <span className={`${config.tagPadding} rounded-full bg-amber-100 text-amber-700 ${config.tagText} font-medium border border-amber-200 whitespace-nowrap`}>
                  闰月
                </span>
              )}
            </div>
          </div>
        </div>
      ) : (
        <div className={`rounded-xl border-2 border-gray-200 bg-gray-50 ${config.padding} ${config.container} flex items-center justify-center`}>
          <div className="text-center text-gray-500 text-sm">
            农历信息不可用
            <div className="text-xs mt-1">日期超出范围 (1900-2100)</div>
          </div>
        </div>
      )}
    </div>
  )
}