'use client';

import { RouteGuard } from '@/components/auth/Guard';
import { useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Search, Tag, Plus, X, ChevronDown, MoreHorizontal, Pause, Play, XCircle, Trash2 } from 'lucide-react';
import { useProductStore } from '@/stores/useProductStore';
import { useRequirementStore } from '@/stores/useRequirementStore';
import { useVersionPlanStore } from '@/stores/useVersionPlanStore';
import { useDevTaskStore } from '@/stores/useDevTaskStore';
import { useTestCaseStore } from '@/stores/useTestCaseStore';
import { useAuthStore } from '@/stores/useAuthStore';
import { useMemberStore } from '@/stores/useMemberStore';
import { flattenVersions, flattenProjects } from '@/lib/derive';
import type { VersionWithContext } from '@/lib/derive';
import { VersionStatus, VERSION_STATUS_LABEL, VERSION_STATUS_DOT, VERSION_STATUS_BG, getVersionDisplayStatus } from '@/lib/version-status';
import { STAGES } from '@/lib/stage';
import { ROLE_LABEL } from '@/lib/stage';
import { buildVersionProgressMap } from '@/lib/version-progress';
import { calcHealthScore, getHealthLevel, calcRiskTags, HEALTH_LEVEL_COLOR, HEALTH_LEVEL_DOT, getTagStyle } from '@/lib/health';
import { Pagination, usePagination } from '@/components/Pagination';

type Priority = 'P0' | 'P1' | 'P2' | 'P3' | 'P4';

const PRIORITY_COLORS: Record<Priority, 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 PRIORITY_ORDER: Record<Priority, number> = {
  P0: 0,
  P1: 1,
  P2: 2,
  P3: 3,
  P4: 4,
};

function parseVersionNumber(name: string): number[] {
  const match = name.match(/V([\d.]+)$/i);
  if (!match) return [0];
  return match[1].split('.').map(Number);
}

function compareVersionsDesc(a: string, b: string): number {
  const va = parseVersionNumber(a);
  const vb = parseVersionNumber(b);
  const len = Math.max(va.length, vb.length);
  for (let i = 0; i < len; i++) {
    const na = va[i] ?? 0;
    const nb = vb[i] ?? 0;
    if (nb !== na) return nb - na;
  }
  return 0;
}

function sortVersions(versions: VersionWithContext[]): VersionWithContext[] {
  return [...versions].sort((a, b) => {
    // Sort by priority desc (P0 first)
    const pa = PRIORITY_ORDER[(a.priority ?? 'P2') as Priority] ?? 2;
    const pb = PRIORITY_ORDER[(b.priority ?? 'P2') as Priority] ?? 2;
    if (pa !== pb) return pa - pb;
    // Then by createdAt desc
    return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
  });
}

function getStageLabel(version: VersionWithContext): string {
  return getVersionDisplayStatus(version.status as VersionStatus, version.currentStage);
}

const STAGE_ROLE_MAP: Record<string, string[]> = {
  requirement: ['product'],
  product_design: ['product'],
  ui_design: ['ui'],
  dev: ['frontend', 'backend'],
  testing: ['testing'],
  released: [],
};

function getStageProgress(version: VersionWithContext): number {
  if (!version.currentStage || !version.progress) return 0;
  const roles = STAGE_ROLE_MAP[version.currentStage] || [];
  if (roles.length === 0) return 0;
  const items = roles.map((r) => version.progress!.find((p) => p.role === r)).filter(Boolean);
  if (items.length === 0) return 0;
  return Math.round(items.reduce((s, i) => s + i!.percent, 0) / items.length);
}

export default function VersionsPage() {
  return (
    <RouteGuard permission="version:view">
      <VersionsPageContent />
    </RouteGuard>
  );
}

