import { useMemo, useState } from "react";
import {
  ArrowRight,
  ChevronRight,
  FolderKanban,
  Replace,
  ScanSearch,
  Trash2,
  WandSparkles,
} from "lucide-react";
import type { BillingSummary, Product, Project } from "../types";
import type { NavigateFn, Page } from "./route-config";
import { ConfirmModal } from "../components/overlays";
import { hasQuickCreateSuffix, isQuickCreateBusy } from "../quick-create-lock";

type DashTab = "all" | "wip" | "done";
type EntryTone = "primary" | "subtle";

const CREATE_GROUPS: Array<{
  label: string;
  hint: string;
  cards: Array<{
    title: string;
    desc: string;
    tone: EntryTone;
    page: Page;
    icon: "wand" | "folder" | "scan" | "replace";
  }>;
}> = [
  {
    label: "从商品开始",
    hint: "围绕商品卖点生成完整带货内容",
    cards: [
      { title: "一键成片", desc: "上传商品图片，自动完成整条视频", tone: "primary", page: "quickCreate", icon: "wand" },
      { title: "专业创作", desc: "控制脚本、资产与视频生成", tone: "primary", page: "projectWizard", icon: "folder" },
    ],
  },
  {
    label: "从参考视频开始",
    hint: "复用成熟视频的镜头表达与节奏",
    cards: [
      { title: "提炼提示词", desc: "上传参考视频，提炼可编辑提示词", tone: "subtle", page: "videoRemix", icon: "scan" },
      { title: "视频复刻", desc: "保留参考视频的人物、场景与节奏，复刻出自己的带货内容", tone: "subtle", page: "videoReplace", icon: "replace" },
    ],
  },
];

const DASH_STAGE_TOTAL = 5;
// 故事板已下线;storyboard 保留映射只为老项目的历史 current_stage 兜底
const DASH_STAGE_NO: Record<string, number> = { script: 1, base_assets: 2, storyboard: 2, video: 3, export: 4 };
const DASH_TABS: Array<{ filter: DashTab; label: string }> = [
  { filter: "all", label: "全部" },
  { filter: "wip", label: "进行中" },
  { filter: "done", label: "已成片" },
];

function dashBucket(project: Project): DashTab {
  return project.status === "completed" ? "done" : "wip";
}
function dashStageNo(project: Project) {
  return project.status === "completed" ? DASH_STAGE_TOTAL : (DASH_STAGE_NO[project.current_stage] || 1);
}
function dashProgClass(project: Project, i: number, no: number): string {
  if (project.status === "completed") return i <= no ? "done" : "";
  if (project.status === "failed") return i === no ? "fail" : i < no ? "done" : "";
  return i < no ? "done" : i === no ? "warn" : "";
}
function dashStageLabel(project: Project): string {
  if (project.status === "failed") return "失败";
  const map: Record<string, string> = {
    script: "脚本",
    base_assets: "资产创建",
    storyboard: "资产创建",
    video: "视频生成",
    export: "视频生成",
  };
  return map[project.current_stage] || "视频生成";
}
function isQuickCreateProject(project: Project) {
  if (project.quick_create) return true;
  if (project.metadata?.quick_create) return true;
  return hasQuickCreateSuffix(project.name);
}

function dashCardMeta(project: Project, productTitle: string): string {
  const shots = project.video_segment_count ?? project.video_segments?.length ?? 0;
  const mode = isQuickCreateBusy(project) ? "一键成片生成中" : isQuickCreateProject(project) ? "一键成片" : "专业创作";
  return [mode, productTitle, shots ? `${shots} 镜` : null].filter(Boolean).join(" / ");
}

function EntryIcon({ name }: { name: "wand" | "folder" | "scan" | "replace" }) {
  if (name === "folder") return <FolderKanban />;
  if (name === "scan") return <ScanSearch />;
  if (name === "replace") return <Replace />;
  return <WandSparkles />;
}

