"use client";

import { ArrowLeft, FileImage } from "lucide-react";
import { useParams, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useState } from "react";
import { AgentPsdTemplateEditorDialog } from "@/components/agents/AgentPsdTemplateEditorDialog";
import { Button } from "@/components/ui/button";
import {
  readCanvasPsdTemplateLaunchPayload,
  type CanvasPsdTemplateLaunchPayload,
} from "@/lib/canvas/psd-template-launch";

export default function CanvasPsdTemplatePage() {
  const router = useRouter();
  const routeParams = useParams();
  const searchParams = useSearchParams();
  const canvasId = String(routeParams?.id || "");
  const launchToken = searchParams.get("launch") || "";

  const [launchPayload, setLaunchPayload] = useState<CanvasPsdTemplateLaunchPayload | null>(null);
  const [activePendingImageId, setActivePendingImageId] = useState<string | null>(null);
  const [renderedResultUrls, setRenderedResultUrls] = useState<Record<string, string>>({});

  useEffect(() => {
    if (!launchToken) {
      setLaunchPayload(null);
      return;
    }

    const nextPayload = readCanvasPsdTemplateLaunchPayload(launchToken);
    setLaunchPayload(nextPayload);
    setActivePendingImageId(nextPayload?.activeImageId || nextPayload?.pendingImages[0]?.id || null);
  }, [launchToken]);

  const handleBack = useCallback(() => {
    const returnTo = launchPayload?.returnTo?.trim();
    if (returnTo) {
      router.push(returnTo);
      return;
    }
    router.push(`/canvas/${canvasId}/batch`);
  }, [canvasId, launchPayload?.returnTo, router]);

  const activePendingImage = useMemo(
    () =>
      launchPayload?.pendingImages.find((image) => image.id === activePendingImageId) ||
      launchPayload?.pendingImages[0] ||
      null,
    [activePendingImageId, launchPayload?.pendingImages]
  );

  if (!launchPayload || !activePendingImage) {
    return (
      <div className="flex h-dvh w-full items-center justify-center bg-[#050608] px-6 text-white">
        <div className="w-full max-w-md rounded-[28px] border border-white/10 bg-white/[0.03] p-8 text-center shadow-[0_30px_80px_rgba(0,0,0,0.35)]">
          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full border border-white/10 bg-white/[0.04]">
            <FileImage className="h-6 w-6 text-white/70" />
          </div>
          <div className="font-semibold text-lg">没有可用的套 PSD 任务</div>
          <div className="mt-3 text-sm leading-6 text-white/55">
            当前页面没有接收到批量处理结果图。请先从批量处理结果区选择图片，再进入套 PSD 模版页面。
          </div>
          <Button className="mt-6" onClick={handleBack}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回批量处理
          </Button>
        </div>
      </div>
    );
  }

  return (
    <AgentPsdTemplateEditorDialog
      activePendingImageId={activePendingImage.id}
      brandName={launchPayload.brandName}
      key={`${launchToken}:${activePendingImage.id}`}
      onActivePendingImageIdChange={setActivePendingImageId}
      onBack={handleBack}
      onOpenChange={(open) => {
        if (!open) {
          handleBack();
        }
      }}
      onRenderedResultCreated={(imageUrl) => {
        setRenderedResultUrls((current) => ({
          ...current,
          [activePendingImage.id]: imageUrl,
        }));
      }}
      open
      pendingImages={launchPayload.pendingImages}
      pendingRenderedResultUrls={renderedResultUrls}
      sourceImageUrl={activePendingImage.imageUrl}
      standalone
      templateMode={launchPayload.templateMode || "main"}
    />
  );
}