import { useEffect, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { MoreHorizontal, Pencil, Trash2, Plus } from 'lucide-react';
import {
  footprintDelete, footprintList, listTaxonomy, listTypes, statsOverview
} from '@/lib/api';
import type { FootprintRow } from '@/lib/types';
import {
  Badge, Button, Confirm, Dropdown, DropdownItem, Empty, Input, Select, Table, TableWrap, Td, Th, Tr, useToast
} from '@/components/ui';
import { StatusBadge, LevelBadge, RoleBadge, GradeBadge } from '@/components/common/badges';
import { RecordEditorDialog } from '@/components/records/RecordEditorDialog';
import { RecordDetailDialog } from '@/components/records/RecordDetailDialog';
import { fmtRange, fmtDateTime } from '@/lib/format';

const PAGE_SIZE = 20;

export function RecordsPage() {
  const qc = useQueryClient();
  const toast = useToast();
  const [params, setParams] = useSearchParams();

  const [q, setQ] = useState(params.get('q') ?? '');
  const [typeId, setTypeId] = useState('');
  const [year, setYear] = useState('');
  const [level, setLevel] = useState('');
  const [role, setRole] = useState('');
  const [status, setStatus] = useState('');
  const [sort, setSort] = useState('date_desc');
  const [page, setPage] = useState(1);

  const [editingId, setEditingId] = useState<number | null>(null);
  const [editorOpen, setEditorOpen] = useState(false);
  const [deleting, setDeleting] = useState<FootprintRow | null>(null);
  const [detailId, setDetailId] = useState<number | null>(null);
  const [detailOpen, setDetailOpen] = useState(false);

  // 新建入口：/records?new=1
  useEffect(() => {
    if (params.get('new') === '1') {
      setEditingId(null);
      setEditorOpen(true);
      params.delete('new');
      setParams(params, { replace: true });
    }
  }, [params, setParams]);

  const typesQ = useQuery({ queryKey: ['types'], queryFn: listTypes });
  const taxQ = useQuery({ queryKey: ['taxonomy-all'], queryFn: () => listTaxonomy() });
  const yearsQ = useQuery({ queryKey: ['stats', undefined], queryFn: () => statsOverview(undefined) });

  const query = useMemo(() => ({
    q: q || undefined,
    types: typeId ? [Number(typeId)] : undefined,
    levels: level ? [level] : undefined,
    roles: role ? [role] : undefined,
    statuses: status ? [status] : undefined,
    year: year ? Number(year) : undefined,
    sort,
    page,
    page_size: PAGE_SIZE
  }), [q, typeId, year, level, role, status, sort, page]);

  const listQ = useQuery({ queryKey: ['footprints', query], queryFn: () => footprintList(query) });

  useEffect(() => { setPage(1); }, [q, typeId, year, level, role, status]);

  const delMut = useMutation({
    mutationFn: (id: number) => footprintDelete(id),
    onSuccess: () => {
      toast('success', '记录已删除');
      void qc.invalidateQueries({ queryKey: ['footprints'] });
      void qc.invalidateQueries({ queryKey: ['timeline'] });
      void qc.invalidateQueries({ queryKey: ['stats'] });
      setDeleting(null);
    }
  });

  const total = listQ.data?.total ?? 0;
  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));

  const openNew = () => { setEditingId(null); setEditorOpen(true); };
  const openEdit = (id: number) => { setEditingId(id); setEditorOpen(true); };
  const openDetail = (id: number) => { setDetailId(id); setDetailOpen(true); };

  return (
    <div className="px-3 py-4 sm:px-6 sm:py-5">
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <Input
          className="w-[220px]"
          placeholder="搜索标题、内容、结果、标签…"
          value={q}
          onChange={e => setQ(e.target.value)}
        />
        <div className="grid w-full grid-cols-2 gap-2 sm:flex sm:w-auto sm:items-center sm:gap-2">
        <Select className="w-full sm:w-[130px]" value={typeId} onChange={e => setTypeId(e.target.value)}
          options={[{ value: '', label: '全部类型' }, ...(typesQ.data?.items ?? []).map(t => ({ value: String(t.id), label: t.name }))]} />
        <Select className="w-full sm:w-[110px]" value={year} onChange={e => setYear(e.target.value)}
          options={[{ value: '', label: '全部年份' }, ...(yearsQ.data?.years ?? []).map(y => ({ value: String(y), label: y + ' 年' }))]} />
        <Select className="w-full sm:w-[110px]" value={level} onChange={e => setLevel(e.target.value)}
          options={[{ value: '', label: '全部级别' }, ...(taxQ.data?.items ?? []).filter(t => t.kind === 'level').map(t => ({ value: t.value, label: t.value }))]} />
        <Select className="w-full sm:w-[100px]" value={role} onChange={e => setRole(e.target.value)}
          options={[{ value: '', label: '全部角色' }, ...(taxQ.data?.items ?? []).filter(t => t.kind === 'role').map(t => ({ value: t.value, label: t.value }))]} />
        <Select className="w-full sm:w-[110px]" value={status} onChange={e => setStatus(e.target.value)}
          options={[
            { value: '', label: '全部状态' },
            { value: 'draft', label: '草稿' },
            { value: 'ongoing', label: '进行中' },
            { value: 'submitted', label: '已提交待果' },
            { value: 'finished', label: '已完结' }
          ]} />
        <Select className="w-full sm:w-[130px]" value={sort} onChange={e => setSort(e.target.value)}
          options={[
            { value: 'date_desc', label: '时间从新到旧' },
            { value: 'date_asc', label: '时间从旧到新' },
            { value: 'updated_desc', label: '最近修改' },
            { value: 'weight_desc', label: '重要度优先' }
          ]} />
        </div>
        <div className="flex w-full items-center justify-between gap-2 sm:contents">
          <span className="num text-[12px] text-ink-3 sm:ml-auto">共 {total} 条</span>
          <Button variant="primary" size="md" onClick={openNew}>
            <Plus size={14} />
            新建
          </Button>
        </div>
      </div>

      <div className="hidden rounded-lg border border-line bg-surface shadow-card md:block">
        <TableWrap className="max-h-[calc(100vh-260px)] overflow-y-auto">
          <Table>
            <thead>
              <tr>
                <Th className="w-[32%]">标题</Th>
                <Th>类型</Th>
                <Th>时间</Th>
                <Th>级别</Th>
                <Th>奖等</Th>
                <Th>角色</Th>
                <Th>状态</Th>
                <Th className="text-right">附件</Th>
                <Th>更新时间</Th>
                <Th className="w-[52px]" />
              </tr>
            </thead>
            <tbody>
              {(listQ.data?.items ?? []).map(row => (
                <Tr key={row.id} onClick={() => openDetail(row.id)}>
                  <Td>
                    <div className="flex items-center gap-2">
                      <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: row.type_color }} />
                      <span className="truncate font-medium" title={row.title}>{row.title}</span>
                    </div>
                  </Td>
                  <Td className="whitespace-nowrap text-ink-2">{row.type_name}</Td>
                  <Td className="num whitespace-nowrap text-ink-2">{fmtRange(row.start_date, row.end_date)}</Td>
                  <Td><LevelBadge level={row.level} /></Td>
                  <Td><GradeBadge grade={row.award_grade} /></Td>
                  <Td><RoleBadge role={row.role} /></Td>
                  <Td><StatusBadge status={row.status} /></Td>
                  <Td className="num text-right text-ink-2">{row.attachment_count > 0 ? row.attachment_count : ''}</Td>
                  <Td className="num whitespace-nowrap text-ink-3">{fmtDateTime(row.updated_at)}</Td>
                  <Td onClick={e => e.stopPropagation()}>
                    <Dropdown
                      trigger={
                        <Button variant="ghost" size="icon-sm" aria-label="更多操作">
                          <MoreHorizontal size={15} />
                        </Button>
                      }
                    >
                      {close => (
                        <>
                          <DropdownItem onClick={() => { close(); openEdit(row.id); }}>
                            <Pencil size={13} /> 编辑
                          </DropdownItem>
                          <DropdownItem danger onClick={() => { close(); setDeleting(row); }}>
                            <Trash2 size={13} /> 删除
                          </DropdownItem>
                        </>
                      )}
                    </Dropdown>
                  </Td>
                </Tr>
              ))}
            </tbody>
          </Table>
          {!listQ.isLoading && !listQ.data?.items.length && (
            <Empty
              title="没有匹配的记录"
              description="调整筛选条件，或新建一条记录。"
              action={
                <Button variant="primary" onClick={openNew}>
                  <Plus size={14} /> 新建记录
                </Button>
              }
            />
          )}
        </TableWrap>

      {/* 手机端：卡片列表（表格在窄屏不可用） */}
      <div className="divide-y divide-line rounded-lg border border-line bg-surface md:hidden">
        {(listQ.data?.items ?? []).map(row => (
          <button key={row.id} onClick={() => openDetail(row.id)} className="block w-full px-3 py-3 text-left transition-colors active:bg-surface-2">
            <div className="flex items-center gap-2">
              <span className="size-2 shrink-0 rounded-full" style={{ backgroundColor: row.type_color }} />
              <span className="min-w-0 flex-1 truncate text-[13.5px] font-medium text-ink-1">{row.title}</span>
              {row.attachment_count > 0 && <span className="num shrink-0 text-[11px] text-ink-3">{row.attachment_count} 附件</span>}
            </div>
            <div className="mt-1.5 flex flex-wrap items-center gap-1.5">
              <Badge color={row.type_color}>{row.type_name}</Badge>
              <StatusBadge status={row.status} />
              {row.level && <LevelBadge level={row.level} />}
              {row.award_grade && <GradeBadge grade={row.award_grade} />}
            </div>
            <div className="num mt-1 text-[11.5px] text-ink-3">{fmtRange(row.start_date, row.end_date)}</div>
          </button>
        ))}
        {!listQ.isLoading && !listQ.data?.items.length && (
          <Empty
            title="没有匹配的记录"
            description="调整筛选条件，或新建一条记录。"
            action={<Button variant="primary" onClick={openNew}><Plus size={14} /> 新建记录</Button>}
          />
        )}
      </div>

      {total > 0 && (
        <div className="flex h-11 items-center justify-end gap-3 border-t border-line bg-surface px-4 text-[12px] text-ink-3">
            <span className="num">第 {page} / {totalPages} 页</span>
            <Button variant="secondary" size="sm" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>上一页</Button>
            <Button variant="secondary" size="sm" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>下一页</Button>
          </div>
        )}
      </div>

      <RecordDetailDialog
        open={detailOpen}
        onClose={() => setDetailOpen(false)}
        footprintId={detailId}
        onEdit={id => {
          setDetailOpen(false);
          openEdit(id);
        }}
      />

      <RecordEditorDialog
        open={editorOpen}
        onClose={() => setEditorOpen(false)}
        footprintId={editingId}
      />

      <Confirm
        open={!!deleting}
        title="删除记录"
        content={deleting ? '确定删除「' + deleting.title + '」吗？该操作不可撤销。' : ''}
        onCancel={() => setDeleting(null)}
        onOk={() => deleting && delMut.mutate(deleting.id)}
        loading={delMut.isPending}
      />
    </div>
  );
}