import { useEffect, useMemo, useState } from "react";
import type { CSSProperties } from "react";
import { api } from "../api";
import { SystemLoading } from "../components/loading";
import { ConfirmModal } from "../components/overlays";
import type { NavigateFn } from "./route-config";
import type { Asset, FreeVideoTask, ImageConversationTrash, ImageExceptionBatchTrash, ModelEntity, Product, Project } from "../types";
import "../trash-page.css";

type TrashKind = "product" | "asset" | "model" | "image" | "imageExceptionBatch" | "freeVideo" | "project";

type TrashRow = {
  id: string;
  kind: TrashKind;
  title: string;
  subtitle: string;
  cover?: string;
};

type TrashSection = {
  key: TrashKind;
  title: string;
  rows: TrashRow[];
};

type ProductBatchResult = {
  succeededIds: string[];
  failedIds: string[];
};

const mediaStyle = (url: string): CSSProperties => ({ ["--mock-media-url"]: `url(${url})` } as CSSProperties);

const dateOf = (iso?: string | null): string => {
  if (!iso) return "";
  const d = new Date(iso);
  if (Number.isNaN(d.getTime())) return "";
  return `${String(d.getMonth() + 1).padStart(2, "0")}.${String(d.getDate()).padStart(2, "0")}`;
};

const coverOf = (p: Product): string => p.cover_preview_url || p.images?.find((i) => i.preview_url)?.preview_url || "";

const assetCoverOf = (a: Asset): string =>
  a.files?.find((f) => f.is_primary && f.preview_url)?.preview_url || a.files?.find((f) => f.preview_url)?.preview_url || "";

const ASSET_TYPE_LABEL: Record<string, string> = { image: "图片", video: "视频", audio: "音频" };

const rowsFromProducts = (items: Product[]): TrashRow[] =>
  items.map((p) => ({
    id: p.id,
    kind: "product",
    title: p.title,
    subtitle: p.category || "未分类",
    cover: coverOf(p)
  }));

const rowsFromAssets = (items: Asset[]): TrashRow[] =>
  items.map((a) => {
    const deletedAt = dateOf(a.updated_at);
    return {
      id: a.id,
      kind: "asset",
      title: a.name,
      subtitle: `${ASSET_TYPE_LABEL[a.asset_type] || a.asset_type}${deletedAt ? ` · 删除于 ${deletedAt}` : ""}`,
      cover: assetCoverOf(a)
    };
  });

const rowsFromModels = (items: ModelEntity[]): TrashRow[] =>
  items.map((m) => ({
    id: m.id,
    kind: "model",
    title: m.name,
    subtitle: m.source === "upload" ? "上传模特" : "AI 模特",
    cover: m.portrait || m.triview || ""
  }));

const rowsFromConversations = (items: ImageConversationTrash[]): TrashRow[] =>
  items.map((c) => ({
    id: c.id,
    kind: "image",
    title: c.title || "未命名图片创作",
    subtitle: `${c.task_count || 0} 个生成任务${dateOf(c.updated_at) ? ` · 删除于 ${dateOf(c.updated_at)}` : ""}`,
    cover: c.cover_preview_url || ""
  }));

const IMAGE_MODE_LABEL: Record<ImageExceptionBatchTrash["mode"], string> = {
  image: "图片创作",
  model: "模特上身图",
  cover: "平台套图"
};

const rowsFromImageExceptionBatches = (items: ImageExceptionBatchTrash[]): TrashRow[] =>
  items.map((batch) => ({
    id: batch.id,
    kind: "imageExceptionBatch",
    title: batch.prompt || batch.product_title || "未命名图片生成",
    subtitle: `${IMAGE_MODE_LABEL[batch.mode]} · ${batch.count} 张${dateOf(batch.updated_at) ? ` · 删除于 ${dateOf(batch.updated_at)}` : ""}`,
    cover: batch.cover_preview_url || ""
  }));

const rowsFromFreeVideos = (items: FreeVideoTask[]): TrashRow[] =>
  items.map((task) => ({
    id: task.id,
    kind: "freeVideo",
    title: task.prompt || "未命名视频创作",
    subtitle: `${task.status}${task.duration ? ` · ${task.duration}s` : ""}${task.aspect_ratio ? ` · ${task.aspect_ratio}` : ""}`,
    cover: task.thumbnail_url || ""
  }));

const rowsFromProjects = (items: Project[]): TrashRow[] =>
  items.map((p) => ({
    id: p.id,
    kind: "project",
    title: p.name,
    subtitle: p.product_title || p.current_stage || p.status,
    cover: p.cover_preview_url || ""
  }));

