import { useState, useMemo } from 'react'
import { Trash2, Calendar } from 'lucide-react'
import { RecordList, RecordStats } from '../components/records'
import { Card, CardHeader, CardTitle, CardContent, Button, Input } from '../components/common'
import { useRecords } from '../hooks/useRecords'

export default function Records() {
  const { records, deleteRecord, clearRecords, getStats } = useRecords()
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')

  const stats = useMemo(() => getStats(), [getStats])

  const filteredRecords = useMemo(() => {
    if (!startDate && !endDate) return records

    return records.filter((record) => {
      const recordDate = new Date(record.timestamp)
      const start = startDate ? new Date(startDate) : null
      const end = endDate ? new Date(endDate + 'T23:59:59') : null

      if (start && recordDate < start) return false
      if (end && recordDate > end) return false
      return true
    })
  }, [records, startDate, endDate])

  const handleClearFilter = () => {
    setStartDate('')
    setEndDate('')
  }

  const handleClearAll = () => {
    if (window.confirm('确定要清空所有记录吗？此操作不可恢复。')) {
      clearRecords()
    }
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">加号记录</h1>
          <p className="text-sm text-slate-500 dark:text-slate-400">查看历史入库记录</p>
        </div>
        {records.length > 0 && (
          <Button
            variant="outline"
            size="sm"
            onClick={handleClearAll}
            icon={<Trash2 className="h-4 w-4" />}
          >
            清空记录
          </Button>
        )}
      </div>

      {/* Stats */}
      <RecordStats stats={stats} />

      {/* Filter */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calendar className="h-5 w-5" />
            日期筛选
          </CardTitle>
          {(startDate || endDate) && (
            <Button variant="ghost" size="sm" onClick={handleClearFilter}>
              清除筛选
            </Button>
          )}
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap items-end gap-4">
            <div className="w-40">
              <Input
                label="开始日期"
                type="date"
                value={startDate}
                onChange={(e) => setStartDate(e.target.value)}
              />
            </div>
            <div className="w-40">
              <Input
                label="结束日期"
                type="date"
                value={endDate}
                onChange={(e) => setEndDate(e.target.value)}
              />
            </div>
            <div className="text-sm text-slate-500 dark:text-slate-400">
              共 {filteredRecords.length} 条记录
              {filteredRecords.length !== records.length && <span className="ml-1">(已筛选)</span>}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Record List */}
      <Card>
        <CardHeader>
          <CardTitle>记录列表</CardTitle>
        </CardHeader>
        <CardContent>
          <RecordList records={filteredRecords} onDelete={deleteRecord} />
        </CardContent>
      </Card>
    </div>
  )
}
