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

// 打卡页: 两个视图 —— 日历(含打卡) / 清单
// V0.2.1 界面调整 (设计文档 §11.5): 原「打卡」与「日历」两个 tab 合并为一个视图,
// 上日历下打卡、按 每天/每周/每月 分组、去掉「昨天今天明天」分段.
export default function CheckinPage() {
  const [active, setActive] = useState('calendar')
  const [date, setDate] = useState(() => toDateStr())

  const tabs = [
    { key: 'calendar', label: '打卡', render: () => <MergedView 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>
  )
}