"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import CustomLoader from "@/components/common/CustomLoader";

interface CmsPage {
    id: string;
    page_name: string;
    slug: string;
}

interface MeetGuru {
    id: string;
    page_id: string;
    title: string;
    background_image?: string | null;
    guru_image?: string | null;
    vector_image?: string | null;
    description?: string | null;
    quote_text?: string | null;
    signature_text?: string | null;
    guru_name?: string | null;
    status?: boolean | null;
}

interface FormState {
    page_id: string;
    title: string;
    description: string;
    quote_text: string;
    signature_text: string;
    guru_name: string;
    status: boolean;
    backgroundFile: File | null;
    guruFile: File | null;
    vectorFile: File | null;
}

const HOME_PAGE_ID = "1";

const EMPTY_FORM: FormState = {
    page_id: HOME_PAGE_ID,
    title: "Meet Our Guru",
    description: "",
    quote_text: "",
    signature_text: "",
    guru_name: "",
    status: true,
    backgroundFile: null,
    guruFile: null,
    vectorFile: null,
};

export default function MeetGuruPage() {
    const [pages, setPages] = useState<CmsPage[]>([]);
    const [selectedPageId, setSelectedPageId] = useState<string>(HOME_PAGE_ID);

    const [existing, setExisting] = useState<MeetGuru | null>(null);
    const [loading, setLoading] = useState(true);

    const [form, setForm] = useState<FormState>(EMPTY_FORM);
    const [backgroundPreview, setBackgroundPreview] = useState<string | null>(null);
    const [guruPreview, setGuruPreview] = useState<string | null>(null);
    const [vectorPreview, setVectorPreview] = useState<string | null>(null);

    const [submitting, setSubmitting] = useState(false);
    const [error, setError] = useState<string | null>(null);

    const fetchPages = async () => {
        try {
            const response = await fetch("/api/admin/cms/pages");
            const result = await response.json();

            if (result.success) {
                setPages(result.data || []);
            }
        } catch (error) {
            console.error(error);
        }
    };

    const fetchMeetGuru = async (pageId: string) => {
        try {
            setLoading(true);

            const response = await fetch(
                `/api/admin/cms/meet-guru?page_id=${pageId}`
            );
            const result = await response.json();

            if (result.success) {
                const item: MeetGuru | null = result.data;

                setExisting(item);

                if (item) {
                    setForm({
                        page_id: item.page_id,
                        title: item.title ?? "Meet Our Guru",
                        description: item.description ?? "",
                        quote_text: item.quote_text ?? "",
                        signature_text: item.signature_text ?? "",
                        guru_name: item.guru_name ?? "",
                        status: item.status ?? true,
                        backgroundFile: null,
                        guruFile: null,
                        vectorFile: null,
                    });

                    setBackgroundPreview(item.background_image ?? null);
                    setGuruPreview(item.guru_image ?? null);
                    setVectorPreview(item.vector_image ?? null);
                } else {
                    setForm({ ...EMPTY_FORM, page_id: pageId });
                    setBackgroundPreview(null);
                    setGuruPreview(null);
                    setVectorPreview(null);
                }
            }
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchPages();
    }, []);

    useEffect(() => {
        fetchMeetGuru(selectedPageId);
    }, [selectedPageId]);

    const handleFileChange = (
        field: "backgroundFile" | "guruFile" | "vectorFile",
        setPreview: (v: string) => void
    ) => (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0] || null;

        setForm((prev) => ({ ...prev, [field]: file }));

        if (file) {
            setPreview(URL.createObjectURL(file));
        }
    };

    const handleSubmit = async () => {
        setError(null);

        if (!form.description.trim()) {
            setError("Description is required.");
            return;
        }

        try {
            setSubmitting(true);

            const payload = new FormData();

            if (existing) payload.append("id", existing.id);
            payload.append("page_id", form.page_id);
            payload.append("title", form.title.trim() || "Meet Our Guru");
            payload.append("description", form.description.trim());
            payload.append("quote_text", form.quote_text);
            payload.append("signature_text", form.signature_text);
            payload.append("guru_name", form.guru_name);
            payload.append("status", String(form.status));

            if (form.backgroundFile) payload.append("background_image", form.backgroundFile);
            if (form.guruFile) payload.append("guru_image", form.guruFile);
            if (form.vectorFile) payload.append("vector_image", form.vectorFile);

            const response = await fetch("/api/admin/cms/meet-guru", {
                method: existing ? "PUT" : "POST",
                body: payload,
            });

            const result = await response.json();

            if (!result.success) {
                setError(result.message || "Something went wrong.");
                return;
            }

            await fetchMeetGuru(selectedPageId);
        } catch (error) {
            console.error(error);
            setError("Something went wrong.");
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <div className="admin-page-wrapper">
            {/* Header */}
            <div className="admin-page-header mb-4">
                <div className="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h2 className="admin-page-title">Meet Our Guru</h2>
                        <p className="admin-page-subtitle">
                            Manage the Meet Our Guru section per page
                        </p>
                    </div>

                    <div className="d-flex align-items-center gap-2">
                        <label className="form-label mb-0 text-nowrap">Page:</label>

                        <select
                            className="form-select"
                            style={{ minWidth: 200 }}
                            value={selectedPageId}
                            onChange={(e) => setSelectedPageId(e.target.value)}
                        >
                            {pages.length === 0 && (
                                <option value={HOME_PAGE_ID}>Home</option>
                            )}

                            {pages.map((page) => (
                                <option key={page.id} value={page.id}>
                                    {page.page_name}
                                </option>
                            ))}
                        </select>
                    </div>
                </div>
            </div>

            {loading ? (
                <CustomLoader />
            ) : (
                <div className="admin-form-section card">
                    <div className="card-body">
                        {error && <div className="alert alert-danger">{error}</div>}

                        <div className="row g-3">
                            <div className="col-6">
                                <label className="form-label">
                                    Title <span className="text-danger">*</span>
                                </label>

                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="Meet Our Guru"
                                    value={form.title}
                                    onChange={(e) =>
                                        setForm((prev) => ({ ...prev, title: e.target.value }))
                                    }
                                />
                            </div>
                            <div className="col-12">
                                <label className="form-label">
                                    Description <span className="text-danger">*</span>
                                </label>

                                <textarea
                                    className="form-control"
                                    rows={3}
                                    placeholder="Under the guidance of experienced mentors..."
                                    value={form.description}
                                    onChange={(e) =>
                                        setForm((prev) => ({ ...prev, description: e.target.value }))
                                    }
                                />
                            </div>

                            <div className="col-12">
                                <label className="form-label">Quote Text</label>

                                <textarea
                                    className="form-control"
                                    rows={2}
                                    placeholder="Dance is not merely movement - it is devotion expressed through rhythm."
                                    value={form.quote_text}
                                    onChange={(e) =>
                                        setForm((prev) => ({ ...prev, quote_text: e.target.value }))
                                    }
                                />
                            </div>

                            <div className="col-md-6">
                                <label className="form-label">Signature Text</label>

                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="Vempati"
                                    value={form.signature_text}
                                    onChange={(e) =>
                                        setForm((prev) => ({ ...prev, signature_text: e.target.value }))
                                    }
                                />
                            </div>

                            <div className="col-md-6">
                                <label className="form-label">Guru Name / Attribution</label>

                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="- Padmabhushon Vempati Lineage"
                                    value={form.guru_name}
                                    onChange={(e) =>
                                        setForm((prev) => ({ ...prev, guru_name: e.target.value }))
                                    }
                                />
                            </div>

                            <div className="col-md-6">
                                <label className="form-label">Guru Image</label>

                                <input
                                    type="file"
                                    accept="image/*"
                                    className="form-control"
                                    onChange={handleFileChange("guruFile", setGuruPreview)}
                                />

                                {guruPreview && (
                                    <div className="mt-2">
                                        <Image
                                            src={guruPreview}
                                            alt="Guru preview"
                                            width={100}
                                            height={100}
                                            className="rounded border"
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>
                                )}
                            </div>

                            {/* <div className="col-md-4">
                                <label className="form-label">Background Image</label>

                                <input
                                    type="file"
                                    accept="image/*"
                                    className="form-control"
                                    onChange={handleFileChange("backgroundFile", setBackgroundPreview)}
                                />

                                {backgroundPreview && (
                                    <div className="mt-2">
                                        <Image
                                            src={backgroundPreview}
                                            alt="Background preview"
                                            width={100}
                                            height={100}
                                            className="rounded border"
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>
                                )}
                            </div>

                            <div className="col-md-4">
                                <label className="form-label">Vector Image</label>

                                <input
                                    type="file"
                                    accept="image/*"
                                    className="form-control"
                                    onChange={handleFileChange("vectorFile", setVectorPreview)}
                                />

                                {vectorPreview && (
                                    <div className="mt-2">
                                        <Image
                                            src={vectorPreview}
                                            alt="Vector preview"
                                            width={100}
                                            height={100}
                                            className="rounded border"
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>
                                )}
                            </div> */}

                            <div className="col-12">
                                <div className="form-check form-switch mt-2">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        id="meetGuruStatus"
                                        checked={form.status}
                                        onChange={(e) =>
                                            setForm((prev) => ({ ...prev, status: e.target.checked }))
                                        }
                                    />

                                    <label className="form-check-label" htmlFor="meetGuruStatus">
                                        {form.status ? "Active" : "Inactive"}
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div className="d-flex justify-content-end mt-4">
                            <button
                                className="admin-theme-btn"
                                disabled={submitting}
                                onClick={handleSubmit}
                            >
                                {submitting ? (
                                    <>
                                        <span className="spinner-border spinner-border-sm me-2"></span>
                                        Saving...
                                    </>
                                ) : existing ? (
                                    <>
                                        <i className="bi bi-check-circle me-1" />
                                        Update
                                    </>
                                ) : (
                                    <>
                                        <i className="bi bi-plus-circle me-1" /> Add
                                    </>
                                )}
                            </button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}