import { memo, useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import { Button, Input, Switch } from "antd";
import { Check, Compass, Copy, Globe, Image as ImageIcon, Info, Plus, Search, Sparkles, X } from "lucide-react";

import { AppModal } from "@/components/ui/product/app-modal";
import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";

export type PanoramaProjection = "spherical" | "cylindrical";
export type PanoramaSourceMode = "ai" | "image";

export interface PanoramaReferenceImage {
    id: string;
    url: string;
    label: string;
    color?: string;
}

export interface PanoramaGenerateConfig {
    projection: PanoramaProjection;
    sourceMode: PanoramaSourceMode;
    referenceImages: PanoramaReferenceImage[];
    directImageUrl?: string | null;
    smartBase: boolean;
}

interface CanvasPanoramaConfigModalProps {
    open: boolean;
    onCancel: () => void;
    onConfirm: (composedPrompt: string, config: PanoramaGenerateConfig) => void;
    onCopyPrompt?: (prompt: string) => void;
    previewImageUrl?: string | null;
    initialProjection?: PanoramaProjection;
    initialSourceMode?: PanoramaSourceMode;
    initialSmartBase?: boolean;
    nodes: CanvasNodeData[];
}

const PANORAMA_COLORS = ["#60a5fa", "#34d399", "#fbbf24", "#f87171", "#a78bfa", "#fb7185", "#38bdf8", "#4ade80"];

function normalizeInitialSourceMode(mode: PanoramaSourceMode | undefined, hasPreview: boolean): PanoramaSourceMode {
    if (mode === "image") return "image";
    if (mode === "ai") return "ai";
    return hasPreview ? "image" : "ai";
}

function buildPanoramaPrompt(sourceMode: PanoramaSourceMode, projection: PanoramaProjection, userPrompt: string): string {
    const base = userPrompt.trim();

    const common = [
        "最终图像必须适合导入全景查看器，作为包裹场景的环境球内壁或水平环绕背景使用",
        "画面中不要出现摄影师、相机、镜头、三脚架、头显或任何拍摄设备",
        "不要分屏拼贴，不要多宫格，不要画中画，不要插入小图，只保留一个连续环境",
        "不要水印，不要文字，不要界面元素，不要边框，不要明显拼接线或接缝",
        "除非用户另有说明，保持真实摄影质感、电影级光影和自然空间纵深",
    ].join(", ");

    const ratio = projection === "spherical" ? "2:1" : "4:1";

    const fallbackText = `生成一张可用于全景查看器的完整沉浸式全景图，画面必须是比例${ratio}的等距柱状投影结构，宽度是高度的${projection === "spherical" ? "2倍" : "4倍"}，结合导入图片的主体、材质、色彩和风格，并根据文字描述补全四周环境、天空或天花板、地面或地板，让左右边缘自然衔接。${common}`;

    if (!base) {
        return fallbackText;
    }

    return `${base}。${fallbackText}`;
}

const PanoramaSetupForm = memo(
    ({
        onSubmit,
        onCancel,
        onCopyPrompt,
        previewImageUrl,
        initialProjection = "spherical",
        initialSourceMode,
        initialSmartBase = true,
        canvasNodes,
    }: {
        onSubmit: (composedPrompt: string, config: PanoramaGenerateConfig) => void;
        onCancel: () => void;
        onCopyPrompt?: (prompt: string) => void;
        previewImageUrl?: string | null;
        initialProjection?: PanoramaProjection;
        initialSourceMode?: PanoramaSourceMode;
        initialSmartBase?: boolean;
        canvasNodes: CanvasNodeData[];
    }) => {
        const [projection, setProjection] = useState<PanoramaProjection>(initialProjection);
        const [sourceMode, setSourceMode] = useState<PanoramaSourceMode>(normalizeInitialSourceMode(initialSourceMode, Boolean(previewImageUrl)));
        const [smartBase, setSmartBase] = useState(initialSmartBase);
        const [prompt, setPrompt] = useState("");
        const [assetQuery, setAssetQuery] = useState("");
        const [isAssetPickerOpen, setIsAssetPickerOpen] = useState(false);
        const [selectedIds, setSelectedIds] = useState<string[]>([]);
        const [draftSelectedIds, setDraftSelectedIds] = useState<string[]>([]);
        const [loadedImages, setLoadedImages] = useState<Record<string, boolean>>({});
        const [failedImages, setFailedImages] = useState<Record<string, boolean>>({});

        const canvasReferences = useMemo<PanoramaReferenceImage[]>(() => {
            const list: PanoramaReferenceImage[] = [];
            canvasNodes.forEach((node) => {
                if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) return;
                const raw = node.metadata?.content;
                if (!raw) return;
                const label = (node.title || "").trim() || `图${list.length + 1}`;
                list.push({
                    id: node.id,
                    url: raw,
                    label,
                    color: PANORAMA_COLORS[list.length % PANORAMA_COLORS.length],
                });
            });
            return list;
        }, [canvasNodes]);

        const allReferences = useMemo<PanoramaReferenceImage[]>(() => {
            if (!previewImageUrl) return canvasReferences;
            const exists = canvasReferences.some((item) => item.url === previewImageUrl);
            if (exists) return canvasReferences;
            return [
                {
                    id: "selected-preview",
                    url: previewImageUrl,
                    label: "当前图片",
                    color: PANORAMA_COLORS[0],
                },
                ...canvasReferences,
            ];
        }, [canvasReferences, previewImageUrl]);

        useEffect(() => {
            if (selectedIds.length > 0) {
                const available = new Set(allReferences.map((item) => item.id));
                setSelectedIds((current) => current.filter((id) => available.has(id)));
                return;
            }
            if (previewImageUrl) {
                const first = allReferences.find((item) => item.url === previewImageUrl) ?? allReferences[0];
                if (first) setSelectedIds([first.id]);
            }
        }, [allReferences, previewImageUrl, selectedIds.length]);

        useEffect(() => {
            if (sourceMode !== "image") return;
            setSelectedIds((current) => (current.length > 1 ? current.slice(0, 1) : current));
            setDraftSelectedIds((current) => (current.length > 1 ? current.slice(0, 1) : current));
        }, [sourceMode]);

        const selectedReferences = useMemo(() => {
            const byId = new Map(allReferences.map((item) => [item.id, item]));
            return selectedIds.map((id) => byId.get(id)).filter((item): item is PanoramaReferenceImage => Boolean(item));
        }, [allReferences, selectedIds]);

        const filteredReferences = useMemo(() => {
            const query = assetQuery.trim().toLowerCase();
            if (!query) return allReferences;
            return allReferences.filter((item) => `${item.label} ${item.id}`.toLowerCase().includes(query));
        }, [allReferences, assetQuery]);

        const defaultAiPrompt = "生成一张可用于全景查看器的完整沉浸式全景图，画面必须是比例2比1的等距柱状投影结构，宽度是高度的2倍，结合导入图片的主体、材质、色彩和风格，并根据文字描述补全四周环境、天空或天花板、地面或地板，让左右边缘自然衔接";
        const effectivePrompt = sourceMode === "image" ? prompt.trim() : prompt.trim() || defaultAiPrompt;
        const composed = sourceMode === "image" ? effectivePrompt : buildPanoramaPrompt(sourceMode, projection, effectivePrompt);
        const directReference = selectedReferences[0] ?? null;
        const outputRatio = projection === "spherical" ? "2:1" : "4:1";
        const canSubmit = sourceMode === "ai" || Boolean(directReference);

        const handleSubmit = useCallback(() => {
            if (sourceMode === "image" && !directReference) return;
            onSubmit(composed, {
                projection,
                sourceMode,
                smartBase,
                referenceImages: selectedReferences,
                directImageUrl: sourceMode === "image" ? (directReference?.url ?? null) : null,
            });
        }, [composed, directReference, onSubmit, projection, selectedReferences, smartBase, sourceMode]);

        useEffect(() => {
            const onKeyDown = (event: KeyboardEvent) => {
                if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
                    event.preventDefault();
                    handleSubmit();
                }
            };
            window.addEventListener("keydown", onKeyDown);
            return () => window.removeEventListener("keydown", onKeyDown);
        }, [handleSubmit]);

        const markImageLoaded = useCallback((id: string) => {
            setLoadedImages((current) => (current[id] ? current : { ...current, [id]: true }));
        }, []);

        const markImageFailed = useCallback((id: string) => {
            setFailedImages((current) => (current[id] ? current : { ...current, [id]: true }));
        }, []);

        const trackImageReady = useCallback(
            (id: string) => (element: HTMLImageElement | null) => {
                if (element?.complete && element.naturalWidth > 0) markImageLoaded(id);
            },
            [markImageLoaded],
        );

        const toggleDraftReference = (id: string) => {
            setDraftSelectedIds((current) => {
                if (sourceMode === "image") {
                    return current.includes(id) ? [] : [id];
                }
                return current.includes(id) ? current.filter((item) => item !== id) : [...current, id];
            });
        };

        const openAssetPicker = () => {
            setDraftSelectedIds(selectedIds);
            setIsAssetPickerOpen(true);
        };

        const confirmAssetPicker = () => {
            setSelectedIds(draftSelectedIds);
            setIsAssetPickerOpen(false);
        };

        const renderImageSurface = (image: PanoramaReferenceImage, surfaceClass: string) => {
            const loaded = loadedImages[image.id];
            const failed = failedImages[image.id];
            return (
                <div className={`relative overflow-hidden bg-foreground/5 ${surfaceClass}`}>
                    <img
                        src={image.url}
                        alt={image.label}
                        draggable={false}
                        ref={trackImageReady(image.id)}
                        onLoad={() => markImageLoaded(image.id)}
                        onError={() => markImageFailed(image.id)}
                        className={`h-full w-full object-cover transition-opacity duration-300 ${loaded && !failed ? "opacity-100" : "opacity-0"}`}
                    />
                    {!failed && !loaded && <div className="absolute inset-0 animate-pulse bg-foreground/5" />}
                    {failed && (
                        <div className="absolute inset-0 grid place-items-center">
                            <span className="px-2 text-center text-[11px] leading-4 text-foreground/40">加载失败</span>
                        </div>
                    )}
                </div>
            );
        };

        const thumbSizeClass = sourceMode === "image" ? "w-[140px]" : "w-[100px]";

        const selectedThumb = (image: PanoramaReferenceImage, index: number) => (
            <div key={image.id} className={`group relative shrink-0 ${thumbSizeClass}`}>
                {renderImageSurface(image, "aspect-[4/3] rounded-[var(--r-md)]")}
                <span className="pointer-events-none absolute left-1.5 top-1.5 inline-flex items-center gap-1 rounded-full bg-black/55 px-1.5 py-0.5 text-[9px] font-medium text-white backdrop-blur-sm">
                    <span className="size-1 rounded-full" style={{ backgroundColor: image.color }} />
                    {sourceMode === "image" ? "源图" : `${index + 1}`}
                </span>
                <button
                    type="button"
                    onClick={() => setSelectedIds((current) => current.filter((id) => id !== image.id))}
                    aria-label={`移除${image.label}`}
                    className="absolute right-1 top-1 grid size-5 place-items-center rounded-full bg-black/55 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
                >
                    <X className="size-3" />
                </button>
            </div>
        );

        const addTile = (
            <button
                type="button"
                onClick={openAssetPicker}
                className={`flex shrink-0 flex-col items-center justify-center gap-1.5 rounded-[var(--r-md)] bg-foreground/5 text-[10px] font-medium text-foreground/45 transition-colors hover:bg-foreground/10 hover:text-foreground/65 ${thumbSizeClass} aspect-[4/3]`}
            >
                <Plus className="size-4" strokeWidth={1.8} />
                <span>添加</span>
            </button>
        );

        return (
            <>
                <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-background text-foreground">
                    <header className="flex shrink-0 items-center gap-2.5 border-b border-border px-5 py-3">
                        <span className="grid size-7 shrink-0 place-items-center rounded-[var(--r-md)] bg-foreground/5 text-foreground/70">
                            <Globe className="size-3.5" strokeWidth={1.8} />
                        </span>
                        <div className="min-w-0">
                            <h2 className="text-[13px] font-semibold leading-tight">全景图生成</h2>
                            <p className="text-[10px] text-foreground/45">AI 补全环境或直接转换</p>
                        </div>
                    </header>

                    <main className="ui-scrollbar nowheel min-h-0 min-w-0 flex-1 overflow-y-auto px-5 py-3">
                        <div className="space-y-3">
                            {/* 生成方式 */}
                            <div>
                                <div className="mb-1.5 text-[11px] font-semibold text-foreground">生成方式</div>
                                <div className="grid grid-cols-2 gap-2">
                                    <button
                                        type="button"
                                        aria-pressed={sourceMode === "ai"}
                                        onClick={() => setSourceMode("ai")}
                                        className={`flex items-center gap-2 rounded-[var(--r-md)] px-2.5 py-2 text-left transition-all ${
                                            sourceMode === "ai"
                                                ? "bg-accent text-white"
                                                : "bg-foreground/5 text-foreground hover:bg-foreground/10"
                                        }`}
                                    >
                                        <Sparkles className="size-4 shrink-0" />
                                        <div className="min-w-0">
                                            <div className="text-[11px] font-semibold">AI 生成</div>
                                            <div className="text-[9px] leading-tight opacity-75">补全环境</div>
                                        </div>
                                    </button>
                                    <button
                                        type="button"
                                        aria-pressed={sourceMode === "image"}
                                        onClick={() => setSourceMode("image")}
                                        className={`flex items-center gap-2 rounded-[var(--r-md)] px-2.5 py-2 text-left transition-all ${
                                            sourceMode === "image"
                                                ? "bg-accent text-white"
                                                : "bg-foreground/5 text-foreground hover:bg-foreground/10"
                                        }`}
                                    >
                                        <ImageIcon className="size-4 shrink-0" />
                                        <div className="min-w-0">
                                            <div className="text-[11px] font-semibold">图片直出</div>
                                            <div className="text-[9px] leading-tight opacity-75">直接转换</div>
                                        </div>
                                    </button>
                                </div>
                            </div>

                            {/* 参考图 / 源图 */}
                            <div>
                                <div className="mb-1.5 flex items-center justify-between gap-2">
                                    <div className="text-[11px] font-semibold text-foreground">{sourceMode === "image" ? "全景源图" : "参考图"}</div>
                                    <Button size="small" type="text" icon={<Plus className="size-3.5" />} onClick={openAssetPicker} className="!h-6 !px-2 !text-[10px]">
                                        {sourceMode === "image" && selectedReferences.length > 0 ? "替换" : "添加"}
                                    </Button>
                                </div>
                                <div className="flex flex-wrap gap-1.5">
                                    {selectedReferences.map((image, index) => selectedThumb(image, index))}
                                    {sourceMode !== "image" && addTile}
                                    {sourceMode === "image" && selectedReferences.length === 0 && addTile}
                                </div>
                            </div>

                            {/* 场景描述 */}
                            {sourceMode === "ai" && (
                                <div>
                                    <div className="mb-1.5 text-[11px] font-semibold text-foreground">场景描述</div>
                                    <Input.TextArea
                                        value={prompt}
                                        onChange={(event) => setPrompt(event.target.value)}
                                        placeholder="例如：黄昏的海边木屋，能看到天空、地面和四周环境"
                                        autoSize={{ minRows: 2, maxRows: 4 }}
                                    />
                                </div>
                            )}

                            {/* 全景类型 */}
                            <div>
                                <div className="mb-1.5 text-[11px] font-semibold text-foreground">全景类型</div>
                                <div className="grid grid-cols-2 gap-2">
                                    {(
                                        [
                                            { value: "spherical" as const, icon: Globe, title: "球形全景", desc: "720° 沉浸式", ratio: "2:1" },
                                            { value: "cylindrical" as const, icon: Compass, title: "环绕全景", desc: "360° 街景", ratio: "4:1" },
                                        ] as const
                                    ).map((option) => {
                                        const selected = projection === option.value;
                                        const Icon = option.icon;
                                        return (
                                            <button
                                                key={option.value}
                                                type="button"
                                                aria-pressed={selected}
                                                onClick={() => setProjection(option.value)}
                                                className={`flex items-center gap-2 rounded-[var(--r-md)] px-2.5 py-2 text-left transition-all ${
                                                    selected
                                                        ? "bg-accent text-white"
                                                        : "bg-foreground/5 text-foreground hover:bg-foreground/10"
                                                }`}
                                            >
                                                <Icon className="size-4 shrink-0" />
                                                <div className="min-w-0 flex-1">
                                                    <div className="flex items-center gap-1.5">
                                                        <span className="text-[11px] font-semibold">{option.title}</span>
                                                        <span className={`rounded-sm px-1 py-px text-[9px] font-medium ${selected ? "bg-white/20" : "bg-foreground/8 text-foreground/55"}`}>{option.ratio}</span>
                                                    </div>
                                                    <div className={`text-[9px] leading-tight ${selected ? "opacity-80" : "text-foreground/50"}`}>{option.desc}</div>
                                                </div>
                                            </button>
                                        );
                                    })}
                                </div>
                            </div>

                            {/* 高级选项 */}
                            <div>
                                <div className="mb-1.5 text-[11px] font-semibold text-foreground">高级选项</div>
                                <div className="space-y-1.5">
                                    <div className="flex items-center justify-between gap-3 rounded-[var(--r-md)] bg-foreground/5 px-2.5 py-1.5">
                                        <div className="min-w-0">
                                            <div className="text-[11px] font-semibold text-foreground">智能比例</div>
                                            <div className="text-[9px] leading-tight text-foreground/50">模型不支持时自动裁切</div>
                                        </div>
                                        <Switch size="small" checked={smartBase} onChange={setSmartBase} />
                                    </div>
                                    {sourceMode === "ai" && (
                                        <Button size="small" type="text" icon={<Copy className="size-3.5" />} onClick={() => onCopyPrompt?.(composed)} className="!h-6 !px-2 !text-[10px]">
                                            复制完整提示词
                                        </Button>
                                    )}
                                </div>
                            </div>
                        </div>
                    </main>

                    <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-border px-5 py-2.5">
                        <span className={`truncate text-[10px] ${canSubmit ? "text-foreground/45" : "text-amber-500"}`}>
                            {sourceMode === "image" ? (directReference ? "已选源图" : "请选择源图") : selectedReferences.length > 0 ? `${selectedReferences.length} 张参考图` : "无参考图"}
                        </span>
                        <div className="flex shrink-0 items-center gap-2">
                            <Button size="small" onClick={onCancel}>
                                取消
                            </Button>
                            <Button size="small" type="primary" icon={sourceMode === "image" ? <ImageIcon className="size-3.5" /> : <Sparkles className="size-3.5" />} disabled={!canSubmit} onClick={handleSubmit}>
                                {sourceMode === "image" ? "创建全景图" : "生成全景图"}
                            </Button>
                        </div>
                    </footer>
                </div>

                {/* 选图面板 */}
                {isAssetPickerOpen && (
                    <div className="absolute inset-0 z-[260] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm">
                        <div className="flex max-h-full w-[500px] max-w-full flex-col overflow-hidden rounded-[var(--r-lg)] border border-border bg-background shadow-2xl">
                            <div className="flex items-start justify-between gap-3 border-b border-border px-5 py-3">
                                <div className="min-w-0">
                                    <div className="text-sm font-semibold text-foreground">{sourceMode === "image" ? "选择源图" : "选择参考图"}</div>
                                    <div className="mt-0.5 text-[11px] text-foreground/45">
                                        {sourceMode === "image" ? "只选一张作为全景源" : `已选 ${draftSelectedIds.length} 张`}
                                    </div>
                                </div>
                                <button
                                    type="button"
                                    onClick={() => setIsAssetPickerOpen(false)}
                                    aria-label="关闭"
                                    className="grid size-6 shrink-0 place-items-center rounded-[var(--r-md)] text-foreground/45 transition-colors hover:bg-foreground/5 hover:text-foreground"
                                >
                                    <X className="size-4" />
                                </button>
                            </div>
                            <div className="border-b border-border px-5 py-2">
                                <Input size="small" allowClear value={assetQuery} onChange={(event) => setAssetQuery(event.target.value)} placeholder="搜索图片名称" prefix={<Search className="size-3.5 text-foreground/35" />} />
                            </div>
                            <div className="ui-scrollbar min-h-0 flex-1 overflow-y-auto p-4">
                                {filteredReferences.length === 0 ? (
                                    <div className="rounded-[var(--r-md)] bg-foreground/5 px-4 py-8 text-center text-[11px] text-foreground/45">没有匹配的图片</div>
                                ) : (
                                    <div className="grid grid-cols-5 gap-2">
                                        {filteredReferences.map((image) => {
                                            const selected = draftSelectedIds.includes(image.id);
                                            const failed = failedImages[image.id];
                                            const loaded = loadedImages[image.id];
                                            return (
                                                <button
                                                    key={image.id}
                                                    type="button"
                                                    onClick={() => toggleDraftReference(image.id)}
                                                    aria-pressed={selected}
                                                    className={`group relative overflow-hidden rounded-[var(--r-md)] transition-shadow ${selected ? "ring-2 ring-accent" : ""}`}
                                                >
                                                    {renderImageSurface(image, "aspect-square w-full")}
                                                    {selected && (
                                                        <span className="absolute right-0.5 top-0.5 grid size-4 place-items-center rounded-full bg-accent text-white">
                                                            <Check className="size-2.5" />
                                                        </span>
                                                    )}
                                                </button>
                                            );
                                        })}
                                    </div>
                                )}
                            </div>
                            <div className="flex items-center justify-end gap-2 border-t border-border px-5 py-3">
                                <Button size="small" onClick={() => setIsAssetPickerOpen(false)}>
                                    取消
                                </Button>
                                <Button size="small" type="primary" disabled={sourceMode === "image" && draftSelectedIds.length === 0} onClick={confirmAssetPicker}>
                                    {sourceMode === "image" ? "使用此图" : `加入 ${draftSelectedIds.length}`}
                                </Button>
                            </div>
                        </div>
                    </div>
                )}
            </>
        );
    },
);

PanoramaSetupForm.displayName = "PanoramaSetupForm";

export function CanvasPanoramaConfigModal({ open, onCancel, onConfirm, onCopyPrompt, previewImageUrl, initialProjection, initialSourceMode, initialSmartBase, nodes }: CanvasPanoramaConfigModalProps) {
    return (
        <AppModal open={open} centered footer={null} width={680} flush onCancel={onCancel}>
            <div className="flex min-h-0 flex-col overflow-hidden" style={{ maxHeight: "min(640px, calc(100vh - 100px))" }}>
                <div className="relative flex min-h-0 flex-1">
                    <PanoramaSetupForm
                        onSubmit={onConfirm}
                        onCancel={onCancel}
                        onCopyPrompt={onCopyPrompt}
                        previewImageUrl={previewImageUrl}
                        initialProjection={initialProjection}
                        initialSourceMode={initialSourceMode}
                        initialSmartBase={initialSmartBase}
                        canvasNodes={nodes}
                    />
                </div>
            </div>
        </AppModal>
    );
}