'use client';

import { RouteGuard } from '@/components/auth/Guard';
import { useEffect, useMemo, useState } from 'react';
import { Search, Plus, Lightbulb, ArrowUp, ArrowDown, ChevronDown, ChevronRight, FolderOpen, Layers } from 'lucide-react';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useProductStore } from '@/stores/useProductStore';
import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { flattenProjects, flattenVersions } from '@/lib/derive';
import { REQ_STATUS_LABEL, REQ_STATUS_COLOR, SOURCE_TYPE_LABEL } from '@/lib/requirement';
import type { Requirement, RequirementStatus, SourceType } from '@/lib/requirement';
import { deriveReqDevStatus, canEditRequirement, canCloseRequirement, REQ_DEV_STATUS_LABEL, REQ_DEV_STATUS_COLOR } from '@/lib/linkage-engine';
import { buildRequirementScopeTree, filterRequirementsByScope, type RequirementProductScopeNode, type RequirementScopeSelection } from '@/lib/requirement-scope';
import { Pagination, usePagination } from '@/components/Pagination';
import { RequirementModal } from '@/components/requirement/RequirementModal';
import { RequirementDetail } from '@/components/requirement/RequirementDetail';
import { DictDrawer, SourceDrawer } from '@/components/requirement/DictDrawer';
import { FilterSelect } from '@/components/FilterSelect';

const PRIORITY_COLORS: Record<string, string> = {
  P0: 'bg-red-500/10 text-red-600',
  P1: 'bg-orange-500/10 text-orange-600',
  P2: 'bg-blue-500/10 text-blue-600',
  P3: 'bg-zinc-100 text-zinc-600',
  P4: 'bg-zinc-100 text-zinc-500',
};

const STATUS_TABS: { key: string; label: string }[] = [
  { key: 'all', label: '全部' },
  { key: 'pending_review', label: '待评审' },
  { key: 'adopted', label: '已采纳' },
  { key: 'rejected', label: '已拒绝' },
  { key: 'developing', label: '开发中' },
  { key: 'dev_completed', label: '已完成' },
  { key: 'released', label: '已上线' },
  { key: 'closed', label: '已关闭' },
];

export default function RequirementsPage() {
  return (
    <RouteGuard permission="requirement:view">
      <RequirementsPageContent />
    </RouteGuard>
  );
}

