/* eslint-disable @typescript-eslint/no-explicit-any */
"use client";

import React, { useState, useRef, useEffect } from "react";
import "@/styles/creative-page.css";
import { useRouter } from "next/navigation";
import { useToast } from "@/components/ui/ToastContext";
import {
    PageHeader,
    StylePresets,
    UploadSection,
    ModeSelector,
    GenerateButton,
    VoiceInputButton,
    LimitModal,
    LoadingSkeleton,
    InitialState,
    UploadHint,
    Mode,
    AspectRatio,
    pollVideoStatus,
    makeMessage,
    Message,
    DEFAULT_MAX_ATTEMPTS,
    API_BASE_URL,
} from "@/components/generate-creative";

export default function GenerateCreativePage() {
    const [previewSrc, setPreviewSrc] = useState<string | null>(null);
    const [selectedAspect, setSelectedAspect] = useState<AspectRatio>("2:3");
    const [mode, setMode] = useState<Mode>("Image");
    const [showPresets, setShowPresets] = useState<boolean>(false);
    const [promptMessage, setPromptMessage] = useState<string>("");
    const fileInputRef = useRef<HTMLInputElement | null>(null);

    // Modal state
    const [showLimitModal, setShowLimitModal] = useState<boolean>(false);
    const [showVideoGeneratingModal, setShowVideoGeneratingModal] = useState<boolean>(false);

    // Popover state & refs
    const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
    const popoverRef = useRef<HTMLDivElement | null>(null);
    const popoverToggleRef = useRef<HTMLButtonElement | null>(null);

    // Chat state
    const [messages, setMessages] = useState<Message[]>([]);
    const [isChatMode, setIsChatMode] = useState<boolean>(false);
    const [loading, setLoading] = useState<boolean>(false);
    const [error, setError] = useState<string | null>(null);
    const chatContainerRef = useRef<HTMLDivElement | null>(null);
    const [generatedImageUrl, setGeneratedImageUrl] = useState<string | null>(null);

    const router = useRouter();
    const showToast = useToast();

    // Preview image
    function previewImage(e: React.ChangeEvent<HTMLInputElement>) {
        const file = e.target.files?.[0];
        if (!file) return;
        const url = URL.createObjectURL(file);
        setPreviewSrc(url);
    }

    function removeImg() {
        setPreviewSrc(null);
        if (fileInputRef.current) fileInputRef.current.value = "";
    }

    function handleAspect(ratio: AspectRatio) {
        setSelectedAspect(ratio);
    }

    function togglePopover() {
        setPopoverOpen((s) => !s);
    }

    function closePopover() {
        setPopoverOpen(false);
    }

    function togglePresets() {
        setShowPresets((s) => !s);
    }

    function closeLimitModal() {
        setShowLimitModal(false);
    }

    function handleUpgradePlan() {
        router.push('/pricing');
    }

    // Outside-click + Escape handling
    useEffect(() => {
        function onDocumentClick(e: MouseEvent) {
            if (!popoverOpen) return;
            const target = e.target as Node | null;
            if (!target) return;

            if (
                (popoverRef.current && popoverRef.current.contains(target)) ||
                (popoverToggleRef.current && popoverToggleRef.current.contains(target))
            ) {
                return;
            }
            closePopover();
        }

        function onDocumentKey(e: KeyboardEvent) {
            if (e.key === "Escape") {
                closePopover();
                if (showLimitModal) {
                    closeLimitModal();
                }
            }
        }

        document.addEventListener("click", onDocumentClick);
        document.addEventListener("keydown", onDocumentKey);
        return () => {
            document.removeEventListener("click", onDocumentClick);
            document.removeEventListener("keydown", onDocumentKey);
        };
    }, [popoverOpen, showLimitModal]);

    // Auto-scroll chat to bottom when messages change
    useEffect(() => {
        if (!chatContainerRef.current) return;
        chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
    }, [messages, loading]);

    function pushMessage(msg: Message) {
        setMessages((prev) => [...prev, msg]);
    }

    async function handleSend() {
        const prompt = promptMessage.trim();
        if (!prompt) return;

        setError(null);
        setIsChatMode(true);
        setPromptMessage("");
        setLoading(true);

        const overallController = new AbortController();
        const signal = overallController.signal;

        try {
            if (mode === "Video") {
                const file = fileInputRef.current?.files?.[0];
                if (!file) {
                    showToast("Please upload a source image to generate a video");
                    setLoading(false);
                    setIsChatMode(false);
                    return;
                }

                // Show the video generating modal
                setShowVideoGeneratingModal(true);

                const duration = 5;
                const guidance_scale = 0.5;
                const partner_id = null;

                const form = new FormData();
                form.append("image", file);
                form.append("prompt", prompt);
                form.append("duration", String(duration));
                form.append("guidance_scale", String(guidance_scale));
                form.append("partner_id", String(partner_id));

                const postUrl = `${API_BASE_URL}/video/claid/image-to-video`;
                const token = localStorage.getItem("access_token");
                const postResp = await fetch(postUrl, {
                    method: "POST",
                    body: form,
                    signal,
                    headers: {
                        Authorization: `Bearer ${token}`
                    }
                });

                if (!postResp.ok) {
                    const txt = await postResp.text();
                    throw new Error(`Video API error: ${postResp.status} ${txt}`);
                }

                const postPayload = await postResp.json();
                const videoId = postPayload?.data?.VideoId ?? postPayload?.VideoId ?? null;
                if (!videoId) {
                    throw new Error("VideoId not returned by server");
                }

                try {
                    const statusPayload = await pollVideoStatus(Number(videoId), { signal, maxAttempts: DEFAULT_MAX_ATTEMPTS });
                    const dbData = statusPayload?.dbData;
                    console.log({ dbData });
                    if (dbData)
                        router.replace('/edit-creative-video?id=' + dbData.id);
                } catch (pollErr: any) {
                    const pollMsg = pollErr?.message || "Polling failed or aborted";
                    pushMessage(makeMessage("bot", { text: `Video processing error: ${pollMsg}` }));
                } finally {
                    setShowVideoGeneratingModal(false);
                }
            } else {
                const token = localStorage.getItem("access_token");
                const resp = await fetch(`${API_BASE_URL}/image/text-to-image`, {
                    method: "POST",
                    headers: {
                        Authorization: `Bearer ${token}`,
                        "Content-Type": "application/json",
                    },
                    body: JSON.stringify({
                        prompt,
                        mode,
                        aspect: selectedAspect,
                    }),
                    signal,
                });

                if (!resp.ok) {
                    const txt = await resp.text();
                    throw new Error(`API error: ${resp.status} ${txt}`);
                }

                const payload = await resp.json();
                console.log("Image generation response:", payload);
                console.log("Payload data:", payload?.data);

                const generatedId = payload?.data?.id || payload?.data?.dbData?.id;
                console.log("Generated ID:", generatedId);

                if (generatedId) {
                    console.log("Redirecting to edit page with ID:", generatedId);
                    router.replace(`/edit-creative-image?id=${generatedId}`);
                } else {
                    console.warn("No ID in response, showing message instead");
                    console.warn("Response structure:", JSON.stringify(payload, null, 2));
                    const botText =
                        (typeof payload === "string" && payload) ||
                        payload?.message ||
                        "Image generated successfully! Check your AI Library.";
                    pushMessage(makeMessage("bot", { text: botText }));
                }
            }
        } catch (err: any) {
            console.error("Send error", err);
            const msg = err?.message || "Something went wrong while calling the API.";
            setError(msg);
            pushMessage(makeMessage("bot", { text: `Error: ${msg}` }));
        } finally {
            setLoading(false);
        }
    }

    function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
        if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            handleSend();
        }
    }

    function handleVoiceTranscript(transcript: string) {
        // Append the voice transcript to the existing prompt
        setPromptMessage((prev) => {
            const separator = prev.trim() ? " " : "";
            return prev + separator + transcript;
        });
    }

    return (
        <div className="pcoded-main-container bg-light">
            <div className="pcoded-content generate-page-content px-0">
                <section className="generate-section w-100 m-0">
                    <div className="generate-section-area w-100 m-0">
                        <PageHeader />

                        <div className="card bg-white border-0 shadow-sm rounded-3 mb-3">
                            <div className="card-body">
                                {!isChatMode && messages.length === 0 ? (
                                    <InitialState onSelect={setPromptMessage} />
                                ) : (
                                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
                                        {loading && !generatedImageUrl ? (
                                            <LoadingSkeleton />
                                        ) : generatedImageUrl ? (
                                            <>
                                                <img
                                                    src={generatedImageUrl}
                                                    alt="Generated creative"
                                                    style={{
                                                        maxWidth: '100%',
                                                        width: 'auto',
                                                        height: 'auto',
                                                        maxHeight: '600px',
                                                        borderRadius: '12px',
                                                        boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
                                                    }}
                                                />
                                                <div style={{ display: 'flex', gap: 12, marginTop: 16 }}>
                                                    <a
                                                        href={generatedImageUrl}
                                                        download
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                        className="btn btn-outline-primary"
                                                    >
                                                        Download
                                                    </a>
                                                    <button
                                                        className="btn btn-primary"
                                                        onClick={() => {
                                                            setGeneratedImageUrl(null);
                                                            setIsChatMode(false);
                                                            setPromptMessage('');
                                                        }}
                                                    >
                                                        Create New
                                                    </button>
                                                </div>
                                            </>
                                        ) : null}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Upload / presets area */}
                    <div
                        hidden={isChatMode}
                        className="shadow border-top border-bottom bg-white py-2 py-md-3 px-2 m-0"
                    >
                        <div className="row align-items-center justify-content-center g-md-3 g-2 m-0">
                            <div className="col-xxl-10 col-xl-10 col-lg-10 col-md-12 col-sm-12 col-12 m-0">
                                <UploadHint />
                                <StylePresets
                                    isOpen={showPresets}
                                    onToggle={togglePresets}
                                    onSelect={setPromptMessage}
                                />
                            </div>

                            <div className="col-xxl-10 col-xl-10 col-lg-10 col-md-12 col-sm-12 col-12 m-0 d-flex flex-column gap-3">
                                <div className="d-flex gap-2 align-items-center upload-img-section bg-light p-2 rounded-2 border">
                                    <UploadSection
                                        promptMessage={promptMessage}
                                        onPromptChange={setPromptMessage}
                                        onKeyDown={handleKeyDown}
                                        previewSrc={previewSrc}
                                        onFileChange={previewImage}
                                        onRemoveFile={removeImg}
                                        fileInputRef={fileInputRef}
                                    />

                                    <span className="input-group-text py-0 px-0 mb-0 border-0 bg-transparent d-flex gap-2 order-md-3 order-3">
                                       <VoiceInputButton
                                            onTranscript={handleVoiceTranscript}
                                            disabled={loading}
                                        />
                                        <ModeSelector
                                            mode={mode}
                                            onModeChange={setMode}
                                            selectedAspect={selectedAspect}
                                            onAspectChange={handleAspect}
                                            isOpen={popoverOpen}
                                            onToggle={togglePopover}
                                            popoverRef={popoverRef}
                                            toggleRef={popoverToggleRef}
                                        />
                                        
                                        <GenerateButton
                                            onClick={handleSend}
                                            disabled={loading}
                                            hasPrompt={!!promptMessage}
                                        />
                                    </span>
                                </div>

                                <p className="mb-0 text-center my-text-small small-text-sm">
                                    All creatives are automatically saved to your library.
                                </p>
                                {error && <div className="api-error">Error: {error}</div>}
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <LimitModal
                isOpen={showLimitModal}
                onClose={closeLimitModal}
                onUpgrade={handleUpgradePlan}
            />

            {/* Video Generating Modal */}
            {showVideoGeneratingModal && (
                <div
                    className="modal fade show d-block"
                    tabIndex={-1}
                    style={{
                        backgroundColor: "rgba(0,0,0,0.5)",
                        zIndex: 1050,
                    }}
                >
                    <div className="modal-dialog modal-dialog-centered">
                        <div
                            className="modal-content rounded-3 shadow"
                            style={{
                                border: "none",
                                padding: "20px",
                            }}
                        >
                            <div className="modal-body text-center py-4">
                                {/* Spinner */}
                                <div
                                    className="spinner-border mb-3"
                                    role="status"
                                    style={{
                                        width: "3rem",
                                        height: "3rem",
                                        color: "#C600BA",
                                    }}
                                >
                                    <span className="visually-hidden">Loading...</span>
                                </div>

                                {/* Title */}
                                <h5 className="fw-semibold mb-3" style={{ color: "#031c30" }}>
                                    Generating Your Video
                                </h5>

                                {/* Message */}
                                <p className="text-muted mb-0" style={{ fontSize: "1rem" }}>
                                    Your video is being created. This might take 2-3 minutes.
                                    <br />
                                    Please wait...
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}