import { useEffect, useState } from "react";
import type { CSSProperties, FormEvent } from "react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import type { Product, Project } from "../types";
import type { Page } from "./route-config";
import { ConfirmModal, EmptyPanel } from "../components/overlays";

export function ProjectWizardPage({ products, onBack, onCreate }: {
  products: Product[];
  onBack: () => void;
  onCreate: (payload: { name: string; product: string }) => Promise<unknown> | void;
}) {
  const [productId, setProductId] = useState(products[0]?.id || "");
  const product = products.find((item) => item.id === productId) || products[0];
  const [name, setName] = useState(() => `${products[0]?.title || "商品"} · 短视频 · ${new Date().toLocaleDateString("zh-CN")}`);

  useEffect(() => {
    if (!productId && products[0]) setProductId(products[0].id);
  }, [productId, products]);

  function submit(event: FormEvent) {
    event.preventDefault();
    if (product) void onCreate({ name: name || `${product.title} · 短视频`, product: product.id });
  }

  return (
    <>
      <div className="page-head"><div><h1>新建视频项目</h1><div className="sub"><span className="mono">// 选择商品 → 创建项目 → 进入 Stage 1 脚本</span></div></div><div className="actions"><button className="btn btn-ghost" type="button" onClick={onBack}>退出</button></div></div>
      <form className="wizard" onSubmit={submit}>
        <nav className="steps" aria-label="新建项目步骤"><div className="step active"><div className="num">1</div><div><div className="label">选择商品</div><div className="desc">{product?.title || "未选择"}</div></div></div><div className="step"><div className="num">2</div><div><div className="label">项目名称</div><div className="desc">自动生成可修改</div></div></div><div className="step"><div className="num">3</div><div><div className="label">进入脚本</div><div className="desc">Stage 1 配置脚本</div></div></div></nav>
        <div><section className="wiz-pane active"><div className="wiz-step-h"><h2>为哪个商品创建视频?</h2><p>按定稿，创建页只绑定商品和项目名称，脚本风格、卖点重点放到 Stage 1。</p></div><div className="product-select-grid">{products.map((item) => <button className={`product-pick ${productId === item.id ? "selected" : ""}`} type="button" key={item.id} onClick={() => setProductId(item.id)}><div className="placeholder"><span className="ph-frame">{item.title}</span></div><strong>{item.title}</strong><span>{item.category || "未分类"} · {item.selling_points.length} 个卖点</span></button>)}</div>{products.length === 0 && <EmptyPanel title="还没有商品" action="去创建商品" onAction={onBack} />}<div className="field" style={{ marginTop: 18 }}><label className="field-label">项目名称</label><input className="input" value={name} onChange={(event) => setName(event.target.value)} /></div><div className="wiz-foot"><button className="btn" type="button" onClick={onBack}><ArrowLeft size={13} />返回</button><div className="hstack"><span className="muted-2 mono">// 下一步:流水线 Stage 1</span><button className="btn btn-primary btn-lg" type="submit" disabled={!product}><ArrowRight size={13} />创建并进入脚本</button></div></div></section></div>
        <aside className="wiz-preview"><div className="pv-h"><span>实时预估</span><span className="live">LIVE</span></div><div className="pv-title">{name || product?.title || "未命名项目"}</div><div className="pv-metrics"><div className="pv-metric"><div className="l">片段</div><div className="v">4<small>段</small></div></div><div className="pv-metric accent"><div className="l">总时长</div><div className="v">60<small>s</small></div></div><div className="pv-metric"><div className="l">阶段</div><div className="v">5</div></div></div></aside>
      </form>
    </>
  );
}

// 对齐 api-bridge:阶段编号 / 状态分桶 / 友好标签 / pill 类
const PROJ_STAGE_NO: Record<string, number> = { script: 1, base_assets: 2, storyboard: 3, video: 4, export: 5 };
function projStageNo(project: Project) { return project.status === "completed" ? 5 : (PROJ_STAGE_NO[project.current_stage] || 1); }
function projBucket(project: Project) { return project.status === "completed" ? "done" : project.status === "failed" ? "fail" : "wip"; }
function projStatusLabel(project: Project) {
  return ({ draft: "脚本待生成", scripting: "脚本生成中", asseting: "基础资产生成中", storyboarding: "故事板生成中", videoing: "视频片段生成中", exporting: "导出中", completed: "已完成", failed: "失败" } as Record<string, string>)[project.status] || "进行中";
}
function projPillClass(project: Project) { return project.status === "completed" ? "ok" : project.status === "failed" ? "fail" : "info"; }
function projDate(project: Project) { return (project.updated_at || "").slice(0, 10); }
// 复刻 mock-media coverFor:按项目名关键词映射封面图(无匹配 → 占位)
function projCover(name: string): string {
  const t = name.replace(/\s+/g, "");
  if (/蓝牙|耳机|南卡/.test(t)) return "cover-earbuds.png";
  if (/速食|牛肉面|泡面|面条/.test(t)) return "cover-noodle.png";
  if (/防晒/.test(t)) return "cover-sunscreen.png";
  if (/咖啡|冻干/.test(t)) return "cover-coffee.png";
  if (/空气炸锅|小熊/.test(t)) return "cover-air-fryer.png";
  if (/瑜伽裤|露露/.test(t)) return "cover-yoga.png";
  if (/v1|final|已完成|成片|敷面膜|化妆台/.test(t)) return "cover-mask-final.png";
  if (/面膜|补水|玻尿酸|透真/.test(t)) return "cover-mask-v3.png";
  return "";
}
const projMock = (file: string): CSSProperties => ({ ["--mock-media-url"]: `url(/exact/assets/mock/${file})` } as CSSProperties);