export function Dashboard({
  products,
  projects,
  productTotal: _productTotal,
  projectTotal,
  billing: _billing,
  userName,
  loading: _loading = false,
  navigate,
  onDelete,
}: {
  products: Product[];
  projects: Project[];
  productTotal?: number;
  projectTotal?: number;
  billing: BillingSummary | null;
  userName?: string;
  loading?: boolean;
  navigate: NavigateFn;
  onDelete: (projectId: string) => Promise<unknown> | void;
}) {
  const [tab, setTab] = useState<DashTab>("all");
  const [deleteTarget, setDeleteTarget] = useState<Project | null>(null);
  const projCount = projectTotal ?? projects.length;
  const completed = projects.filter((project) => project.status === "completed").length;
  const running = projects.filter((project) => !["completed", "failed"].includes(project.status)).length;
  const counts = {
    all: projCount,
    wip: running,
    done: completed,
  };

  const now = new Date();
  const pad2 = (n: number) => String(n).padStart(2, "0");
  const dateLabel = `${pad2(now.getMonth() + 1)}.${pad2(now.getDate())}`;
  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1).getTime();
  const newThisMonth = projects.filter((p) => p.created_at && new Date(p.created_at).getTime() >= monthStart).length;
  const greetName = userName ? userName.split("@")[0] : "";
  const productTitle = (id: string) => products.find((product) => product.id === id)?.title || "商品";

  const listed = useMemo(() => {
    const rows = tab === "all" ? projects : projects.filter((project) => dashBucket(project) === tab);
    return rows.slice(0, 7);
  }, [projects, tab]);

  return (
    <section className="dashboard-page">
      <div className="dashboard-inner">
      <section className="welcome">
        <h1>欢迎回来{greetName ? `，${greetName}` : ""}</h1>
        <p>{dateLabel} · 你有{running}个项目正在进行中</p>
      </section>

      <section className="creation" aria-labelledby="creationTitle">
        <div className="creation-head">
          <span className="section-label" id="creationTitle">开始创作</span>
        </div>
        <div className="creation-groups">
          {CREATE_GROUPS.map((group) => (
            <div className="creation-group-block" key={group.label}>
              <div className="creation-group-label">
                <strong>{group.label}</strong>
                <span>{group.hint}</span>
              </div>
              <div className="creation-entry-pair">
                {group.cards.map((card) => (
                  <button
                    key={card.title}
                    className={`entry entry-${card.tone}`}
                    type="button"
                    onClick={() => navigate(card.page)}
                  >
                    <EntryIcon name={card.icon} />
                    <span className="entry-copy">
                      <strong>{card.title}</strong>
                      <small>{card.desc}</small>
                    </span>
                    <ArrowRight />
                  </button>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <div className="workbench-section-divider"><span>项目概览</span></div>

      <section className="status-summary" aria-label="项目概览">
        <button className="summary-item" type="button" onClick={() => navigate("projects", { tab: "all" })}>
          <span>总项目</span>
          <strong>{projCount}</strong>
        </button>
        <button className="summary-item" type="button" onClick={() => navigate("projects", { tab: "wip" })}>
          <span>进行中</span>
          <strong>{running}</strong>
        </button>
        <button className="summary-item" type="button" onClick={() => navigate("projects", { tab: "done" })}>
          <span>成片</span>
          <strong>{completed}</strong>
        </button>
        <button className="summary-item" type="button" onClick={() => navigate("projects")}>
          <span>本月</span>
          <strong className="positive">+{newThisMonth}</strong>
        </button>
      </section>

      <section className="projects">
        <div className="projects-head">
          <h2>我的项目</h2>
          <button className="text-action" type="button" onClick={() => navigate("projects")}>
            <span>查看全部项目</span>
            <ChevronRight />
          </button>
        </div>

        <div className="filters" role="tablist" aria-label="项目筛选">
          {DASH_TABS.map((item) => (
            <button
              key={item.filter}
              className={`filter${tab === item.filter ? " active" : ""}`}
              type="button"
              role="tab"
              aria-selected={tab === item.filter}
              onClick={() => setTab(item.filter)}
            >
              {item.label} {counts[item.filter]}
            </button>
          ))}
        </div>

        {listed.length === 0 ? (
          <div className="empty-state">当前筛选下暂无展示项目</div>
        ) : (
          <div className="project-list">
            {listed.map((project) => {
              const no = dashStageNo(project);
              const cover = project.cover_preview_url || "";
              const openProject = () => navigate("pipeline", { projectId: project.id });
              return (
                <article
                  key={project.id}
                  className="project-card"
                  data-status={dashBucket(project)}
                  onClick={openProject}
                  onKeyDown={(event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); openProject(); } }}
                  role="button"
                  tabIndex={0}
                >
                  <div className="product-thumb">
                    {cover ? <img src={cover} alt="" /> : <span className="ph-frame">9:16</span>}
                  </div>
                  <div className="project-info">
                    <h3>{project.name}</h3>
                    <p>{dashCardMeta(project, productTitle(project.product))}</p>
                  </div>
                  <div className="stage">
                    <span className="stage-label">当前阶段</span>
                    <strong>{dashStageLabel(project)}</strong>
                    <div className="progress" aria-label="项目进度">
                      {Array.from({ length: DASH_STAGE_TOTAL }, (_, k) => k + 1).map((i) => (
                        <span key={i} className={`segment ${dashProgClass(project, i, no)}`} />
                      ))}
                    </div>
                  </div>
                  <div className="project-actions">
                    <button
                      className="project-del"
                      type="button"
                      title="删除项目"
                      aria-label={`删除「${project.name}」`}
                      onClick={(event) => { event.stopPropagation(); setDeleteTarget(project); }}
                    >
                      <Trash2 />
                    </button>
                    <button
                      className="continue-button"
                      type="button"
                      onClick={(event) => { event.stopPropagation(); openProject(); }}
                    >
                      {isQuickCreateBusy(project) ? "查看进度" : project.status === "completed" ? "查看" : "继续"}
                    </button>
                  </div>
                </article>
              );
            })}
          </div>
        )}
      </section>
      </div>

      <ConfirmModal
        open={Boolean(deleteTarget)}
        title="删除项目"
        icon={<Trash2 size={16} />}
        detail={`确定删除「${deleteTarget?.name || ""}」?将移至「垃圾桶」,可在垃圾桶里恢复或彻底删除。`}
        confirmText="删除"
        onCancel={() => setDeleteTarget(null)}
        onConfirm={async () => {
          if (!deleteTarget) return;
          await onDelete(deleteTarget.id);
          setDeleteTarget(null);
        }}
      />
    </section>
  );
}