function VersionsPageContent() {
  const router = useRouter();
  const { overview, fetchOverview, createVersion, updateVersion, deleteVersion } = useProductStore();
  const [search, setSearch] = useState('');
  const [projectFilter, setProjectFilter] = useState('all');
  const [priorityFilter, setPriorityFilter] = useState('all');
  const [projectDropdownOpen, setProjectDropdownOpen] = useState(false);
  const [priorityDropdownOpen, setPriorityDropdownOpen] = useState(false);
  const [showModal, setShowModal] = useState(false);
  const [openMenuId, setOpenMenuId] = useState<string | null>(null);

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

  const { requirements, fetchRequirements, updateRequirement } = useRequirementStore();
  useEffect(() => { fetchRequirements(); }, [fetchRequirements]);

  const { plans, fetchPlans } = useVersionPlanStore();
  useEffect(() => { fetchPlans(); }, [fetchPlans]);

  const { tasks: devTasks, fetchTasks: fetchDevTasks } = useDevTaskStore();
  useEffect(() => { fetchDevTasks(); }, [fetchDevTasks]);

  const { testCases, fetchTestCases } = useTestCaseStore();
  useEffect(() => { fetchTestCases(); }, [fetchTestCases]);

  const user = useAuthStore((s) => s.user);
  const currentUserName = user?.name || '';
  const { roles } = useMemberStore();
  const isSuperAdmin = useMemo(() => {
    const r = roles.find((x) => x.id === user?.roleId);
    return !!r && r.permissions.includes('*');
  }, [roles, user?.roleId]);

  const allVersionsRaw = useMemo(() => flattenVersions(overview), [overview]);
  // 只显示当前用户参与的版本（members为空时所有人可见；超管可见全部）
  const allVersions = useMemo(() => allVersionsRaw.filter((v) => {
    if (isSuperAdmin) return true;
    if (!v.members || v.members.length === 0) return true;
    return v.members.some((m) => m.name === currentUserName);
  }), [allVersionsRaw, currentUserName, isSuperAdmin]);
  const allProjects = useMemo(() => flattenProjects(overview), [overview]);

  // Compute overall progress per version from actual data
  const versionProgressMap = useMemo(
    () => buildVersionProgressMap(allVersions, plans, requirements, devTasks, testCases),
    [allVersions, plans, requirements, devTasks, testCases],
  );

  const filtered = useMemo(() => {
    let list = allVersions.filter((v) => {
      if (search && !v.name.toLowerCase().includes(search.toLowerCase())) return false;
      if (projectFilter !== 'all' && v.projectName !== projectFilter) return false;
      return true;
    });

    if (priorityFilter !== 'all') {
      list = list.filter(v => (v.priority ?? 'P2') === priorityFilter);
    }

    return sortVersions(list);
  }, [allVersions, search, projectFilter, priorityFilter]);

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

  const handleAction = async (version: VersionWithContext, action: 'pause' | 'resume' | 'close' | 'delete') => {
    setOpenMenuId(null);
    if (action === 'delete') {
      if (!confirm('确认删除该版本？关联的需求会回到需求池。')) return;
      requirements.filter((r) => r.versionId === version.id).forEach((r) => updateRequirement(r.id, { versionId: undefined, addedToVersionBy: undefined }));
      deleteVersion(version.productId, version.id);
      return;
    }
    const statusMap: Record<string, VersionStatus> = {
      pause: 'paused',
      resume: 'developing',
      close: 'closed',
    };
    if (updateVersion) {
      await updateVersion(version.productId, version.id, { status: statusMap[action] });
    }
  };

  return (
    <div className="flex h-full flex-col">
      <header className="flex h-14 shrink-0 items-center justify-between border-b border-[var(--line)] bg-[var(--bg-card)] px-5">
        <div className="flex items-center gap-2.5">
          <h1 className="text-[15px] font-semibold tracking-tight text-[var(--ink)]">版本</h1>
          <span className="rounded-md bg-[var(--bg-subtle)] px-1.5 py-0.5 text-[11px] font-medium tabular-nums text-[var(--ink-soft)]">{allVersions.length}</span>
        </div>
        <button onClick={() => setShowModal(true)} 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>
      </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>

        {/* Project dropdown */}
        <div className="relative">
          <button onClick={() => setProjectDropdownOpen(!projectDropdownOpen)} className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[12px] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors">
            {projectFilter === 'all' ? '全部项目' : projectFilter}
            <ChevronDown className="h-3 w-3" strokeWidth={2} />
          </button>
          {projectDropdownOpen && (
            <>
              <div className="fixed inset-0 z-10" onClick={() => setProjectDropdownOpen(false)} />
              <div className="absolute left-0 top-full z-20 mt-1 min-w-[140px] rounded-lg border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
                <button onClick={() => { setProjectFilter('all'); setProjectDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12px] transition-colors ${projectFilter === 'all' ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
                  全部项目
                </button>
                {allProjects.map((p) => (
                  <button key={p.id} onClick={() => { setProjectFilter(p.name); setProjectDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12px] transition-colors ${projectFilter === p.name ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
                    {p.name}
                  </button>
                ))}
              </div>
            </>
          )}
        </div>

        {/* Priority dropdown */}
        <div className="relative">
          <button onClick={() => setPriorityDropdownOpen(!priorityDropdownOpen)} className="flex h-8 items-center gap-1.5 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[12px] text-[var(--ink-soft)] hover:border-[var(--accent)] hover:text-[var(--accent)] transition-colors">
            {priorityFilter === 'all' ? '全部优先级' : priorityFilter}
            <ChevronDown className="h-3 w-3" strokeWidth={2} />
          </button>
          {priorityDropdownOpen && (
            <>
              <div className="fixed inset-0 z-10" onClick={() => setPriorityDropdownOpen(false)} />
              <div className="absolute left-0 top-full z-20 mt-1 min-w-[100px] rounded-lg border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
                <button onClick={() => { setPriorityFilter('all'); setPriorityDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12px] transition-colors ${priorityFilter === 'all' ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
                  全部优先级
                </button>
                {(['P0', 'P1', 'P2', 'P3', 'P4'] as Priority[]).map((p) => (
                  <button key={p} onClick={() => { setPriorityFilter(p); setPriorityDropdownOpen(false); }} className={`block w-full px-3 py-1.5 text-left text-[12px] transition-colors ${priorityFilter === p ? 'bg-[var(--accent-soft)] text-[var(--accent)]' : 'text-[var(--ink-soft)] hover:bg-[var(--bg-hover)]'}`}>
                    {p}
                  </button>
                ))}
              </div>
            </>
          )}
        </div>
      </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="rounded-2xl border border-[var(--line)] bg-[var(--bg-card)] shadow-[var(--shadow-sm)]">
              <table className="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>
                  </tr>
                </thead>
                <tbody>
                  {paged.map((v) => (
                    <VersionRow
                      key={v.id}
                      version={v}
                      overallProgress={versionProgressMap[v.id] ?? 0}
                      openMenuId={openMenuId}
                      setOpenMenuId={setOpenMenuId}
                      onNavigate={() => router.push(`/versions/${v.id}`)}
                      onAction={handleAction}
                    />
                  ))}
                </tbody>
              </table>
            </div>
            <Pagination total={total} page={page} pageSize={pageSize} onChange={setPage} onPageSizeChange={setPageSize} />
            </>
          )}
        </div>
      </div>

      {showModal && <NewVersionModal overview={overview} onClose={() => setShowModal(false)} onCreate={createVersion} currentUserName={currentUserName} />}
    </div>
  );
}

interface VersionRowProps {
  version: VersionWithContext;
  overallProgress: number;
  openMenuId: string | null;
  setOpenMenuId: (id: string | null) => void;
  onNavigate: () => void;
  onAction: (version: VersionWithContext, action: 'pause' | 'resume' | 'close' | 'delete') => void;
}

function VersionRow({ version, overallProgress, openMenuId, setOpenMenuId, onNavigate, onAction }: VersionRowProps) {
  const priority = (version.priority ?? 'P2') as Priority;
  const healthScore = calcHealthScore(version.status, version.startDate, version.expectedReleaseDate, version.progress);
  const healthLevel = getHealthLevel(healthScore);
  const riskTags = calcRiskTags(version.status, version.startDate, version.expectedReleaseDate, version.progress, version.currentStage, version.members);
  const isMenuOpen = openMenuId === version.id;

  // Members: show first 2 with role label, then +N
  const members = version.members ?? [];
  const displayMembers = members.slice(0, 2);
  const extraCount = members.length - 2;

  return (
    <tr className="border-b border-[var(--line-soft)] last:border-0 transition-colors hover:bg-[var(--bg-subtle)]">
      {/* 版本号 */}
      <td className="px-4 py-3">
        <button onClick={onNavigate} className="flex items-center gap-2 font-medium text-[var(--ink)] hover:text-[var(--accent)] transition-colors">
          <Tag className="h-3.5 w-3.5 text-[var(--ink-muted)]" strokeWidth={1.75} />
          {version.name}
        </button>
      </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[priority]}`}>
          {priority}
        </span>
      </td>

      {/* 整体进度 */}
      <td className="px-4 py-3">
        <div className="flex items-center gap-2">
          <div className="h-1.5 w-20 rounded-full bg-zinc-100">
            <div
              className="h-1.5 rounded-full bg-blue-500 transition-all"
              style={{ width: `${overallProgress}%` }}
            />
          </div>
          <span className="text-[11px] tabular-nums text-[var(--ink-muted)]">{overallProgress}%</span>
        </div>
      </td>

      {/* 健康度 */}
      <td className="px-4 py-3">
        <span className={`inline-flex items-center gap-1.5 text-[12px] font-semibold tabular-nums ${HEALTH_LEVEL_COLOR[healthLevel]}`}>
          <span className={`h-2 w-2 rounded-full ${HEALTH_LEVEL_DOT[healthLevel]}`} />
          {healthScore}
        </span>
      </td>

      {/* 风险标签 */}
      <td className="px-4 py-3">
        {riskTags.length === 0 ? (
          <span className="text-[11px] text-[var(--ink-muted)]">-</span>
        ) : (
          <div className="flex flex-wrap items-center gap-1">
            {riskTags.slice(0, 3).map((tag) => (
              <span key={tag.key} className={`inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-medium ${getTagStyle(tag.severity)}`}>
                {tag.label}
              </span>
            ))}
            {riskTags.length > 3 && (
              <span className="text-[10px] text-[var(--ink-muted)]">+{riskTags.length - 3}</span>
            )}
          </div>
        )}
      </td>

      {/* 截止日期 */}
      <td className="px-4 py-3 text-[var(--ink-muted)] tabular-nums">
        {version.expectedReleaseDate
          ? new Date(version.expectedReleaseDate).toISOString().slice(0, 10)
          : '-'}
      </td>

      {/* 负责人 */}
      <td className="px-4 py-3">
        <div className="flex items-center gap-1 text-[11px] text-[var(--ink-soft)]">
          {displayMembers.map((m, i) => (
            <span key={i} className="whitespace-nowrap">
              {ROLE_LABEL[m.role]}:{m.name}
            </span>
          ))}
          {extraCount > 0 && (
            <span className="whitespace-nowrap text-[var(--ink-muted)]">+{extraCount}</span>
          )}
          {members.length === 0 && <span className="text-[var(--ink-muted)]">-</span>}
        </div>
      </td>

      {/* 操作 */}
      <td className="px-4 py-3">
        <div className="relative">
          <button
            onClick={() => setOpenMenuId(isMenuOpen ? null : version.id)}
            className="rounded-lg p-1.5 text-[var(--ink-muted)] hover:bg-[var(--bg-hover)] transition-colors"
          >
            <MoreHorizontal className="h-4 w-4" strokeWidth={1.75} />
          </button>
          {isMenuOpen && (
            <>
              <div className="fixed inset-0 z-10" onClick={() => setOpenMenuId(null)} />
              <div className="absolute right-0 top-full z-20 mt-1 min-w-[120px] rounded-lg border border-[var(--line)] bg-[var(--bg-card)] py-1 shadow-[var(--shadow-md)]">
                {version.status === 'developing' && (
                  <button
                    onClick={() => onAction(version, 'pause')}
                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)] transition-colors"
                  >
                    <Pause className="h-3.5 w-3.5" strokeWidth={1.75} />
                    暂停
                  </button>
                )}
                {version.status === 'paused' && (
                  <button
                    onClick={() => onAction(version, 'resume')}
                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)] transition-colors"
                  >
                    <Play className="h-3.5 w-3.5" strokeWidth={1.75} />
                    恢复
                  </button>
                )}
                {version.status !== 'closed' && version.status !== 'released' && (
                  <button
                    onClick={() => onAction(version, 'close')}
                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-red-600 hover:bg-[var(--bg-hover)] transition-colors"
                  >
                    <XCircle className="h-3.5 w-3.5" strokeWidth={1.75} />
                    关闭
                  </button>
                )}
                {version.status === 'planned' && (
                  <button
                    onClick={() => onAction(version, 'delete')}
                    className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-[12px] text-red-600 hover:bg-[var(--bg-hover)] transition-colors"
                  >
                    <Trash2 className="h-3.5 w-3.5" strokeWidth={1.75} />
                    删除
                  </button>
                )}
              </div>
            </>
          )}
        </div>
      </td>
    </tr>
  );
}

type IterationType = 'major' | 'minor' | 'patch';

interface NewVersionModalProps {
  overview: any[];
  onClose: () => void;
  onCreate: (productId: string, data: { name: string; status: VersionStatus; priority?: Priority; expectedReleaseDate?: string; members?: any[] }) => void;
  currentUserName: string;
}

function getNextVersion(existingVersions: any[], projectName: string, type: IterationType): string {
  const projectVersions = existingVersions
    .filter((v: any) => v.name.startsWith(projectName + 'V'))
    .map((v: any) => {
      const match = v.name.match(/V([\d.]+)$/i);
      return match ? match[1].split('.').map(Number) : null;
    })
    .filter(Boolean) as number[][];

  if (projectVersions.length === 0) {
    if (type === 'major') return '1.0';
    if (type === 'minor') return '0.1';
    return '0.0.1';
  }

  // Find the max version
  projectVersions.sort((a, b) => {
    const len = Math.max(a.length, b.length);
    for (let i = 0; i < len; i++) {
      const diff = (b[i] ?? 0) - (a[i] ?? 0);
      if (diff !== 0) return diff;
    }
    return 0;
  });
  const latest = projectVersions[0];

  if (type === 'major') {
    return `${(latest[0] ?? 0) + 1}.0`;
  } else if (type === 'minor') {
    return `${latest[0] ?? 0}.${(latest[1] ?? 0) + 1}`;
  } else {
    const major = latest[0] ?? 0;
    const minor = latest[1] ?? 0;
    const patch = latest[2] ?? 0;
    return `${major}.${minor}.${patch + 1}`;
  }
}

function NewVersionModal({ overview, onClose, onCreate, currentUserName }: NewVersionModalProps) {
  const [productId, setProductId] = useState('');
  const [projectId, setProjectId] = useState('');
  const [projectName, setProjectName] = useState('');
  const [iterationType, setIterationType] = useState<IterationType | ''>('');
  const [versionNumber, setVersionNumber] = useState('');
  const [status] = useState<VersionStatus>('developing');
  const [priority, setPriority] = useState<Priority>('P2');
  const [expectedReleaseDate, setExpectedReleaseDate] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const selectedProduct = overview.find((p: any) => p.id === productId);
  const projects = selectedProduct?.projects ?? [];
  const existingVersions = selectedProduct?.versions ?? [];

  // When product changes, reset project
  const handleProductChange = (pid: string) => {
    setProductId(pid);
    setProjectId('');
    setProjectName('');
    setIterationType('');
    setVersionNumber('');
  };

  // When project changes
  const handleProjectChange = (projId: string) => {
    const proj = projects.find((p: any) => p.id === projId);
    setProjectId(projId);
    setProjectName(proj?.name ?? '');
    setIterationType('');
    setVersionNumber('');
  };

  // When iteration type changes, auto-generate version number
  const handleIterationChange = (type: IterationType) => {
    setIterationType(type);
    if (projectName) {
      const next = getNextVersion(existingVersions, projectName, type);
      setVersionNumber(next);
    }
  };

  const handleVersionInput = (val: string) => {
    // Only allow digits and dots
    const cleaned = val.replace(/[^\d.]/g, '');
    setVersionNumber(cleaned);
  };

  const canSubmit = productId && projectId && versionNumber && !submitting;

  const handleSubmit = async () => {
    if (!canSubmit) return;
    setSubmitting(true);
    try {
      await onCreate(productId, {
        name: `${projectName}V${versionNumber}`,
        status,
        priority,
        ...(expectedReleaseDate ? { expectedReleaseDate } : {}),
        members: currentUserName ? [{ role: 'product', name: currentUserName }] : [],
      });
      onClose();
    } catch (e) {
      setSubmitting(false);
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
      <div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] p-6 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-5">
          <h2 className="text-[15px] font-semibold text-[var(--ink)]">新建版本</h2>
          <button onClick={onClose} className="rounded-lg p-1 text-[var(--ink-muted)] hover:bg-[var(--bg-hover)] transition-colors">
            <X className="h-4 w-4" strokeWidth={2} />
          </button>
        </div>

        <div className="space-y-4">
          {/* 产品选择 */}
          <div>
            <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">产品选择<span className="text-red-500">*</span></label>
            <select value={productId} onChange={(e) => handleProductChange(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]">
              <option value="">请选择产品</option>
              {overview.map((p: any) => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>

          {/* 项目选择 */}
          <div>
            <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">项目选择<span className="text-red-500">*</span></label>
            <select value={projectId} onChange={(e) => handleProjectChange(e.target.value)} disabled={!productId} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] disabled:opacity-50 focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]">
              <option value="">请选择项目</option>
              {projects.map((p: any) => <option key={p.id} value={p.id}>{p.name}</option>)}
            </select>
          </div>

          {/* 迭代类型 */}
          <div>
            <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">迭代类型<span className="text-red-500">*</span></label>
            <div className="grid grid-cols-3 gap-2">
              {([
                { key: 'major' as const, label: '大版本', hint: 'X.0' },
                { key: 'minor' as const, label: '中版本', hint: '1.X' },
                { key: 'patch' as const, label: '小版本', hint: '1.2.X' },
              ]).map((opt) => (
                <button key={opt.key} onClick={() => handleIterationChange(opt.key)} disabled={!projectId} className={`flex flex-col items-center gap-0.5 rounded-lg border px-3 py-2 transition-colors disabled:opacity-50 ${iterationType === opt.key ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)]'}`}>
                  <span className="text-[12px] font-medium">{opt.label}</span>
                  <span className="text-[10px] text-[var(--ink-muted)] tabular-nums">{opt.hint}</span>
                </button>
              ))}
            </div>
          </div>

          {/* 版本号 */}
          <div>
            <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">版本号</label>
            <input value={versionNumber} onChange={(e) => handleVersionInput(e.target.value)} placeholder="1.0" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] tabular-nums text-[var(--ink)] placeholder:text-[var(--ink-muted)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]" />
            {projectName && versionNumber && (
              <p className="mt-1.5 text-[11px] text-[var(--ink-muted)]">将创建：<span className="font-medium text-[var(--ink-soft)]">{projectName}V{versionNumber}</span></p>
            )}
          </div>

          {/* 状态 */}


          {/* 优先级 */}
          <div>
            <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">优先级</label>
            <div className="grid grid-cols-3 gap-2">
              {(['P0', 'P1', 'P2', 'P3', 'P4'] as Priority[]).map((p) => (
                <button key={p} onClick={() => setPriority(p)} className={`h-9 rounded-lg border px-3 text-[12px] font-medium transition-colors ${priority === p ? 'border-[var(--accent)] bg-[var(--accent-soft)] text-[var(--accent)]' : 'border-[var(--line)] bg-[var(--bg-card)] text-[var(--ink-soft)] hover:border-[var(--accent)]'}`}>
                  {p}
                </button>
              ))}
            </div>
          </div>

          {/* 截止日期 */}
          <div>
            <label className="mb-1.5 block text-[12px] font-medium text-[var(--ink-soft)]">截止日期</label>
            <input
              type="date"
              value={expectedReleaseDate}
              onChange={(e) => setExpectedReleaseDate(e.target.value)}
              className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] text-[var(--ink)] focus:border-[var(--accent)] focus:outline-none focus:ring-2 focus:ring-[var(--accent-ring)]"
            />
          </div>
        </div>

        <div className="mt-6 flex justify-end gap-2">
          <button onClick={onClose} className="h-9 rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-4 text-[13px] text-[var(--ink-soft)] hover:bg-[var(--bg-hover)] transition-colors">取消</button>
          <button onClick={handleSubmit} disabled={!canSubmit} className="h-9 rounded-lg bg-[var(--accent)] px-4 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
            {submitting ? '提交中…' : '创建'}
          </button>
        </div>
      </div>
    </div>
  );
}