"use client"
import { useEffect, useMemo, useState } from 'react'
import Link from 'next/link'

type RecordItem = {
  id: string
  timestamp: string
  sampleCount: number
  duration: number
  hasFit: boolean
  fit?: { a: number; b: number }
  stats: {
    codeMin: number
    codeMax: number
    codeAvg: number
    forceMin?: number
    forceMax?: number
    forceAvg?: number
  }
}

export default function Home() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<RecordItem[]>([])
  const [total, setTotal] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(12)
  const [hasFit, setHasFit] = useState<'all' | 'fit' | 'raw'>('all')
  const [sortBy, setSortBy] = useState<'timestamp' | 'duration' | 'maxValue'>('timestamp')
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc')
  const [startDate, setStartDate] = useState('')
  const [endDate, setEndDate] = useState('')

  const totalPages = useMemo(() => Math.max(1, Math.ceil(total / pageSize)), [total, pageSize])

  useEffect(() => {
    const controller = new AbortController()
    async function run() {
      setLoading(true)
      setError(null)
      try {
        const params = new URLSearchParams()
        params.set('page', String(page))
        params.set('pageSize', String(pageSize))
        params.set('sortBy', sortBy)
        params.set('sortOrder', sortOrder)
        if (startDate) params.set('startDate', new Date(startDate).toISOString())
        if (endDate) params.set('endDate', new Date(endDate).toISOString())
        if (hasFit === 'fit') params.set('hasFit', 'true')
        if (hasFit === 'raw') params.set('hasFit', 'false')
        const res = await fetch(`/api/records?${params.toString()}`, { signal: controller.signal })
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        const j = await res.json()
        setData(j.data)
        setTotal(j.pagination.total)
      } catch (e: any) {
        if (e.name !== 'AbortError') setError(e.message || '加载失败')
      } finally {
        setLoading(false)
      }
    }
    run()
    return () => controller.abort()
  }, [page, pageSize, hasFit, sortBy, sortOrder, startDate, endDate])

  return (
    <div className="min-h-screen bg-zinc-50 text-zinc-900 dark:bg-black dark:text-zinc-100">
      <div className="mx-auto max-w-6xl p-4 sm:p-6">
        <header className="mb-4 flex flex-col gap-3 sm:mb-6 sm:flex-row sm:items-end sm:justify-between">
          <h1 className="text-2xl font-semibold">ESP32 数据采集系统</h1>
          <div className="flex flex-wrap items-end gap-2">
            <div className="flex items-center gap-2">
              <label className="text-sm">开始</label>
              <input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900" />
            </div>
            <div className="flex items-center gap-2">
              <label className="text-sm">结束</label>
              <input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900" />
            </div>
            <select value={hasFit} onChange={(e) => setHasFit(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
              <option value="all">全部</option>
              <option value="fit">仅已拟合</option>
              <option value="raw">仅未拟合</option>
            </select>
            <select value={sortBy} onChange={(e) => setSortBy(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
              <option value="timestamp">按时间</option>
              <option value="duration">按时长</option>
              <option value="maxValue">按最大值</option>
            </select>
            <select value={sortOrder} onChange={(e) => setSortOrder(e.target.value )} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
              <option value="desc">降序</option>
              <option value="asc">升序</option>
            </select>
            <select value={pageSize} onChange={(e) => { setPageSize(parseInt(e.target.value)); setPage(1) }} className="rounded border border-zinc-300 bg-white px-2 py-1 text-sm dark:bg-zinc-900">
              {[12, 20, 50, 100].map((n) => (
                <option key={n} value={n}>{n}/页</option>
              ))}
            </select>
          </div>
        </header>

        {error && <div className="mb-4 rounded bg-red-100 px-3 py-2 text-red-800">{error}</div>}

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {loading && Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="h-40 animate-pulse rounded-lg bg-zinc-200 dark:bg-zinc-800" />
          ))}
          {!loading && data.map((r) => (
            <div key={r.id} className="flex h-48 flex-col justify-between rounded-lg border border-zinc-200 bg-white p-4 shadow-sm transition hover:shadow-md dark:border-zinc-800 dark:bg-zinc-950">
              <div>
                <div className="flex items-center justify-between">
                  <div className="text-sm text-zinc-500">{new Date(r.timestamp).toLocaleString()}</div>
                  <span className={`rounded-full px-2 py-0.5 text-xs ${r.hasFit ? 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300' : 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300'}`}>{r.hasFit ? '已拟合' : '未拟合'}</span>
                </div>
                <div className="mt-2 text-xl font-semibold">{r.sampleCount} 点 · {r.duration.toFixed(2)} s</div>
                <div className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
                  {r.hasFit ? (
                    <>
                      力值: {r.stats.forceMin?.toFixed(2)} ~ {r.stats.forceMax?.toFixed(2)} mN · 均值 {r.stats.forceAvg?.toFixed(2)}
                    </>
                  ) : (
                    <>
                      码值: {r.stats.codeMin} ~ {r.stats.codeMax} · 均值 {r.stats.codeAvg.toFixed(2)}
                    </>
                  )}
                </div>
              </div>
              <div className="flex items-center justify-between">
                {r.hasFit && r.fit && (
                  <div className="text-[11px] text-zinc-500">y = {r.fit.a.toFixed(4)}x + {r.fit.b.toFixed(3)}</div>
                )}
                <div className="ml-auto flex gap-2">
                  <Link href={`/records/${r.id}`} className="rounded-md bg-zinc-900 px-3 py-1.5 text-sm text-white dark:bg-zinc-100 dark:text-black">查看</Link>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div className="mt-6 flex items-center justify-center gap-4">
          <button className="rounded border px-3 py-1.5 disabled:opacity-50" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page <= 1}>上一页</button>
          <div className="text-sm">{page} / {totalPages}</div>
          <button className="rounded border px-3 py-1.5 disabled:opacity-50" onClick={() => setPage((p) => Math.min(totalPages, p + 1))} disabled={page >= totalPages}>下一页</button>
        </div>
      </div>
    </div>
  )
}