"use client"

import { Calendar, ConfigProvider } from 'antd'
import type { Dayjs } from 'dayjs'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import locale from 'antd/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">
      <ConfigProvider locale={locale}>
        <Calendar
          fullCellRender={cellRender}
          onSelect={handleSelect}
          validRange={[
            dayjs('1900-01-01'), 
            dayjs().add(10, 'year').endOf('year')
          ]}
        />
      </ConfigProvider>
    </div>
  )
}