import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useMemo, useState } from "react";
import { fetchEmployees } from "../api/employees";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  createProject,
  fetchProjects,
  type ProjectListItem,
  type ProjectStatus,
} from "../api/projects";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission } from "../auth/permissions";
import { DateTextInput } from "../components/common/DateTextInput";
import { StatusBadge } from "../components/common/StatusBadge";
import { HeaderActionGroup, ListWorkspace, WorkspaceHeader, WorkspaceNotice } from "../components/patterns/ListWorkspace";
import {
  BusinessListToolbar,
  BusinessMobileList,
  BusinessTable,
} from "../components/patterns/BusinessListTemplate";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "../components/ui/dropdown-menu";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";
import { formatDisplayDate } from "../lib/displayFormat";
import { hasTrialNoise } from "../lib/trialNoise";
import { toast } from "sonner";

const STATUS_OPTIONS: Array<{ value: "all" | ProjectStatus; label: string }> = [
  { value: "all", label: "全部状态" },
  { value: "draft", label: "草稿" },
  { value: "active", label: "进行中" },
  { value: "paused", label: "暂停" },
  { value: "completed", label: "完成" },
  { value: "archived", label: "归档" },
];

function resolveError(error: unknown, fallback = "操作失败") {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  return error instanceof Error ? error.message : fallback;
}

function summaryLine(item: ProjectListItem) {
  const parts = [
    `成员 ${item.counts.members}`,
    `里程碑 ${item.counts.milestones}`,
    `任务 ${item.counts.tasks}`,
    `风险 ${item.counts.risks}`,
  ];
  if (item.counts.overdueMilestones > 0) {
    parts.push(`逾期 ${item.counts.overdueMilestones}`);
  }
  if (item.counts.highPriorityTasks > 0) {
    parts.push(`高优任务 ${item.counts.highPriorityTasks}`);
  }
  return parts.join(" · ");
}

