"use client"

import { Calendar } from 'antd'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { solar2lunar } from '@/lib/lunar-calendar'
import './antd-lunar-calendar.css'

dayjs.locale('zh-cn')

interface AntdLunarCalendarProps {
  onSelect?: (date: Date) => void
}

export function AntdLunarCalendar({ onSelect }: AntdLunarCalendarProps) {
  const cellRender = (current: Dayjs) => {
    const date = current.toDate()
    const lunarInfo = solar2lunar(date)
    
    return (
      <div className="lunar-calendar-cell">
        <div className="solar-date">{current.date()}</div>
        {lunarInfo && (
          <div className="lunar-info">
            <div className="lunar-date">{lunarInfo.dayName}</div>
            {lunarInfo.isLeap && (
              <div className="lunar-leap-badge">闰</div>
            )}
          </div>
        )}
      </div>
    )
  }

  const handleSelect = (date: Dayjs) => {
    if (onSelect) {
      onSelect(date.toDate())
    }
  }

  return (
    <div className="antd-lunar-calendar-wrapper">
      <Calendar
        fullCellRender={cellRender}
        onSelect={handleSelect}
        validRange={[dayjs('1900-01-01'), dayjs('2100-12-31')]}
        locale={{
          lang: {
            locale: 'zh-cn',
            monthFormat: 'M月',
            yearFormat: 'YYYY年',
            today: '今天',
            now: '此刻',
            backToToday: '返回今天',
            ok: '确定',
            timeSelect: '选择时间',
            dateSelect: '选择日期',
            weekSelect: '选择周',
            clear: '清除',
            month: '月',
            year: '年',
            previousMonth: '上个月',
            nextMonth: '下个月',
            monthSelect: '选择月份',
            yearSelect: '选择年份',
            decadeSelect: '选择年代',
            dayFormat: 'D日',
            dateFormat: 'YYYY-MM-DD',
            dateTimeFormat: 'YYYY-MM-DD HH:mm:ss',
            previousYear: '上一年',
            nextYear: '下一年',
            previousDecade: '上一年代',
            nextDecade: '下一年代',
            previousCentury: '上一世纪',
            nextCentury: '下一世纪',
            shortWeekDays: ['日', '一', '二', '三', '四', '五', '六'],
            shortMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        }}
      />
    </div>
  )
}
