import { useEffect, useMemo, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { createTodo } from "../api/todos";
import { fetchProjects } from "../api/projects";
import { fetchTeamWeeklyReports, fetchMyWeeklyReport, submitMyWeeklyReport, updateMyWeeklyReport, type WeeklyReportProjectLink } from "../api/weeklyReports";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { FilterBar, ListWorkspace, PrimaryTable } from "../components/patterns/ListWorkspace";
import { MetricCard } from "../components/patterns/MetricCard";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";
import { Textarea } from "../components/ui/textarea";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { toast } from "sonner";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { TEST_IDS } from "../lib/testIds";

function errorMessage(error: unknown, fallback: string) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  return error instanceof Error ? error.message : fallback;
}

type DraftProjectLink = {
  projectId: string;
  progressText: string;
  riskText: string;
  nextStepText: string;
};

function emptyProjectLink(): DraftProjectLink {
  return { projectId: "", progressText: "", riskText: "", nextStepText: "" };
}

function mapProjectLink(item: WeeklyReportProjectLink): DraftProjectLink {
  return {
    projectId: item.projectId,
    progressText: item.progressText ?? "",
    riskText: item.riskText ?? "",
    nextStepText: item.nextStepText ?? "",
  };
}

export function WeeklyReportsPage() {
  const queryClient = useQueryClient();
  const { permissions } = useAuth();
  const canViewTeam = hasAnyPermission(permissions, ["report.dashboard.view", "system.users"]);
  const [weekStart, setWeekStart] = useState("");
  const reportQuery = useQuery({ queryKey: ["weekly-report", "me", weekStart], queryFn: () => fetchMyWeeklyReport(weekStart || undefined) });
  const teamQuery = useQuery({ enabled: canViewTeam, queryKey: ["weekly-report", "team", weekStart], queryFn: () => fetchTeamWeeklyReports(weekStart || undefined) });
  const projectsQuery = useQuery({ queryKey: ["projects", "weekly-links"], queryFn: () => fetchProjects({ mine: true }) });

  const report = reportQuery.data?.item;
  const [draft, setDraft] = useState({ highlightsText: "", blockersText: "", nextWeekText: "", needsHelp: false });
  const [projectLinks, setProjectLinks] = useState<DraftProjectLink[]>([emptyProjectLink()]);

  useEffect(() => {
    if (!report) return;
    setDraft({
      highlightsText: report.highlightsText,
      blockersText: report.blockersText,
      nextWeekText: report.nextWeekText,
      needsHelp: report.needsHelp,
    });
    setProjectLinks(report.projectLinks.length ? report.projectLinks.map(mapProjectLink) : [emptyProjectLink()]);
  }, [report]);

  const normalizedProjectLinks = projectLinks
    .filter((item) => item.projectId)
    .map((item) => ({
      projectId: item.projectId,
      progressText: item.progressText.trim() || undefined,
      riskText: item.riskText.trim() || undefined,
      nextStepText: item.nextStepText.trim() || undefined,
    }));

  const linkedProjectCount = useMemo(
    () => projectLinks.filter((item) => item.projectId).length,
    [projectLinks],
  );

  const saveMutation = useMutation({
    mutationFn: () => updateMyWeeklyReport({ weekStart: weekStart || undefined, ...draft, projectLinks: normalizedProjectLinks }),
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["weekly-report", "me"] }),
        queryClient.invalidateQueries({ queryKey: ["weekly-report", "team"] }),
        queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
        queryClient.invalidateQueries({ queryKey: ["projects"] }),
      ]);
      toast.success("周报已保存");
    },
    onError: (error) => toast.error(errorMessage(error, "保存失败")),
  });

  const submitMutation = useMutation({
    mutationFn: () => submitMyWeeklyReport({ weekStart: weekStart || undefined }),
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["weekly-report", "me"] }),
        queryClient.invalidateQueries({ queryKey: ["weekly-report", "team"] }),
        queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
      ]);
      toast.success("周报已提交");
    },
    onError: (error) => toast.error(errorMessage(error, "提交失败")),
  });

  const createTodoMutation = useMutation({
    mutationFn: () => createTodo({
      title: `${report?.weekStart ?? "本周"} 周计划`,
      description: draft.nextWeekText || "来自周报的下周计划",
      source: "weekly_report",
      priority: draft.needsHelp ? "high" : "normal",
      projectId: normalizedProjectLinks[0]?.projectId ?? null,
    }),
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["todos"] }),
        queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
      ]);
      toast.success("已从周报生成待办");
    },
    onError: (error) => toast.error(errorMessage(error, "生成待办失败")),
  });

  return (
    <ListWorkspace>
      <PageHeader title="周报" subtitle="固定三段结构：本周完成、当前阻塞、下周计划，可按项目拆分进展。" />

      <FilterBar className="flex flex-wrap items-center justify-between gap-3">
        <div className="space-y-1">
          <div className="text-sm font-medium text-zinc-900">按周归档</div>
          <div className="text-sm text-zinc-500">默认按周一归档；提交后会同步更新 Portal 与项目摘要。</div>
        </div>
        <input
          aria-label="周报归档周"
          className="input-std w-[220px]"
          type="date"
          value={weekStart}
          onChange={(event) => setWeekStart(event.target.value)}
        />
      </FilterBar>

      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <MetricCard title="当前状态" value={report?.status === "submitted" ? "已提交" : "待完善"} note={report?.submittedAt ? `提交于 ${new Date(report.submittedAt).toLocaleString()}` : "保存后可继续补充"} tone={report?.status === "submitted" ? "neutral" : "warning"} />
        <MetricCard title="关联项目" value={linkedProjectCount} note={`共 ${projectsQuery.data?.items.length ?? 0} 个我的项目可选`} />
        <MetricCard title="需协助" value={draft.needsHelp ? "是" : "否"} note="勾选后会在管理首页高亮" tone={draft.needsHelp ? "warning" : "neutral"} />
        <MetricCard title="团队缺口" value={canViewTeam ? (teamQuery.data?.summary.missingCount ?? 0) : "-"} note={canViewTeam ? `待协助 ${teamQuery.data?.summary.needsHelpCount ?? 0}` : "仅管理员可见"} tone={canViewTeam && (teamQuery.data?.summary.missingCount ?? 0) > 0 ? "warning" : "neutral"} />
      </section>

      <SectionPanel title="本周周报" description="先写本周完成，再补当前阻塞和下周计划。">
        <div className="space-y-4">
          {reportQuery.isLoading ? <div className="text-sm text-zinc-500">周报加载中...</div> : null}
          {reportQuery.isError ? <div className="text-sm text-red-600">{errorMessage(reportQuery.error, "加载周报失败")}</div> : null}
          <div className="grid gap-4">
            <div className="grid gap-2">
              <label className="text-sm text-zinc-500" htmlFor="weekly-report-highlights">本周完成</label>
              <Textarea id="weekly-report-highlights" value={draft.highlightsText} onChange={(event) => setDraft((prev) => ({ ...prev, highlightsText: event.target.value }))} />
            </div>
            <div className="grid gap-2">
              <label className="text-sm text-zinc-500" htmlFor="weekly-report-blockers">当前阻塞</label>
              <Textarea id="weekly-report-blockers" value={draft.blockersText} onChange={(event) => setDraft((prev) => ({ ...prev, blockersText: event.target.value }))} />
            </div>
            <div className="grid gap-2">
              <label className="text-sm text-zinc-500" htmlFor="weekly-report-next-week">下周计划</label>
              <Textarea id="weekly-report-next-week" value={draft.nextWeekText} onChange={(event) => setDraft((prev) => ({ ...prev, nextWeekText: event.target.value }))} />
            </div>
            <label className="flex items-center gap-2 text-sm text-zinc-700">
              <input type="checkbox" checked={draft.needsHelp} onChange={(event) => setDraft((prev) => ({ ...prev, needsHelp: event.target.checked }))} />
              需要老板/管理员协助
            </label>
          </div>
        </div>
      </SectionPanel>

      <SectionPanel
        title="项目关联"
        description="项目进展、风险与下一步动作建议按项目拆开写。"
        actions={<Button type="button" variant="secondary" onClick={() => setProjectLinks((prev) => [...prev, emptyProjectLink()])}>新增项目进展</Button>}
      >
        <div className="space-y-4">
          {projectLinks.map((item, index) => (
            <div key={`${item.projectId}-${index}`} className="rounded-lg border border-zinc-200 p-4 space-y-3">
              <div className="flex items-center justify-between gap-3">
                <select className="select-std" value={item.projectId} onChange={(event) => setProjectLinks((prev) => prev.map((entry, entryIndex) => entryIndex === index ? { ...entry, projectId: event.target.value } : entry))}>
                  <option value="">选择项目</option>
                  {(projectsQuery.data?.items ?? []).map((project) => (
                    <option key={project.id} value={project.id}>{project.projectNo} · {project.name}</option>
                  ))}
                </select>
                <Button type="button" variant="secondary" onClick={() => setProjectLinks((prev) => prev.length === 1 ? [emptyProjectLink()] : prev.filter((_, entryIndex) => entryIndex !== index))}>移除</Button>
              </div>
              <Textarea placeholder="本周项目进展" value={item.progressText} onChange={(event) => setProjectLinks((prev) => prev.map((entry, entryIndex) => entryIndex === index ? { ...entry, progressText: event.target.value } : entry))} />
              <Textarea placeholder="项目风险 / 问题" value={item.riskText} onChange={(event) => setProjectLinks((prev) => prev.map((entry, entryIndex) => entryIndex === index ? { ...entry, riskText: event.target.value } : entry))} />
              <Textarea placeholder="下一步动作" value={item.nextStepText} onChange={(event) => setProjectLinks((prev) => prev.map((entry, entryIndex) => entryIndex === index ? { ...entry, nextStepText: event.target.value } : entry))} />
            </div>
          ))}
          <div className="flex flex-wrap justify-end gap-2">
            <Button data-testid={TEST_IDS.weeklyReport.createTodo} type="button" variant="secondary" onClick={() => createTodoMutation.mutate()} disabled={createTodoMutation.isPending}>转成待办</Button>
            <Button data-testid={TEST_IDS.weeklyReport.save} type="button" variant="secondary" onClick={() => saveMutation.mutate()} disabled={saveMutation.isPending}>保存草稿</Button>
            <Button data-testid={TEST_IDS.weeklyReport.submit} type="button" onClick={() => submitMutation.mutate()} disabled={submitMutation.isPending}>提交周报</Button>
          </div>
        </div>
      </SectionPanel>

      {canViewTeam ? (
        <SectionPanel title="团队汇总" description="帮助老板和管理员先看到未提交与需协助人员。">
          <div className="mb-4 grid gap-3 md:grid-cols-4">
            <MetricCard title="团队人数" value={teamQuery.data?.summary.totalEmployees ?? 0} />
            <MetricCard title="已提交" value={teamQuery.data?.summary.submittedCount ?? 0} />
            <MetricCard title="未提交" value={teamQuery.data?.summary.missingCount ?? 0} tone={(teamQuery.data?.summary.missingCount ?? 0) > 0 ? "warning" : "neutral"} />
            <MetricCard title="需协助" value={teamQuery.data?.summary.needsHelpCount ?? 0} tone={(teamQuery.data?.summary.needsHelpCount ?? 0) > 0 ? "warning" : "neutral"} />
          </div>
          {teamQuery.isError ? <div className="mb-4 text-sm text-red-600">{errorMessage(teamQuery.error, "加载团队周报失败")}</div> : null}
          <PrimaryTable>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>成员</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>需协助</TableHead>
                  <TableHead>关联项目</TableHead>
                  <TableHead>摘要</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {teamQuery.isLoading ? (
                  <TableRow>
                    <TableCell className="py-8 text-center text-sm text-zinc-500" colSpan={5}>
                      团队周报加载中...
                    </TableCell>
                  </TableRow>
                ) : (
                  (teamQuery.data?.items ?? []).map((item) => (
                    <TableRow key={item.employee.id}>
                      <TableCell>{item.employee.name}</TableCell>
                      <TableCell>{item.report?.status ?? "missing"}</TableCell>
                      <TableCell>{item.report?.needsHelp ? "是" : "否"}</TableCell>
                      <TableCell>{item.report?.projectLinks?.map((link) => link.project?.name ?? link.projectId).join(" / ") || "-"}</TableCell>
                      <TableCell>{item.report?.highlightsText || item.report?.nextWeekText || item.report?.blockersText || "-"}</TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </PrimaryTable>
        </SectionPanel>
      ) : null}
    </ListWorkspace>
  );
}

export default WeeklyReportsPage;