export function TrashPage({ onRestore, onPurge, onRestoreProducts, onPurgeProducts, onChanged }: {
  navigate: NavigateFn;
  onRestore: (id: string) => Promise<unknown> | void;
  onPurge: (id: string) => Promise<unknown> | void;
  onRestoreProducts: (ids: string[]) => Promise<ProductBatchResult>;
  onPurgeProducts: (ids: string[]) => Promise<ProductBatchResult>;
  onChanged?: () => void;
}) {
  const [sections, setSections] = useState<TrashSection[]>([]);
  const [loading, setLoading] = useState(true);
  const [confirmId, setConfirmId] = useState<string | null>(null);
  const [busyKey, setBusyKey] = useState<string | null>(null);
  const [errText, setErrText] = useState("");
  const [bulkBusy, setBulkBusy] = useState<"restore" | "purge" | null>(null);
  const [purgeAllOpen, setPurgeAllOpen] = useState(false);

  const allRows = useMemo(() => sections.flatMap((section) => section.rows), [sections]);
  const isEmpty = allRows.length === 0;

  useEffect(() => {
    let alive = true;
    void Promise.allSettled([
      api.productsTrash(),
      api.assetsTrash(),
      api.modelsTrash(),
      api.conversationsTrash("image"),
      api.imageExceptionBatchesTrash(),
      api.freeVideoTrash(0, 100),
      api.projectsTrash()
    ]).then(([products, assets, models, conversations, imageExceptionBatches, freeVideos, projects]) => {
      if (!alive) return;
      const rawSections: TrashSection[] = [
        {
          key: "product",
          title: "商品",
          rows: products.status === "fulfilled" ? rowsFromProducts(products.value.results) : []
        },
        {
          key: "asset",
          title: "资产",
          rows: assets.status === "fulfilled" ? rowsFromAssets(assets.value.results) : []
        },
        {
          key: "model",
          title: "模特",
          rows: models.status === "fulfilled" ? rowsFromModels(models.value.results) : []
        },
        {
          key: "image",
          title: "自由创作图片",
          rows: conversations.status === "fulfilled" ? rowsFromConversations(conversations.value.results) : []
        },
        {
          key: "imageExceptionBatch",
          title: "图片异常批次",
          rows: imageExceptionBatches.status === "fulfilled" ? rowsFromImageExceptionBatches(imageExceptionBatches.value.results) : []
        },
        {
          key: "freeVideo",
          title: "自由创作视频",
          rows: freeVideos.status === "fulfilled" ? rowsFromFreeVideos(freeVideos.value.results) : []
        },
        {
          key: "project",
          title: "视频项目",
          rows: projects.status === "fulfilled" ? rowsFromProjects(projects.value.results) : []
        }
      ];
      const nextSections = rawSections.filter((section) => section.rows.length > 0);
      setSections(nextSections);
      setLoading(false);
    });
    return () => { alive = false; };
  }, []);

  function removeRow(row: TrashRow) {
    setSections((list) =>
      list
        .map((section) => section.key === row.kind ? { ...section, rows: section.rows.filter((item) => item.id !== row.id) } : section)
        .filter((section) => section.rows.length > 0)
    );
  }

  function rowKey(row: TrashRow): string {
    return `${row.kind}:${row.id}`;
  }

  function restoreRow(row: TrashRow): Promise<unknown> {
    if (row.kind === "product") return Promise.resolve(onRestore(row.id));
    if (row.kind === "asset") return api.restoreAsset(row.id);
    if (row.kind === "model") return api.restoreModel(row.id);
    if (row.kind === "image") return api.restoreConversation(row.id);
    if (row.kind === "imageExceptionBatch") return api.restoreWorkbenchImageBatch(row.id);
    if (row.kind === "freeVideo") return api.restoreFreeVideo(row.id);
    return api.restoreProject(row.id);
  }

  function purgeRow(row: TrashRow): Promise<unknown> {
    if (row.kind === "product") return Promise.resolve(onPurge(row.id));
    if (row.kind === "asset") return api.purgeAsset(row.id);
    if (row.kind === "model") return api.purgeModel(row.id);
    if (row.kind === "image") return api.purgeConversation(row.id);
    if (row.kind === "imageExceptionBatch") return api.purgeWorkbenchImageBatch(row.id);
    if (row.kind === "freeVideo") return api.purgeFreeVideo(row.id);
    return api.purgeProject(row.id);
  }

  async function restore(row: TrashRow) {
    setBusyKey(rowKey(row));
    setErrText("");
    try {
      await restoreRow(row);
      removeRow(row);
      onChanged?.();
    } catch (error) {
      setErrText(error instanceof Error ? error.message : "恢复失败");
    } finally {
      setBusyKey(null);
    }
  }

  async function purge(row: TrashRow) {
    setBusyKey(rowKey(row));
    setErrText("");
    try {
      await purgeRow(row);
      removeRow(row);
      setConfirmId(null);
      onChanged?.();
    } catch (error) {
      setErrText(error instanceof Error ? error.message : "彻底删除失败");
    } finally {
      setBusyKey(null);
    }
  }

  async function restoreAll() {
    setBulkBusy("restore");
    setErrText("");
    const rows = [...allRows];
    const productRows = rows.filter((row) => row.kind === "product");
    const otherRows = rows.filter((row) => row.kind !== "product");
    const [productResult, otherResults] = await Promise.all([
      productRows.length
        ? onRestoreProducts(productRows.map((row) => row.id))
        : Promise.resolve<ProductBatchResult>({ succeededIds: productRows.map((row) => row.id), failedIds: [] }),
      Promise.allSettled(otherRows.map((row) => restoreRow(row)))
    ]);
    const failed = new Set([
      ...productResult.failedIds.map((id) => `product:${id}`),
      ...otherRows.filter((_, index) => otherResults[index].status === "rejected").map(rowKey)
    ]);
    setSections((list) =>
      list
        .map((section) => ({ ...section, rows: section.rows.filter((row) => failed.has(rowKey(row))) }))
        .filter((section) => section.rows.length > 0)
    );
    const firstFail = otherResults.find((r): r is PromiseRejectedResult => r.status === "rejected");
    if (firstFail) setErrText(firstFail.reason instanceof Error ? firstFail.reason.message : "部分恢复失败");
    if (productResult.succeededIds.length || otherResults.some((r) => r.status === "fulfilled")) onChanged?.();
    setBulkBusy(null);
  }

  async function purgeAll() {
    setPurgeAllOpen(false);
    setBulkBusy("purge");
    setErrText("");
    const rows = [...allRows];
    const productRows = rows.filter((row) => row.kind === "product");
    const otherRows = rows.filter((row) => row.kind !== "product");
    const [productResult, otherResults] = await Promise.all([
      productRows.length
        ? onPurgeProducts(productRows.map((row) => row.id))
        : Promise.resolve<ProductBatchResult>({ succeededIds: productRows.map((row) => row.id), failedIds: [] }),
      Promise.allSettled(otherRows.map((row) => purgeRow(row)))
    ]);
    const failed = new Set([
      ...productResult.failedIds.map((id) => `product:${id}`),
      ...otherRows.filter((_, index) => otherResults[index].status === "rejected").map(rowKey)
    ]);
    setSections((list) =>
      list
        .map((section) => ({ ...section, rows: section.rows.filter((row) => failed.has(rowKey(row))) }))
        .filter((section) => section.rows.length > 0)
    );
    const firstFail = otherResults.find((r): r is PromiseRejectedResult => r.status === "rejected");
    if (firstFail) setErrText(firstFail.reason instanceof Error ? firstFail.reason.message : "部分删除失败");
    if (productResult.succeededIds.length || otherResults.some((r) => r.status === "fulfilled")) onChanged?.();
    setBulkBusy(null);
  }

  return (
    <div className="trash-page">
      <div className="trash-inner">
      <div className="page-head">
        <div>
          <h1>垃圾桶</h1>
          <div className="sub">
            <span className="mono">已删除内容</span>
            <span>·</span>
            <span>可恢复,或彻底删除(不可恢复)</span>
          </div>
        </div>
        <div className="actions">
          <button className="btn" type="button" disabled={isEmpty || bulkBusy !== null} onClick={() => setPurgeAllOpen(true)}>清空垃圾桶</button>
          <button className="btn btn-primary" type="button" disabled={isEmpty || bulkBusy !== null} onClick={() => void restoreAll()}>
            {bulkBusy === "restore" ? "恢复中..." : "全部恢复"}
          </button>
        </div>
      </div>

      {loading ? (
        <SystemLoading title="正在加载数据" description="正在同步最新数据，请稍候。" icon="trash" />
      ) : isEmpty ? (
        <div className="placeholder trash-empty"><span className="ph-frame">垃圾桶是空的</span></div>
      ) : (
        <>
          {errText && <div className="trash-err mono">{errText}</div>}
          {sections.map((section) => (
            <div className="trash-section" key={section.key}>
              <div className="trash-section-title mono">{section.title} · {section.rows.length}</div>
              <div className="trash-list">
                {section.rows.map((row) => {
                  const key = rowKey(row);
                  const busy = busyKey === key;
                  return (
                    <div className="trash-row" key={key}>
                      <div className={`placeholder trash-thumb${row.cover ? " has-mock-media" : ""}`} style={row.cover ? mediaStyle(row.cover) : undefined}>
                        {!row.cover && <span className="ph-frame">无图</span>}
                      </div>
                      <div className="trash-meta">
                        <div className="trash-name" title={row.title}>{row.title}</div>
                        <div className="trash-sub mono">{row.subtitle}</div>
                      </div>
                      <div className="trash-actions">
                        {confirmId === key ? (
                          <>
                            <span className="trash-confirm-txt mono">彻底删除?不可恢复</span>
                            <button className="btn btn-sm trash-del" type="button" disabled={busy} onClick={() => void purge(row)}>确认删除</button>
                            <button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(null)}>取消</button>
                          </>
                        ) : (
                          <>
                            <button className="btn btn-sm btn-primary" type="button" disabled={busy} onClick={() => void restore(row)}>恢复</button>
                            <button className="btn btn-sm" type="button" disabled={busy} onClick={() => setConfirmId(key)}>彻底删除</button>
                          </>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          ))}
        </>
      )}
      </div>

      <ConfirmModal
        open={purgeAllOpen}
        title="清空垃圾桶"
        
        detail="清空垃圾桶数据无法恢复,是否需要清空?"
        confirmText="清空"
        onCancel={() => setPurgeAllOpen(false)}
        onConfirm={purgeAll}
      />
    </div>
  );
}