'use client';

import { useEffect, useState } from 'react';
import { Download, Plus, RefreshCcw, Trash2, Upload } from 'lucide-react';
import { RouteGuard } from '@/components/auth/Guard';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/useAuthStore';
import { useMemberStore } from '@/stores/useMemberStore';

type GovernanceKind = 'task_category' | 'requirement_type' | 'requirement_platform' | 'requirement_source';

interface GovernanceItem {
  id: string;
  kind?: string;
  name: string;
  code?: string | null;
  group?: string | null;
  isSystem?: boolean;
}

const KIND_LABEL: Record<GovernanceKind, string> = {
  task_category: '任务类型',
  requirement_type: '需求类型',
  requirement_platform: '支持端',
  requirement_source: '需求来源',
};

function GovernancePageInner() {
  const user = useAuthStore((s) => s.user);
  const role = useMemberStore((s) => s.roles.find((item) => item.id === user?.roleId));
  const [kind, setKind] = useState<GovernanceKind>('task_category');
  const [items, setItems] = useState<GovernanceItem[]>([]);
  const [name, setName] = useState('');
  const [group, setGroup] = useState('other');
  const [exportText, setExportText] = useState('');
  const actorId = user?.id ?? '';
  const permissions = role?.permissions ?? [];

  const reload = async () => {
    const rows = await api.get<GovernanceItem[]>(`/governance/dictionaries?kind=${kind}`);
    setItems(rows);
  };

  useEffect(() => {
    void reload().catch(() => setItems([]));
  }, [kind]);

  const create = async () => {
    if (!actorId || !name.trim()) return;
    await api.post('/governance/dictionaries', { actorId, permissions, kind, name: name.trim(), group });
    setName('');
    await reload();
  };

  const remove = async (item: GovernanceItem) => {
    if (!actorId) return;
    await api.deleteWithBody(`/governance/dictionaries/${kind}/${item.id}`, { actorId, permissions });
    await reload();
  };

  const exportAll = async () => {
    const data = await api.get('/governance/export');
    setExportText(JSON.stringify(data, null, 2));
  };

  const importAll = async () => {
    if (!actorId || !exportText.trim()) return;
    const parsed = JSON.parse(exportText);
    const sourceItems = Array.isArray(parsed.items)
      ? parsed.items
      : [...(parsed.dictionaries ?? []), ...(parsed.taskCategories ?? []).map((item: GovernanceItem) => ({ ...item, kind: 'task_category' }))];
    await api.post('/governance/import', { actorId, permissions, items: sourceItems });
    await reload();
  };

  return (
    <div className="min-h-full bg-[var(--bg)] p-6">
      <div className="mx-auto max-w-5xl space-y-5">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-[18px] font-semibold text-[var(--ink)]">治理设置</h1>
            <p className="mt-1 text-[12px] text-[var(--ink-muted)]">统一维护任务类型、需求类型、支持端与来源字典。</p>
          </div>
          <button onClick={reload} className="inline-flex h-8 items-center gap-1 rounded-md border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[12px] text-[var(--ink-soft)]">
            <RefreshCcw className="h-3.5 w-3.5" /> 刷新
          </button>
        </div>

        <div className="flex gap-2">
          {Object.entries(KIND_LABEL).map(([key, label]) => (
            <button
              key={key}
              onClick={() => setKind(key as GovernanceKind)}
              className={`h-8 rounded-md px-3 text-[12px] font-medium ${kind === key ? 'bg-[var(--accent)] text-white' : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)]'}`}
            >
              {label}
            </button>
          ))}
        </div>

        <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)]">
          <div className="grid grid-cols-[1fr_140px_auto] gap-2 border-b border-[var(--line)] p-3">
            <input value={name} onChange={(event) => setName(event.target.value)} placeholder={`新增${KIND_LABEL[kind]}`} className="h-8 rounded-md border border-[var(--line)] bg-[var(--bg)] px-3 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
            <input value={group} onChange={(event) => setGroup(event.target.value)} placeholder="分组" className="h-8 rounded-md border border-[var(--line)] bg-[var(--bg)] px-3 text-[12px] focus:border-[var(--accent)] focus:outline-none" />
            <button onClick={create} disabled={!name.trim()} className="inline-flex h-8 items-center gap-1 rounded-md bg-[var(--accent)] px-3 text-[12px] font-medium text-white disabled:opacity-50">
              <Plus className="h-3.5 w-3.5" /> 添加
            </button>
          </div>
          <div className="divide-y divide-[var(--line)]">
            {items.map((item) => (
              <div key={item.id} className="grid grid-cols-[1fr_160px_80px_32px] items-center gap-3 px-4 py-2.5">
                <span className="truncate text-[13px] text-[var(--ink)]">{item.name}</span>
                <span className="truncate text-[11px] text-[var(--ink-muted)]">{item.code ?? '-'}</span>
                <span className="truncate text-[11px] text-[var(--ink-muted)]">{item.group ?? '-'}</span>
                <button onClick={() => remove(item).catch(() => {})} disabled={item.isSystem} className="rounded p-1.5 text-[var(--ink-muted)] hover:bg-red-50 hover:text-red-600 disabled:opacity-30" title="删除">
                  <Trash2 className="h-3.5 w-3.5" />
                </button>
              </div>
            ))}
            {items.length === 0 && <div className="px-4 py-8 text-center text-[12px] text-[var(--ink-muted)]">暂无字典项</div>}
          </div>
        </section>

        <section className="rounded-lg border border-[var(--line)] bg-[var(--bg-card)] p-4">
          <div className="mb-3 flex items-center gap-2">
            <button onClick={exportAll} className="inline-flex h-8 items-center gap-1 rounded-md border border-[var(--line)] px-3 text-[12px] text-[var(--ink-soft)]">
              <Download className="h-3.5 w-3.5" /> 导出
            </button>
            <button onClick={importAll} disabled={!exportText.trim()} className="inline-flex h-8 items-center gap-1 rounded-md border border-[var(--line)] px-3 text-[12px] text-[var(--ink-soft)] disabled:opacity-50">
              <Upload className="h-3.5 w-3.5" /> 导入
            </button>
          </div>
          <textarea
            value={exportText}
            onChange={(event) => setExportText(event.target.value)}
            rows={10}
            className="w-full rounded-md border border-[var(--line)] bg-[var(--bg)] px-3 py-2 font-mono text-[11px] leading-5 focus:border-[var(--accent)] focus:outline-none"
            placeholder="点击导出生成 JSON，也可以粘贴 JSON 后导入"
          />
        </section>
      </div>
    </div>
  );
}

export default function GovernancePage() {
  return (
    <RouteGuard permission="governance:manage">
      <GovernancePageInner />
    </RouteGuard>
  );
}