export function ProjectsPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { permissions, me } = useAuth();
  const [searchParams, setSearchParams] = useSearchParams();

  const q = searchParams.get("q") ?? "";
  const status = (searchParams.get("status") as "all" | ProjectStatus | null) ?? "all";
  const mine = searchParams.get("mine") !== "0";

  const canManageProjects = hasAnyPermission(permissions, ["project.manage", "system.settings", "report.dashboard.view"]);

  const [name, setName] = useState("");
  const [clientName, setClientName] = useState("");
  const [clientAlias, setClientAlias] = useState("");
  const [summary, setSummary] = useState("");
  const [managerEmployeeId, setManagerEmployeeId] = useState("");
  const [startsAt, setStartsAt] = useState("");
  const [targetEndAt, setTargetEndAt] = useState("");
  const [isConfidential, setIsConfidential] = useState(false);
  const [showTrialData, setShowTrialData] = useState(false);
  const [showCreatePanel, setShowCreatePanel] = useState(false);

  const listQuery = useQuery({
    queryKey: ["projects", "list", status, mine, q],
    queryFn: () =>
      fetchProjects({
        q: q || undefined,
        mine,
        status: status === "all" ? undefined : status,
      }),
  });

  const employeesQuery = useQuery({
    enabled: canManageProjects,
    queryKey: ["employees", "projects-managers"],
    queryFn: () => fetchEmployees({ page: 1, pageSize: 100, status: "active" }),
  });

  const managerCandidates = useMemo(
    () => (employeesQuery.data?.items ?? []).filter((item) => item.id !== me?.id),
    [employeesQuery.data?.items, me?.id],
  );

  const projectItems = listQuery.data?.items ?? [];
  const visibleProjectItems = useMemo(() => {
    const formalItems = showTrialData
      ? projectItems
      : projectItems.filter(
          (item) => !hasTrialNoise(item.projectNo, item.name, item.clientName, item.clientAlias, item.summary),
        );
    return [...formalItems].sort((a, b) => {
      const score = (item: ProjectListItem) => {
        let value = 0;
        if (item.status === "active") value += 40;
        if (item.counts.openRisks > 0) value += 30;
        if (item.counts.overdueMilestones > 0) value += 20;
        if (item.counts.highPriorityTasks > 0) value += 10;
        return value;
      };
      const scoreDelta = score(b) - score(a);
      if (scoreDelta !== 0) return scoreDelta;
      return (b.updatedAt ?? "").localeCompare(a.updatedAt ?? "");
    });
  }, [projectItems, showTrialData]);
  const hiddenTrialProjectCount = projectItems.length - visibleProjectItems.length;

  const createMutation = useMutation({
    mutationFn: () =>
      createProject({
        name: name.trim(),
        clientName: clientName.trim(),
        clientAlias: clientAlias.trim() || null,
        summary: summary.trim() || null,
        managerEmployeeId: managerEmployeeId || null,
        startsAt: startsAt || null,
        targetEndAt: targetEndAt || null,
        isConfidential,
        status: "draft",
      }),
    onSuccess: async (payload) => {
      setName("");
      setClientName("");
      setClientAlias("");
      setSummary("");
      setManagerEmployeeId("");
      setStartsAt("");
      setTargetEndAt("");
      setIsConfidential(false);
      await queryClient.invalidateQueries({ queryKey: ["projects"] });
      toast.success("项目已创建");
      navigate(`/projects/${payload.item.id}`);
    },
    onError: (error) => toast.error(resolveError(error, "创建项目失败")),
  });

  function updateSearch(next: Partial<{ q: string; status: string; mine: boolean }>) {
    const params = new URLSearchParams(searchParams);
    if (next.q !== undefined) {
      if (next.q) params.set("q", next.q);
      else params.delete("q");
    }
    if (next.status !== undefined) {
      if (next.status && next.status !== "all") params.set("status", next.status);
      else params.delete("status");
    }
    if (next.mine !== undefined) {
      if (next.mine) params.delete("mine");
      else params.set("mine", "0");
    }
    setSearchParams(params, { replace: true });
  }

  return (
    <ListWorkspace>
      <WorkspaceHeader
        title="项目"
        actions={
          <HeaderActionGroup>
            {canManageProjects ? (
              <Button type="button" onClick={() => setShowCreatePanel(true)}>
                新建项目
              </Button>
            ) : null}
          </HeaderActionGroup>
        }
      />

      {showCreatePanel ? (
        <SectionPanel title="新建项目">
          <div className="space-y-4">
            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-2">
                <Label>项目名称</Label>
                <Input value={name} onChange={(event) => setName(event.target.value)} placeholder="例如：深圳某客户现场实施" />
              </div>
              <div className="space-y-2">
                <Label>客户名称</Label>
                <Input value={clientName} onChange={(event) => setClientName(event.target.value)} placeholder="客户全称" />
              </div>
              <div className="space-y-2">
                <Label>客户简称</Label>
                <Input value={clientAlias} onChange={(event) => setClientAlias(event.target.value)} placeholder="可选" />
              </div>
              <div className="space-y-2">
                <Label>项目经理</Label>
                <select className="select-std" value={managerEmployeeId} onChange={(event) => setManagerEmployeeId(event.target.value)}>
                  <option value="">未指定</option>
                  {managerCandidates.map((item) => (
                    <option key={item.id} value={item.id}>
                      {item.name} · {item.employeeNo}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            <div className="grid gap-3 md:grid-cols-2">
              <div className="space-y-2">
                <Label>开始日期</Label>
                <DateTextInput value={startsAt} onChange={(event) => setStartsAt(event.target.value)} />
              </div>
              <div className="space-y-2">
                <Label>目标完成</Label>
                <DateTextInput value={targetEndAt} onChange={(event) => setTargetEndAt(event.target.value)} />
              </div>
            </div>
            <div className="space-y-2">
              <Label>项目摘要</Label>
              <Textarea value={summary} onChange={(event) => setSummary(event.target.value)} placeholder="填项目目标、交付范围、关键约束" />
            </div>
            <label className="flex items-center gap-2 text-sm text-zinc-700">
              <input type="checkbox" checked={isConfidential} onChange={(event) => setIsConfidential(event.target.checked)} />
              项目含涉密内容（正文与附件继续离线保存）
            </label>
            <div className="flex flex-wrap gap-2">
              <Button
                type="button"
                disabled={createMutation.isPending || !name.trim() || !clientName.trim()}
                onClick={() => createMutation.mutate()}
              >
                {createMutation.isPending ? "创建中..." : "创建项目"}
              </Button>
              <Button type="button" variant="secondary" onClick={() => setShowCreatePanel(false)}>
                取消
              </Button>
            </div>
          </div>
        </SectionPanel>
      ) : null}

      <div className="space-y-4">
          <BusinessListToolbar
            actions={
              <>
                <Button type="button" size="sm" variant={mine ? "default" : "secondary"} onClick={() => updateSearch({ mine: !mine })}>
                  {mine ? "我相关" : "全范围"}
                </Button>
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button type="button" size="sm" variant={showTrialData ? "default" : "secondary"}>
                      更多
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end">
                    <DropdownMenuItem asChild>
                      <Link to="/contracts-registry">查看合同</Link>
                    </DropdownMenuItem>
                    <DropdownMenuItem onSelect={() => setShowTrialData((value) => !value)}>
                      {showTrialData ? "隐藏测试数据" : "显示测试数据"}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </>
            }
          >
          <div className="grid gap-3 md:grid-cols-[minmax(0,1fr),180px]">
            <Input placeholder="搜索项目编号、项目名、客户名" value={q} onChange={(event) => updateSearch({ q: event.target.value })} />
            <select className="select-std" value={status} onChange={(event) => updateSearch({ status: event.target.value })}>
              {STATUS_OPTIONS.map((item) => (
                <option key={item.value} value={item.value}>
                  {item.label}
                </option>
              ))}
            </select>
          </div>
          </BusinessListToolbar>

          {!showTrialData && hiddenTrialProjectCount > 0 ? (
            <WorkspaceNotice title={`已隐藏 ${hiddenTrialProjectCount} 条 TEST/SMOKE 项目`} tone="neutral">
              试运行默认只展示正式项目；需要排障时可临时显示测试数据。
            </WorkspaceNotice>
          ) : null}

              {listQuery.isLoading ? <div className="text-sm text-zinc-500">项目加载中...</div> : null}
              {listQuery.isError ? <div className="text-sm text-red-600">{resolveError(listQuery.error, "加载项目失败")}</div> : null}

              <BusinessMobileList>
                {visibleProjectItems.map((item) => (
                  <Link key={item.id} to={`/projects/${item.id}`} className="block rounded-lg border border-zinc-200 bg-white p-3 text-sm">
                    <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                      <div>
                        <div className="flex items-center gap-3">
                          <div className="font-semibold text-zinc-900">{item.projectNo}</div>
                          <StatusBadge status={item.status} />
                          {item.isConfidential ? <span className="rounded-full bg-amber-100 px-2 py-1 text-xs text-amber-700">涉密</span> : null}
                        </div>
                        <div className="mt-1 text-base text-zinc-900">{item.name}</div>
                        <div className="mt-1 text-sm text-zinc-500">客户：{item.clientAlias || item.clientName}</div>
                      </div>
                      <div className="text-sm text-zinc-500">
                        <div>负责人：{item.owner?.name ?? "-"}</div>
                        <div>项目经理：{item.manager?.name ?? "-"}</div>
                        <div>目标完成：{formatDisplayDate(item.targetEndAt)}</div>
                      </div>
                    </div>
                    <div className="text-sm text-zinc-600">{item.summary || "暂无项目摘要"}</div>
                    <div className="text-sm text-zinc-500">{summaryLine(item)}</div>
                  </Link>
                ))}
                {!listQuery.isLoading && !visibleProjectItems.length ? (
                  <div className="rounded-lg border border-zinc-200 bg-white p-4 text-sm text-zinc-500">暂无项目</div>
                ) : null}
              </BusinessMobileList>

              <BusinessTable testId="projects-table">
                <thead className="table-header">
                  <tr>
                    <th className="table-th">项目</th>
                    <th className="table-th">客户</th>
                    <th className="table-th">负责人</th>
                    <th className="table-th">进度</th>
                    <th className="table-th">状态</th>
                    <th className="table-th w-28">操作</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-50">
                  {visibleProjectItems.length ? (
                    visibleProjectItems.map((item) => (
                      <tr key={item.id} className="table-row">
                        <td className="table-td">
                          <div className="font-semibold text-zinc-900">{item.projectNo}</div>
                          <div className="text-xs text-zinc-500">{item.name}</div>
                          {item.isConfidential ? <div className="text-xs text-amber-700">涉密</div> : null}
                        </td>
                        <td className="table-td">
                          <div className="font-medium text-zinc-900">{item.clientAlias || item.clientName}</div>
                          <div className="line-clamp-2 text-xs text-zinc-500">{item.summary || "-"}</div>
                        </td>
                        <td className="table-td">
                          <div className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</div>
                          <div className="text-xs text-zinc-500">项目经理 {item.manager?.name ?? "-"}</div>
                        </td>
                        <td className="table-td">
                          <div className="text-xs text-zinc-500">{summaryLine(item)}</div>
                          <div className="mt-1 text-xs text-zinc-500">目标 {formatDisplayDate(item.targetEndAt)}</div>
                        </td>
                        <td className="table-td">
                          <StatusBadge status={item.status} />
                        </td>
                        <td className="table-td">
                          <Button asChild type="button" size="sm" variant="secondary">
                            <Link to={`/projects/${item.id}`}>查看详情</Link>
                          </Button>
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
                        暂无项目
                      </td>
                    </tr>
                  )}
                </tbody>
              </BusinessTable>
      </div>
    </ListWorkspace>
  );
}

export default ProjectsPage;