function RequirementProductNode({
  product,
  selectedScope,
  onSelect,
}: {
  product: RequirementProductScopeNode;
  selectedScope: RequirementScopeSelection;
  onSelect: (scope: RequirementScopeSelection) => void;
}) {
  const [expanded, setExpanded] = useState(true);
  const active = selectedScope.type === 'product' && selectedScope.productId === product.id;

  return (
    <div className="mb-0.5">
      <div className="flex items-center gap-1">
        <button
          type="button"
          onClick={() => setExpanded((value) => !value)}
          className="flex h-7 w-6 shrink-0 items-center justify-center rounded-md text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)]"
          aria-label={expanded ? '收起产品' : '展开产品'}
        >
          {expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
        </button>
        <button
          type="button"
          onClick={() => onSelect({ type: 'product', productId: product.id })}
          className={`flex min-w-0 flex-1 items-center gap-2 rounded-lg px-2 py-1.5 text-[12px] transition-colors ${
            active
              ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent)]'
              : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'
          }`}
        >
          <span className="min-w-0 flex-1 truncate text-left">{product.name}</span>
          <ScopeSignals count={product.count} />
        </button>
      </div>
      {expanded && (
        <div className="ml-7 mt-0.5 space-y-0.5">
          {product.projects.map((project) => (
            <RequirementProjectNode
              key={project.id}
              project={project}
              selectedScope={selectedScope}
              onSelect={onSelect}
            />
          ))}
        </div>
      )}
    </div>
  );
}

function RequirementProjectNode({
  project,
  selectedScope,
  onSelect,
}: {
  project: RequirementProductScopeNode['projects'][number];
  selectedScope: RequirementScopeSelection;
  onSelect: (scope: RequirementScopeSelection) => void;
}) {
  const active = selectedScope.type === 'project' && selectedScope.projectId === project.id;

  return (
    <button
      type="button"
      onClick={() => onSelect({ type: 'project', projectId: project.id })}
      className={`flex w-full min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-[12px] transition-colors ${
        active
          ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent)]'
          : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'
      }`}
    >
      <FolderOpen className="h-3.5 w-3.5 shrink-0 text-[var(--ink-muted)]" />
      <span className="min-w-0 flex-1 truncate text-left">{project.name}</span>
      <ScopeSignals count={project.count} compact />
    </button>
  );
}

function ScopeSignals({ count, compact = false }: { count: RequirementProductScopeNode['count']; compact?: boolean }) {
  const pendingReview = count.byStatus.pending_review ?? 0;
  const active = (count.byStatus.developing ?? 0) + (count.byStatus.testing ?? 0);

  return (
    <span className="flex shrink-0 items-center gap-1">
      {!compact && <ScopeSignal title="待评审" label="评" count={pendingReview} tone="amber" />}
      {!compact && <ScopeSignal title="执行中" label="进" count={active} tone="blue" />}
      <ScopeCount count={count.total} />
    </span>
  );
}

function ScopeSignal({ title, label, count, tone }: { title: string; label: string; count: number; tone: 'amber' | 'blue' }) {
  if (count <= 0) return null;
  const toneClass = tone === 'amber' ? 'bg-amber-50 text-amber-700' : 'bg-blue-50 text-blue-700';
  return (
    <span title={title} className={`rounded px-1.5 py-0.5 text-[10px] font-medium tabular-nums ${toneClass}`}>
      {label}{count}
    </span>
  );
}

function ScopeCount({ count }: { count: number }) {
  return (
    <span className="rounded bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-[var(--ink-muted)]">
      {count}
    </span>
  );
}

function RequirementsPageContent() {
  const {
    requirements, fetchRequirements, createRequirement, updateRequirement, deleteRequirement,
    sourceTargets, types, platforms,
    addSourceTarget, updateSourceTarget, deleteSourceTarget,
    addType, updateType, deleteType,
    addPlatform, updatePlatform, deletePlatform,
  } = useRequirementStore();
  const { overview, fetchOverview } = useProductStore();
  const { tasks: devTasks, fetchTasks: fetchDevTasks } = useDevTaskStore();
  const user = useAuthStore((s) => s.user);
  const currentUserName = user?.name || '系统';
  const allProjects = useMemo(() => flattenProjects(overview), [overview]);
  const allVersions = useMemo(() => flattenVersions(overview), [overview]);

  const [selectedScope, setSelectedScope] = useState<RequirementScopeSelection>({ type: 'all' });
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');
  const [priorityFilter, setPriorityFilter] = useState('all');
  const [typeFilter, setTypeFilter] = useState('all');
  const [versionFilter, setVersionFilter] = useState('all');

  const [showModal, setShowModal] = useState(false);
  const [editingReq, setEditingReq] = useState<Requirement | null>(null);
  const [viewingReq, setViewingReq] = useState<Requirement | null>(null);
  const [drawerType, setDrawerType] = useState<null | 'source' | 'type' | 'platform'>(null);
  const [rejectingReq, setRejectingReq] = useState<Requirement | null>(null);
  const [rejectReason, setRejectReason] = useState('');
  const [dateSort, setDateSort] = useState<'desc' | 'asc'>('desc');

  useEffect(() => { fetchOverview(); }, [fetchOverview]);
  useEffect(() => { fetchRequirements(); }, [fetchRequirements]);
  useEffect(() => { fetchDevTasks(); }, [fetchDevTasks]);

  const selectedScopeKey = selectedScope.type === 'all'
    ? 'all'
    : selectedScope.type === 'product'
      ? `product:${selectedScope.productId}`
      : `project:${selectedScope.projectId}`;

  useEffect(() => {
    setVersionFilter('all');
  }, [selectedScopeKey]);

  const scopeTree = useMemo(() => buildRequirementScopeTree(overview, requirements), [overview, requirements]);
  const scopedRequirements = useMemo(() => filterRequirementsByScope(requirements, selectedScope), [requirements, selectedScope]);
  const scopedVersions = useMemo(() => {
    if (selectedScope.type === 'product') return allVersions.filter((v) => v.productId === selectedScope.productId);
    if (selectedScope.type === 'project') return allVersions.filter((v) => v.projectId === selectedScope.projectId);
    return allVersions;
  }, [allVersions, selectedScope]);

  const selectedScopeTitle = useMemo(() => {
    if (selectedScope.type === 'product') {
      return overview.find((product) => product.id === selectedScope.productId)?.name ?? '产品需求';
    }
    if (selectedScope.type === 'project') {
      return allProjects.find((project) => project.id === selectedScope.projectId)?.name ?? '项目需求';
    }
    return '全部需求';
  }, [allProjects, overview, selectedScope]);

  const selectedScopeMeta = useMemo(() => {
    if (selectedScope.type === 'product') return '产品下全部项目';
    if (selectedScope.type === 'project') {
      const project = allProjects.find((item) => item.id === selectedScope.projectId);
      return project ? `${project.productName} / 项目` : '项目';
    }
    return '所有产品与项目';
  }, [allProjects, selectedScope]);

  // Resolve version name from overview
  const resolveVersionName = (versionId?: string): string => {
    if (!versionId) return '-';
    for (const product of overview) {
      const version = product.versions?.find((v: any) => v.id === versionId);
      if (version) return version.name;
    }
    return '-';
  };

  const filtered = useMemo(() => {
    let list = [...scopedRequirements];

    // search filter
    if (search) {
      const q = search.toLowerCase();
      list = list.filter(
        (r) => r.code.toLowerCase().includes(q) || r.title.toLowerCase().includes(q),
      );
    }

    // status filter
    if (statusFilter !== 'all') {
      list = statusFilter === 'dev_completed'
        ? list.filter((r) => deriveReqDevStatus(r.id, devTasks) === 'completed')
        : list.filter((r) => r.status === statusFilter);
    }

    // priority filter
    if (priorityFilter !== 'all') {
      list = list.filter((r) => r.priority === priorityFilter);
    }

    // type filter
    if (typeFilter !== 'all') {
      list = list.filter((r) => r.typeId === typeFilter);
    }
    if (versionFilter !== 'all') {
      list = list.filter((r) => r.versionId === versionFilter);
    }

    // sort by createdAt
    list.sort((a, b) => {
      const diff = new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
      return dateSort === 'asc' ? diff : -diff;
    });

    return list;
  }, [scopedRequirements, search, statusFilter, priorityFilter, typeFilter, versionFilter, dateSort, devTasks]);

  const { paged, page, setPage, total, pageSize, setPageSize } = usePagination(filtered, 20);

  const handleEdit = (req: Requirement) => {
    setViewingReq(null);
    setEditingReq(req);
    setShowModal(true);
  };

  const handleRowClick = (req: Requirement) => {
    setViewingReq(req);
  };

  const handleCreate = () => {
    setEditingReq(null);
    setShowModal(true);
  };

  return (
    <div className="flex h-full overflow-hidden bg-[var(--bg)]">
      <aside className="flex w-72 shrink-0 flex-col border-r border-[var(--line)] bg-[var(--bg-card)]">
        <div className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] px-4">
          <div>
            <h1 className="text-[14px] font-semibold text-[var(--ink)]">需求池</h1>
            <p className="mt-0.5 text-[11px] text-[var(--ink-muted)]">按产品 / 项目查看</p>
          </div>
          <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
            {requirements.length}
          </span>
        </div>
        <div className="flex-1 overflow-y-auto p-2">
          <button
            onClick={() => setSelectedScope({ type: 'all' })}
            className={`mb-1 flex w-full items-center gap-2 rounded-lg px-3 py-2 text-[12px] transition-colors ${
              selectedScope.type === 'all'
                ? 'bg-[var(--accent-soft)] font-medium text-[var(--accent)]'
                : 'text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]'
            }`}
          >
            <Layers className="h-3.5 w-3.5 shrink-0" />
            <span className="flex-1 text-left">全部需求</span>
            <ScopeCount count={requirements.length} />
          </button>
          {scopeTree.map((product) => (
            <RequirementProductNode
              key={product.id}
              product={product}
              selectedScope={selectedScope}
              onSelect={setSelectedScope}
            />
          ))}
        </div>
      </aside>

      <main className="min-w-0 flex-1 flex flex-col overflow-hidden">
      {/* Header */}
      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
        <div className="min-w-0">
          <div className="flex items-center gap-2.5">
            <h2 className="truncate text-[15px] font-semibold tracking-tight text-[var(--ink)]">{selectedScopeTitle}</h2>
            <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">
              {scopedRequirements.length}
            </span>
          </div>
          <p className="mt-0.5 text-[11px] text-[var(--ink-muted)]">{selectedScopeMeta}</p>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => setDrawerType('source')}
            className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] font-medium text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors"
          >
            <Lightbulb className="h-3.5 w-3.5" strokeWidth={2} />
            来源管理
          </button>
          <button
            onClick={handleCreate}
            className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors"
          >
            <Plus className="h-3.5 w-3.5" strokeWidth={2} />
            新建需求
          </button>
        </div>
      </header>

      {/* Filters */}
      <div className="flex shrink-0 flex-wrap items-center gap-3 border-b border-[var(--line)] bg-[var(--bg-card)] px-5 py-3">
        <div className="relative">
          <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-[var(--ink-muted)]" strokeWidth={2} />
          <input
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            placeholder="搜索编号或标题"
            className="h-8 w-64 rounded-lg border border-[var(--line)] bg-[var(--bg)] pl-8 pr-3 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
          />
        </div>

        {/* Status tabs */}
        <div className="flex flex-wrap gap-1">
          {STATUS_TABS.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setStatusFilter(tab.key)}
              className={`h-8 rounded-lg px-3 text-[12px] transition-colors ${
                statusFilter === tab.key
                  ? 'bg-[var(--accent)] text-white'
                  : 'border border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)]'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Priority dropdown */}
        <FilterSelect
          value={priorityFilter}
          onChange={setPriorityFilter}
          options={['P0', 'P1', 'P2', 'P3', 'P4'].map((p) => ({ value: p, label: p }))}
          placeholder="全部优先级"
          allLabel="全部优先级"
        />

        {/* Type dropdown */}
        <FilterSelect
          value={typeFilter}
          onChange={setTypeFilter}
          options={types.map((t) => ({ value: t.id, label: t.name }))}
          placeholder="全部类型"
          allLabel="全部类型"
        />

        {/* Version dropdown */}
        <FilterSelect
          value={versionFilter}
          onChange={setVersionFilter}
          options={scopedVersions.map((v) => ({ value: v.id, label: v.name }))}
          placeholder="全部版本"
          allLabel="全部版本"
        />
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto bg-[var(--bg)]">
        <div className="px-5 py-4">
          {filtered.length === 0 ? (
            <div className="rounded-2xl border border-dashed border-[var(--line)] bg-[var(--bg-card)] py-20 text-center">
              <p className="text-[13px] font-medium text-[var(--ink-soft)]">没有找到匹配的需求</p>
              <p className="mt-1.5 text-[12px] text-[var(--ink-muted)]">尝试调整筛选条件</p>
            </div>
          ) : (
            <>
              <div className="overflow-x-auto rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
                <table className="min-w-[1120px] w-full text-left text-[13px]">
                  <thead className="sticky top-0 z-10 bg-[var(--bg-subtle)]">
                    <tr className="border-b border-[var(--line)] bg-[var(--bg-subtle)]">
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求编号</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求概述</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求来源</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">所属项目</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求类型</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">业务状态</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">优先级</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">所属版本</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">实际进度</th>
                      <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">录入人员</th>
                      <th
                        className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)] cursor-pointer select-none hover:text-[var(--ink-soft)] transition-colors"
                        onClick={() => setDateSort(dateSort === 'desc' ? 'asc' : 'desc')}
                      >
                        <span className="inline-flex items-center gap-1">
                          录入日期
                          {dateSort === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUp className="h-3 w-3" />}
                        </span>
                      </th>
                      <th className="px-4 py-2.5 text-right text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">操作</th>
                    </tr>
                  </thead>
                  <tbody>
                    {paged.map((req) => (
                      <tr
                        key={req.id}
                        onClick={() => handleRowClick(req)}
                        className="border-b border-[var(--line-soft)] last:border-0 cursor-pointer transition-colors hover:bg-[var(--bg-subtle)]"
                      >
                        {/* 需求编号 */}
                        <td className="px-4 py-3 whitespace-nowrap">
                          <span className="font-medium text-[var(--ink)]">{req.code}</span>
                        </td>

                        {/* 需求概述 */}
                        <td className="px-4 py-3">
                          <span className="block max-w-[200px] truncate text-[var(--ink)]">{req.title}</span>
                        </td>

                        {/* 需求来源 */}
                        <td className="px-4 py-3 text-[13px] text-[var(--ink-soft)]">
                          {SOURCE_TYPE_LABEL[req.sourceType]}: {req.sourceTarget}
                        </td>

                        {/* 所属项目 */}
                        <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
                          {allProjects.find((p) => p.id === req.projectId)?.name ?? '-'}
                        </td>

                        {/* 需求类型 */}
                        <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
                          {types.find((t) => t.id === req.typeId)?.name ?? '-'}
                        </td>

                        {/* 状态 */}
                        <td className="px-4 py-3">
                          <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${REQ_STATUS_COLOR[req.status]}`}>
                            {REQ_STATUS_LABEL[req.status]}
                          </span>
                        </td>

                        {/* 优先级 */}
                        <td className="px-4 py-3">
                          <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium ${PRIORITY_COLORS[req.priority] ?? 'bg-zinc-100 text-zinc-500'}`}>
                            {req.priority}
                          </span>
                        </td>

                        {/* 所属版本 */}
                        <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
                          {resolveVersionName(req.versionId)}
                        </td>

                        {/* 开发状态 */}
                        <td className="px-4 py-3">
                          {(() => {
                            const devStatus = deriveReqDevStatus(req.id, devTasks);
                            return (
                              <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-medium ${REQ_DEV_STATUS_COLOR[devStatus]}`}>
                                {REQ_DEV_STATUS_LABEL[devStatus]}
                              </span>
                            );
                          })()}
                        </td>

                        {/* 录入人员 */}
                        <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
                          {req.creator}
                        </td>

                        {/* 录入日期 */}
                        <td className="px-4 py-3 text-[var(--ink-muted)] tabular-nums">
                          {new Date(req.createdAt).toISOString().slice(0, 10)}
                        </td>

                        {/* 操作 */}
                        <td className="px-4 py-3 text-right" onClick={(e) => e.stopPropagation()}>
                          <div className="flex items-center justify-end gap-1">
                            {/* 编辑：待评审/已采纳/已规划，且开发中不可编辑 */}
                            {(['pending_review', 'adopted', 'planned'] as const).includes(req.status as any) && canEditRequirement(req.id, devTasks) && (
                              <button
                                onClick={() => handleEdit(req)}
                                className="h-6 px-2 rounded text-[11px] font-medium text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)] transition-colors"
                              >
                                编辑
                              </button>
                            )}
                            {/* 待评审：采纳/拒绝 */}
                            {req.status === 'pending_review' && (
                              <>
                                <button
                                  onClick={() => updateRequirement(req.id, { status: 'adopted' })}
                                  className="h-6 px-2 rounded text-[11px] font-medium text-emerald-600 hover:bg-emerald-50 transition-colors"
                                >
                                  采纳
                                </button>
                                <button
                                  onClick={() => { setRejectingReq(req); setRejectReason(''); }}
                                  className="h-6 px-2 rounded text-[11px] font-medium text-red-600 hover:bg-red-50 transition-colors"
                                >
                                  拒绝
                                </button>
                              </>
                            )}
                            {/* 已采纳/已规划：关闭 */}
                            {(req.status === 'adopted' || req.status === 'planned') && canCloseRequirement(req.id, devTasks) && (
                              <button
                                onClick={() => updateRequirement(req.id, { status: 'closed' })}
                                className="h-6 px-2 rounded text-[11px] font-medium text-orange-600 hover:bg-orange-50 transition-colors"
                              >
                                关闭
                              </button>
                            )}
                            {/* 删除：待评审/已拒绝/已关闭（已采纳后不能直接删，需走拒绝） */}
                            {(['pending_review', 'rejected', 'closed'] as const).includes(req.status as any) && (
                              <button
                                onClick={() => deleteRequirement(req.id)}
                                className="h-6 px-2 rounded text-[11px] font-medium text-red-500 hover:bg-red-50 transition-colors"
                              >
                                删除
                              </button>
                            )}
                          </div>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
              <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />
            </>
          )}
        </div>
      </div>
      </main>

      {/* Detail drawer */}
      {viewingReq && (
        <RequirementDetail
          requirement={viewingReq}
          projects={allProjects.map((p) => ({ id: p.id, name: p.name }))}
          types={types}
          platforms={platforms}
          sourceTargets={sourceTargets}
          requirements={requirements}
          resolveVersionName={resolveVersionName}
          onClose={() => setViewingReq(null)}
          onEdit={canEditRequirement(viewingReq.id, devTasks) ? () => handleEdit(viewingReq) : undefined}
          onAdopt={() => { updateRequirement(viewingReq.id, { status: 'adopted' }); setViewingReq(null); }}
          onReject={() => { setRejectingReq(viewingReq); setRejectReason(''); setViewingReq(null); }}
          onCloseReq={canCloseRequirement(viewingReq.id, devTasks) ? () => { updateRequirement(viewingReq.id, { status: 'closed' }); setViewingReq(null); } : undefined}
          onDelete={() => { deleteRequirement(viewingReq.id); setViewingReq(null); }}
        />
      )}

      {/* Modal */}
      {showModal && (
        <RequirementModal
          open={true}
          initial={editingReq}
          products={overview.map((p) => ({ id: p.id, name: p.name }))}
          projects={allProjects.map((p) => ({ id: p.id, name: p.name, productId: p.productId }))}
          versions={allVersions.map((v) => ({ id: v.id, name: v.name, projectId: v.projectId }))}
          sourceTargets={sourceTargets}
          types={types}
          platforms={platforms}
          requirements={requirements}
          currentUserName={currentUserName}
          onClose={() => { setShowModal(false); setEditingReq(null); }}
          onSubmit={(data) => {
            if (editingReq) {
              updateRequirement(editingReq.id, data);
            } else {
              createRequirement(data);
            }
            setShowModal(false);
            setEditingReq(null);
          }}
          onOpenDrawer={(type) => setDrawerType(type)}
        />
      )}

      {/* Drawer */}
      {drawerType === 'source' && (
        <SourceDrawer
          open={true}
          items={sourceTargets}
          onClose={() => setDrawerType(null)}
          onAdd={addSourceTarget}
          onUpdate={updateSourceTarget}
          onDelete={deleteSourceTarget}
        />
      )}
      {drawerType === 'type' && (
        <DictDrawer
          open={true}
          title="需求类型管理"
          items={types}
          onClose={() => setDrawerType(null)}
          onAdd={addType}
          onUpdate={updateType}
          onDelete={deleteType}
        />
      )}
      {drawerType === 'platform' && (
        <DictDrawer
          open={true}
          title="支持端管理"
          items={platforms}
          onClose={() => setDrawerType(null)}
          onAdd={addPlatform}
          onUpdate={updatePlatform}
          onDelete={deletePlatform}
        />
      )}

      {/* 拒绝原因弹窗 */}
      {rejectingReq && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setRejectingReq(null)}>
          <div className="w-full max-w-sm rounded-xl bg-[var(--bg-card)] border border-[var(--line)] p-5 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
            <h3 className="text-[13px] font-semibold text-[var(--ink)] mb-3">拒绝需求</h3>
            <p className="text-[12px] text-[var(--ink-muted)] mb-2">需求：{rejectingReq.title}</p>
            <textarea
              value={rejectReason}
              onChange={(e) => setRejectReason(e.target.value)}
              placeholder="请填写拒绝原因..."
              rows={3}
              className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none resize-none"
            />
            <div className="flex justify-end gap-2 mt-3">
              <button onClick={() => setRejectingReq(null)} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">
                取消
              </button>
              <button
                onClick={() => {
                  if (!rejectReason.trim()) return;
                  updateRequirement(rejectingReq.id, { status: 'rejected', description: rejectingReq.description + `\n\n【拒绝原因】${rejectReason.trim()}` });
                  setRejectingReq(null);
                }}
                disabled={!rejectReason.trim()}
                className="h-8 px-3 rounded-lg text-[12px] font-medium bg-red-500 text-white hover:bg-red-600 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                确认拒绝
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}