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

type AdminRecordItem = {
  id: string
  timestamp: string
  sampleCount: number
}

function toLocalInputValue(iso: string): string {
  const d = new Date(iso)
  if (Number.isNaN(d.getTime())) return ''
  const pad = (n: number) => n.toString().padStart(2, '0')
  const year = d.getFullYear()
  const month = pad(d.getMonth() + 1)
  const day = pad(d.getDate())
  const hour = pad(d.getHours())
  const minute = pad(d.getMinutes())
  const second = pad(d.getSeconds())
  return `${year}-${month}-${day}T${hour}:${minute}:${second}`
}

export default function AdminPage() {
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [data, setData] = useState<AdminRecordItem[]>([])
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [page, setPage] = useState(1)
  const [pageSize] = useState(50)
  const [total, setTotal] = useState(0)
  const [editingTimes, setEditingTimes] = useState<Record<string, string>>({})
  const [dirty, setDirty] = useState<Record<string, boolean>>({})

  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))
        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()
        const rows = j.data.map((r: any) => ({ id: r.id, timestamp: r.timestamp, sampleCount: r.sampleCount }))
        setData(rows)
        setTotal(j.pagination.total)
        setSelected(new Set())
        setEditingTimes((prev) => {
          const next: Record<string, string> = {}
          for (const r of rows) {
            const isoLocal = toLocalInputValue(r.timestamp)
            next[r.id] = prev[r.id] ?? isoLocal
          }
          return next
        })
        setDirty({})
      } catch (e: any) {
        if (e.name !== 'AbortError') setError(e.message || '加载失败')
      } finally {
        setLoading(false)
      }
    }
    run()
    return () => controller.abort()
  }, [page, pageSize])

  function toggleSelect(id: string) {
    setSelected((prev) => {
      const next = new Set(prev)
      if (next.has(id)) next.delete(id)
      else next.add(id)
      return next
    })
  }

  function selectAllCurrent() {
    setSelected(new Set(data.map((d) => d.id)))
  }

  function clearSelection() {
    setSelected(new Set())
  }

  async function handleBatchDelete() {
    if (selected.size === 0) return
    if (!confirm(`确定要删除选中的 ${selected.size} 条记录吗?`)) return
    try {
      const res = await fetch('/api/records/batch', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ action: 'delete', ids: Array.from(selected) }),
      })
      if (!res.ok) throw new Error('批量删除失败')
      const j = await res.json()
      const deletedIds: string[] = j.deletedIds || []
      setData((prev) => prev.filter((r) => !deletedIds.includes(r.id)))
      setTotal((prev) => Math.max(0, prev - deletedIds.length))
      clearSelection()
    } catch {
      alert('批量删除失败')
    }
  }

  function setNowFor(id: string) {
    const now = new Date()
    const isoLocal = toLocalInputValue(now.toISOString())
    setEditingTimes((prev) => ({ ...prev, [id]: isoLocal }))
    setDirty((prev) => ({ ...prev, [id]: true }))
  }

  function shiftMinutes(id: string, minutes: number) {
    setEditingTimes((prev) => {
      const current = prev[id]
      const base = current ? new Date(current) : new Date()
      if (Number.isNaN(base.getTime())) return prev
      const shifted = new Date(base.getTime() + minutes * 60 * 1000)
      const isoLocal = toLocalInputValue(shifted.toISOString())
      return { ...prev, [id]: isoLocal }
    })
    setDirty((prev) => ({ ...prev, [id]: true }))
  }

  async function applyTime(id: string) {
    const input = editingTimes[id]
    if (!input) {
      alert('请输入时间')
      return
    }
    const dt = new Date(input)
    if (Number.isNaN(dt.getTime())) {
      alert('时间格式不正确')
      return
    }
    try {
      const res = await fetch('/api/records/batch', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify({ action: 'updateTimestamp', ids: [id], timestamp: dt.toISOString() }),
      })
      if (!res.ok) throw new Error('修改时间失败')
      const j = await res.json()
      const updated: { id: string; timestamp: string }[] = j.updated || []
      if (!updated.length) return
      const { timestamp } = updated[0]
      setData((prev) => prev.map((r) => (r.id === id ? { ...r, timestamp } : r)))
      setEditingTimes((prev) => ({ ...prev, [id]: toLocalInputValue(timestamp) }))
      setDirty((prev) => ({ ...prev, [id]: false }))
    } catch {
      alert('修改时间失败')
    }
  }

  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-2 sm:p-6">
        <header className="mb-4 flex items-center justify-between gap-3">
          <div>
            <h1 className="text-2xl font-semibold">Admin 面板</h1>
            <p className="mt-1 text-xs text-zinc-500">批量删除记录，批量修改时间等维护操作</p>
          </div>
          <Link href="/" className="rounded border px-3 py-1.5 text-sm">← 返回首页</Link>
        </header>

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

        <section className="mb-4 flex flex-wrap items-center gap-3 rounded border border-zinc-200 bg-white p-3 text-sm dark:border-zinc-800 dark:bg-zinc-950">
          <div className="flex items-center gap-2">
            <button onClick={selectAllCurrent} className="rounded border px-2 py-1">全选当前页</button>
            <button onClick={clearSelection} className="rounded border px-2 py-1">清空选择</button>
            <span className="text-xs text-zinc-500">已选 {selected.size} 条</span>
          </div>
          <div className="flex items-center gap-2">
            <button onClick={handleBatchDelete} className="rounded bg-red-600 px-3 py-1 text-white disabled:opacity-50" disabled={selected.size === 0}>批量删除</button>
          </div>
        </section>

        <section className="rounded border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
          <div className="hidden items-center justify-between border-b px-3 py-2 text-xs text-zinc-500 dark:border-zinc-800 sm:flex">
            <div className="flex items-center gap-2">
              <span className="w-8 text-center">选中</span>
              <span className="w-40">ID</span>
              <span className="w-72">时间 / 编辑</span>
              <span className="w-24 text-right">采样点数</span>
            </div>
          </div>
          {loading && (
            <div className="px-3 py-3 text-sm text-zinc-500">加载中...</div>
          )}
          {!loading && data.length === 0 && (
            <div className="px-3 py-3 text-sm text-zinc-500">暂无数据</div>
          )}
          <div className="divide-y text-sm dark:divide-zinc-800">
            {data.map((r) => (
              <div key={r.id} className="border-b px-3 py-2 text-xs last:border-b-0 dark:border-zinc-800">
                <div className="flex items-center justify-between gap-2">
                  <div className="flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={selected.has(r.id)}
                      onChange={() => toggleSelect(r.id)}
                      className="h-4 w-4"
                    />
                    <span className="max-w-[200px] truncate font-mono sm:w-40">{r.id}</span>
                  </div>
                  <div className="hidden items-center gap-2 sm:flex">
                    <span className="text-[11px] text-zinc-500">{new Date(r.timestamp).toLocaleString()}</span>
                    <span className="w-16 text-right text-[11px] text-zinc-500">{r.sampleCount}</span>
                  </div>
                  <Link href={`/records/${r.id}`} className="text-[11px] text-blue-600 hover:underline dark:text-blue-400">详情</Link>
                </div>
                <div className="mt-1 flex flex-col gap-1 sm:mt-1 sm:flex-row sm:items-center sm:gap-2">
                  <div
                    className={`flex flex-1 items-center gap-1 rounded border px-1 py-0.5 ${dirty[r.id] ? 'border-amber-400 bg-amber-50 dark:border-amber-500 dark:bg-amber-900/30' : 'border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-900'}`}
                  >
                    <input
                      type="datetime-local"
                      value={editingTimes[r.id] || ''}
                      onChange={(e) => {
                        const v = e.target.value
                        setEditingTimes((prev) => ({ ...prev, [r.id]: v }))
                        const original = toLocalInputValue(r.timestamp)
                        setDirty((prev) => ({ ...prev, [r.id]: v !== original }))
                      }}
                      className="w-full bg-transparent text-[11px] outline-none"
                    />
                  </div>
                  <div className="mt-1 flex flex-wrap gap-1 sm:mt-0 sm:flex-none sm:justify-start justify-end">
                    <button onClick={() => setNowFor(r.id)} className="rounded border px-1.5 py-0.5 text-[10px]">现在</button>
                    <button onClick={() => shiftMinutes(r.id, 1)} className="rounded border px-1.5 py-0.5 text-[10px]">+1min</button>
                    <button onClick={() => shiftMinutes(r.id, 10)} className="rounded border px-1.5 py-0.5 text-[10px]">+10min</button>
                    <button onClick={() => applyTime(r.id)} className="rounded bg-zinc-900 px-2 py-0.5 text-[10px] text-white dark:bg-zinc-100 dark:text-black">应用</button>
                  </div>
                </div>
                <div className="mt-1 text-[11px] text-zinc-500 sm:hidden">
                  当前：{new Date(r.timestamp).toLocaleString()} · 点数 {r.sampleCount}
                </div>
              </div>
            ))}
          </div>
          <div className="flex items-center justify-center gap-4 border-t px-3 py-2 text-sm dark:border-zinc-800">
            <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-xs">{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>
        </section>
      </div>
    </div>
  )
}