const PROJ_TABS: Array<{ filter: "all" | "wip" | "done" | "fail"; label: string }> = [
  { filter: "all", label: "全部" }, { filter: "wip", label: "进行中" }, { filter: "done", label: "已完成" }, { filter: "fail", label: "失败" }
];

export function ProjectsPage({ products, projects, navigate, openPipeline, onDelete }: {
  products: Product[];
  projects: Project[];
  navigate: (page: Page) => void;
  onCreate: (payload: { name: string; product: string }) => Promise<unknown> | void;
  openPipeline: (projectId: string) => void;
  onDelete: (projectId: string) => Promise<unknown> | void;
}) {
  const [view, setView] = useState<"list" | "grid">("list");
  const [tab, setTab] = useState<"all" | "wip" | "done" | "fail">("all");
  const [query, setQuery] = useState("");
  const [deleteTarget, setDeleteTarget] = useState<Project | null>(null);
  const productTitle = (id: string) => products.find((product) => product.id === id)?.title || "商品";

  const counts = {
    all: projects.length,
    wip: projects.filter((p) => projBucket(p) === "wip").length,
    done: projects.filter((p) => projBucket(p) === "done").length,
    fail: projects.filter((p) => projBucket(p) === "fail").length
  };
  const filtered = projects.filter((project) => {
    if (tab !== "all" && projBucket(project) !== tab) return false;
    return `${project.name} ${productTitle(project.product)}`.toLowerCase().includes(query.toLowerCase());
  });

  async function confirmDelete() {
    if (!deleteTarget) return;
    await onDelete(deleteTarget.id);
    setDeleteTarget(null);
  }

  return (
    <section className="projects-page">
      <div className="page-head">
        <div>
          <h1>视频项目</h1>
          <div className="sub"><span className="mono">// {counts.all} 个 · {counts.wip} 进行中 · {counts.done} 完成 · {counts.fail} 失败</span></div>
        </div>
        <div className="actions">
          <button className="btn" type="button" id="proj-manage-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m3 7 2 2 4-4" /><path d="m3 17 2 2 4-4" /><path d="M13 6h8" /><path d="M13 12h8" /><path d="M13 18h8" /></svg>
            <span className="proj-manage-label">管理项目</span>
          </button>
          <button className="btn btn-primary btn-lg btn-create" type="button" onClick={() => navigate("projectWizard")}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m12.3 3.5 3 4" /><path d="M20.2 6 3 11l-.9-2.4a2 2 0 0 1 1.3-2.5l13.5-4a2 2 0 0 1 2.5 1.3Z" /><path d="m6.2 5.3 3.1 3.9" /><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" /></svg>
            新建项目
          </button>
        </div>
      </div>

      <div className="tabs" id="status-tabs">
        {PROJ_TABS.map((t) => (
          <div className={`tab${tab === t.filter ? " active" : ""}`} key={t.filter} data-filter={t.filter} onClick={() => setTab(t.filter)}>{t.label} <span className="count">{counts[t.filter]}</span></div>
        ))}
      </div>

      <div className="toolbar">
        <div className="search-inline">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
          <input className="input" id="search-input" placeholder="搜索项目名称、商品" value={query} onChange={(event) => setQuery(event.target.value)} />
        </div>
        <div className="chip-wrap" data-key="product"><button className="chip" type="button"><span className="chip-label">商品品类</span> <svg className="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg></button></div>
        <div className="chip-wrap" data-key="source"><button className="chip" type="button"><span className="chip-label">脚本来源</span> <svg className="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg></button></div>
        <div className="chip-wrap" data-key="time"><button className="chip" type="button"><span className="chip-label">创建时间</span> <svg className="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg></button></div>
        <span className="spacer"></span>
        <div className="view-toggle">
          <button className={view === "grid" ? "active" : ""} type="button" data-view="grid" onClick={() => setView("grid")}>
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="5" height="5" /><rect x="9" y="2" width="5" height="5" /><rect x="2" y="9" width="5" height="5" /><rect x="9" y="9" width="5" height="5" /></svg>
            网格
          </button>
          <button className={view === "list" ? "active" : ""} type="button" data-view="list" onClick={() => setView("list")}>
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 4h12M2 8h12M2 12h12" /></svg>
            列表
          </button>
        </div>
      </div>

      <div className="result-meta" id="result-meta">// 显示 <span className="count">{filtered.length}</span> / {projects.length} 个项目</div>

      {view === "list" ? (
        <div id="list-view">
          <table className="t">
            <thead>
              <tr>
                <th style={{ width: "32%" }}>项目</th>
                <th>商品</th>
                <th>脚本来源</th>
                <th style={{ width: "200px" }}>进度</th>
                <th>状态</th>
                <th style={{ width: "120px" }}>更新于</th>
                <th style={{ width: "60px" }}></th>
              </tr>
            </thead>
            <tbody id="list-tbody">
              {filtered.map((project) => {
                const no = projStageNo(project);
                const shots = project.video_segments.length || 4;
                const cover = projCover(project.name);
                return (
                  <tr key={project.id} data-status={projBucket(project)} data-name={project.name} onClick={() => openPipeline(project.id)}>
                    <td>
                      <div className="proj-name-cell">
                        <div className={`placeholder proj-thumb${cover ? " has-mock-media" : ""}`} style={cover ? projMock(cover) : undefined}><span className="ph-frame">9:16</span></div>
                        <div><div className="proj-name">{project.name}</div><div className="proj-sub">{shots} 镜 · 0-60s</div></div>
                      </div>
                    </td>
                    <td>{productTitle(project.product)}</td>
                    <td><span className="muted">AI 全生</span></td>
                    <td>
                      <div className="hstack">
                        <div className="prog">{[1, 2, 3, 4, 5].map((i) => <span key={i} className={i < no ? "done" : i === no ? "cur" : ""} />)}</div>
                        <span className="muted-2 mono" style={{ fontSize: "11px" }}>{no}/5</span>
                      </div>
                    </td>
                    <td><span className={`pill ${projPillClass(project)}`}><span className="dot" />{projStatusLabel(project)}</span></td>
                    <td className="muted-2">{projDate(project)}</td>
                    <td>
                      <div className="row-action">
                        <a href="#" onClick={(event) => { event.preventDefault(); event.stopPropagation(); openPipeline(project.id); }} title="继续"><svg width="14" height="14" viewBox="0 0 16 16"><path d="M5 4l6 4-6 4z" fill="currentColor" /></svg></a>
                        <span className="row-more" onClick={(event) => event.stopPropagation()}>
                          <svg width="14" height="14" viewBox="0 0 16 16"><circle cx="3" cy="8" r="1.2" fill="currentColor" /><circle cx="8" cy="8" r="1.2" fill="currentColor" /><circle cx="13" cy="8" r="1.2" fill="currentColor" /></svg>
                          <div className="row-more-tip"><button className="mi" type="button" onClick={(event) => { event.stopPropagation(); setDeleteTarget(project); }}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg>删除项目</button></div>
                        </span>
                      </div>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      ) : (
        <div className="proj-grid">{filtered.map((project) => {
          const cover = projCover(project.name);
          return (
            <article className="proj-card" key={project.id} onClick={() => openPipeline(project.id)}>
              <div className={`placeholder card-thumb${cover ? " has-mock-media" : ""}`} style={cover ? projMock(cover) : undefined}><span className="ph-frame">9:16</span></div>
              <div className="card-body">
                <div className="card-name">{project.name}</div>
                <div className="card-sub">{productTitle(project.product)}</div>
                <div className="card-foot"><span className={`pill ${projPillClass(project)}`}><span className="dot" />{projStatusLabel(project)}</span><span className="card-time">{projDate(project)}</span></div>
              </div>
            </article>
          );
        })}</div>
      )}
      {filtered.length === 0 && <EmptyPanel title="当前筛选下没有项目" action="新建视频项目" onAction={() => navigate("projectWizard")} />}
      <ConfirmModal open={Boolean(deleteTarget)} title="确认删除项目" detail={`即将删除 ${deleteTarget?.name || ""}。`} confirmText="删除" onCancel={() => setDeleteTarget(null)} onConfirm={confirmDelete} />
    </section>
  );
}
