"use client"
import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'

type AdminRecordItem = {
  id: string
  timestamp: string
  sampleCount: number
  duration: 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 AdminClient({
  initialData,
  currentPage,
  pageSize,
  totalPages,
}: {
  initialData: AdminRecordItem[]
  currentPage: number
  pageSize: number
  totalPages: number
}) {
  const router = useRouter()
  const [data, setData] = useState(initialData)
  const [selected, setSelected] = useState<Set<string>>(new Set())
  const [editingTimes, setEditingTimes] = useState<Record<string, string>>(() => {
    const initial: Record<string, string> = {}
    for (const r of initialData) {
      initial[r.id] = toLocalInputValue(r.timestamp)
    }
    return initial
  })
  const [dirty, setDirty] = useState<Record<string, boolean>>({})

  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)))
      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('修改时间失败')
    }
  }

  function goToPage(page: number) {
    const params = new URLSearchParams()
    params.set('page', String(page))
    params.set('pageSize', String(pageSize))
    router.push(`/admin?${params.toString()}`)
  }

  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>

        <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>
          {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={() => {
                        const original = toLocalInputValue(r.timestamp)
                        setEditingTimes((prev) => ({ ...prev, [r.id]: original }))
                        setDirty((prev) => ({ ...prev, [r.id]: false }))
                      }}
                      className="rounded border px-2 py-1 text-[11px]"
                    >重置</button>
                    <button onClick={() => setNowFor(r.id)} className="rounded border px-2 py-1 text-[11px]">现在</button>
                    <button onClick={() => shiftMinutes(r.id, 1)} className="rounded border px-2 py-1 text-[11px]">+1min</button>
                    <button onClick={() => shiftMinutes(r.id, 10)} className="rounded border px-2 py-1 text-[11px]">+10min</button>
                    <button onClick={() => applyTime(r.id)} className="rounded bg-zinc-900 px-3 py-1 text-[11px] text-white dark:bg-zinc-100 dark:text-black">应用</button>
                  </div>
                </div>
                <div className="mt-1 text-[11px] text-zinc-500 sm:hidden">
                  时长 {r.duration} · 点数 {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={() => goToPage(Math.max(1, currentPage - 1))} 
              disabled={currentPage <= 1}
            >上一页</button>
            <div className="text-xs">{currentPage} / {totalPages}</div>
            <button 
              className="rounded border px-3 py-1.5 disabled:opacity-50" 
              onClick={() => goToPage(Math.min(totalPages, currentPage + 1))} 
              disabled={currentPage >= totalPages}
            >下一页</button>
          </div>
        </section>
      </div>
    </div>
  )
}