"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 VisionMission {
    id: string;
    page_id: string;
    title?: string | null;
    vision_image?: string | null;
    mission_image?: string | null;
    vision_title?: string | null;
    vision_description?: string | null;
    mission_title?: string | null;
    mission_description?: string | null;
    status?: boolean | null;
}

interface FormState {
    page_id: string;
    title: string;
    vision_title: string;
    vision_description: string;
    mission_title: string;
    mission_description: string;
    status: boolean;
    visionImageFile: File | null;
    missionImageFile: File | null;
}

const HOME_PAGE_ID = "1";

const EMPTY_FORM: FormState = {
    page_id: HOME_PAGE_ID,
    title: "Our Vision & Mission",
    vision_title: "Our Vision",
    vision_description: "",
    mission_title: "Our Mission",
    mission_description: "",
    status: true,
    visionImageFile: null,
    missionImageFile: null,
};

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

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

    const [form, setForm] = useState<FormState>(EMPTY_FORM);
    const [visionPreview, setVisionPreview] = useState<string | null>(null);
    const [missionPreview, setMissionPreview] = 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 fetchVisionMission = async (pageId: string) => {
        try {
            setLoading(true);

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

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

                setExisting(item);

                if (item) {
                    setForm({
                        page_id: item.page_id,
                        title: item.title ?? "Our Vision & Mission",
                        vision_title: item.vision_title ?? "Our Vision",
                        vision_description: item.vision_description ?? "",
                        mission_title: item.mission_title ?? "Our Mission",
                        mission_description: item.mission_description ?? "",
                        status: item.status ?? true,
                        visionImageFile: null,
                        missionImageFile: null,
                    });

                    setVisionPreview(item.vision_image ?? null);
                    setMissionPreview(item.mission_image ?? null);
                } else {
                    setForm({ ...EMPTY_FORM, page_id: pageId });
                    setVisionPreview(null);
                    setMissionPreview(null);
                }
            }
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    };

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

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

    const handleVisionImageChange = (
        e: React.ChangeEvent<HTMLInputElement>
    ) => {
        const file = e.target.files?.[0] || null;

        setForm((prev) => ({
            ...prev,
            visionImageFile: file,
        }));

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

    const handleMissionImageChange = (
        e: React.ChangeEvent<HTMLInputElement>
    ) => {
        const file = e.target.files?.[0] || null;

        setForm((prev) => ({
            ...prev,
            missionImageFile: file,
        }));

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

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

        if (!form.vision_description.trim() || !form.mission_description.trim()) {
            setError("Vision and Mission descriptions are 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() || "Our Vision & Mission");
            payload.append("vision_title", form.vision_title.trim() || "Our Vision");
            payload.append("vision_description", form.vision_description.trim());
            payload.append("mission_title", form.mission_title.trim() || "Our Mission");
            payload.append("mission_description", form.mission_description.trim());
            payload.append("status", String(form.status));

            if (form.visionImageFile) {
                payload.append("vision_image", form.visionImageFile);
            }

            if (form.missionImageFile) {
                payload.append("mission_image", form.missionImageFile);
            }

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

            const result = await response.json();

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

            await fetchVisionMission(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">Our Vision & Mission</h2>
                        <p className="admin-page-subtitle">
                            Manage the Vision & Mission 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-12">
                                <label className="form-label">Section Title</label>

                                <input
                                    type="text"
                                    className="form-control"
                                    placeholder="Our Vision & Mission"
                                    value={form.title}
                                    onChange={(e) =>
                                        setForm((prev) => ({ ...prev, title: e.target.value }))
                                    }
                                />
                            </div>

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

                                <input
                                    type="file"
                                    accept="image/*"
                                    className="form-control"
                                    onChange={handleVisionImageChange}
                                />

                                {visionPreview && (
                                    <div className="mt-2">
                                        <Image
                                            src={visionPreview}
                                            alt="Vision"
                                            width={120}
                                            height={120}
                                            className="rounded border"
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>
                                )}
                            </div>

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

                                <input
                                    type="file"
                                    accept="image/*"
                                    className="form-control"
                                    onChange={handleMissionImageChange}
                                />

                                {missionPreview && (
                                    <div className="mt-2">
                                        <Image
                                            src={missionPreview}
                                            alt="Mission"
                                            width={120}
                                            height={120}
                                            className="rounded border"
                                            style={{ objectFit: "cover" }}
                                        />
                                    </div>
                                )}
                            </div>

                            <div className="col-md-6">
                                <label className="form-label">Vision Title</label>

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

                            <div className="col-md-6">
                                <label className="form-label">Mission Title</label>

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

                            <div className="col-md-6">
                                <label className="form-label">
                                    Vision Description <span className="text-danger">*</span>
                                </label>

                                <textarea
                                    className="form-control"
                                    rows={3}
                                    placeholder="To spread the beauty and discipline of Kuchipudi dance..."
                                    value={form.vision_description}
                                    onChange={(e) =>
                                        setForm((prev) => ({
                                            ...prev,
                                            vision_description: e.target.value,
                                        }))
                                    }
                                />
                            </div>

                            <div className="col-md-6">
                                <label className="form-label">
                                    Mission Description <span className="text-danger">*</span>
                                </label>

                                <textarea
                                    className="form-control"
                                    rows={3}
                                    placeholder="To provide authentic, accessible, and scientifically structured..."
                                    value={form.mission_description}
                                    onChange={(e) =>
                                        setForm((prev) => ({
                                            ...prev,
                                            mission_description: e.target.value,
                                        }))
                                    }
                                />
                            </div>

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

                                    <label className="form-check-label" htmlFor="visionMissionStatus">
                                        {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>
    );
}