import { useState } from 'react'
import PageHeader from '../../components/PageHeader.jsx'
import SwipeTabs from '../../components/SwipeTabs.jsx'
import HabitView from './HabitView.jsx'
import CalendarView from './CalendarView.jsx'
import ListView from './ListView.jsx'
import { toDateStr } from './date.js'

// 打卡页: 三个视图 —— 打卡(环形进度) / 日历(今天·昨天·明天) / 清单(检查清单 + 模板)
// 注: 打卡与日历的合并视图正在设计确认中, 确认后此处收敛为 日历(含打卡) / 清单 两个视图
export default function CheckinPage() {
  const [active, setActive] = useState('habit')
  const [date, setDate] = useState(() => toDateStr())

  const tabs = [
    { key: 'habit', label: '打卡', render: () => <HabitView date={date} /> },
    { key: 'calendar', label: '日历', render: () => <CalendarView date={date} onDateChange={setDate} /> },
    { key: 'list', label: '清单', render: () => <ListView /> },
  ]

  return (
    <div className="page-with-navbar">
      <PageHeader title="打卡" />
      <div className="checkin-content">
        <SwipeTabs tabs={tabs} active={active} onChange={setActive} />
      </div>
    </div>
  )
}