"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import ToastMessage from "@/components/common/ToastMessage";
import { Trash, X } from "lucide-react";
import Tiptap from "@/components/TipTap/tiptap";
import axios from "axios";
import Image from "next/image";

interface SlidersFormProps {
    initialData?: sliderType | null;
}

const SlidersForm: React.FC<SlidersFormProps> = ({ initialData }) => {
    const router = useRouter();
    const [loading, setLoading] = useState(false);

    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [isActive, setIsActive] = useState(false);
    const [imageCount, setImageCount] = useState(0);

    const [images, setImages] = useState<File[]>([]);
    const [imagePreviews, setImagePreviews] = useState<string[]>([]);

    const [deleteImages, setDeleteImages] = useState<string[]>([]);

    useEffect(() => {
        if (initialData) {
            setTitle(initialData.title);
            setDescription(initialData.description);
            setIsActive(initialData.is_active);

            // If backend already has images
            if (initialData.attachments?.length) {
                setImagePreviews(initialData.attachments.map((att) => att.file_url));
            }
        }
    }, [initialData]);


    const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (!e.target.files) return;

        const files = Array.from(e.target.files);
        setImages((prev) => [...prev, ...files]);

        const previews = files.map((file) => URL.createObjectURL(file));
        setImagePreviews((prev) => [...prev, ...previews]);
    };

    const removeImage = (file_url: string, index: number) => {

        if (initialData && initialData.attachments) {



            var inImages = true;

            initialData.attachments.forEach((att, i) => {
                if (att.file_url === file_url) {
                    // setImages((prev) => prev.filter((_, j) => j !== i));
                    setDeleteImages((prev) => [...prev, att.file_id]);
                    inImages = false;
                    setImagePreviews((prev) => prev.filter((_, i) => i !== index));
                }
            }
            );

            if (inImages) {
                setImages((prev) => prev.filter((_, i) => i !== index));
                setImagePreviews((prev) => prev.filter((_, i) => i !== index));
            }


        }
        else {
            setImages((prev) => prev.filter((_, i) => i !== index));

            setImagePreviews((prev) => prev.filter((_, i) => i !== index));
        }


    };


    const onSubmit = async (e: React.MouseEvent<HTMLButtonElement>) => {
        e.preventDefault();
        setLoading(true);

        if (!title || !description) {
            ToastMessage("Missing fields", "error");
            setLoading(false);
            return;
        }

        const apiUrl = initialData
            ? `/api/admin/sliders/${initialData.id}`
            : "/api/admin/sliders";

        const formData = new FormData();
        formData.append("title", title);
        formData.append("description", description);
        formData.append("is_active", String(isActive));
        formData.append("imagesCount", String(images.length));

        images.forEach((img, index) => {
            formData.append(`images${index}`, img);
        });

        if (initialData) {
            formData.append("deleteImagesCount", String(deleteImages.length));
            deleteImages.forEach((imgId, index) => {
                formData.append(`deleteImages${index}`, imgId);
            });
        }

        try {
            const response = initialData
                ? await axios.put(apiUrl, formData)
                : await axios.post(apiUrl, formData);

            if (response.status === 200) {
                ToastMessage(
                    initialData ? "Slider updated successfully" : "Slider created successfully",
                    "success"
                );
                router.push("/admin/sliders");
            }
        } catch (error) {
            ToastMessage("Operation failed", "error");
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="max-w-6xl mx-auto bg-white rounded-2xl shadow-lg p-6 space-y-6">
            {/* Header */}
            <div className="flex items-center justify-between">
                <h1 className="text-2xl font-bold text-gray-900">
                    {initialData ? "Edit Slider" : "Add Slider"}
                </h1>

                {initialData && (
                    <Button
                        onClick={() => {
                            if (confirm("Are you sure you want to delete this slider?")) {
                                axios.delete(`/api/admin/sliders/${initialData.id}`).then((res) => {
                                    if (res.status === 200) {
                                        ToastMessage("Slider deleted", "success");
                                        router.push("/admin/sliders");
                                    } else {
                                        ToastMessage("Deletion failed", "error");
                                    }
                                });
                            }
                        }}
                        className="bg-red-600 hover:bg-red-700 text-white rounded-full p-2"
                    >
                        <Trash size={18} />
                    </Button>
                )}
            </div>

            {/* Form */}
            <form className="space-y-6">
                {/* Title */}
                <div className="space-y-2">
                    <label className="text-sm font-semibold text-gray-700">
                        Slider Title
                    </label>
                    <input
                        type="text"
                        value={title}
                        onChange={(e) => setTitle(e.target.value)}
                        className="w-full rounded-lg border px-3 py-2"
                        required
                    />
                </div>

                {/* Description */}
                <div className="space-y-2">
                    <label className="text-sm font-semibold text-gray-700">
                        Description
                    </label>
                    <div className="rounded-lg border overflow-hidden">
                        <Tiptap
                            content={description}
                            onUpdate={(content: string) => setDescription(content)}
                        />
                    </div>
                </div>


                <div className="space-y-2 flex items-center">
                    <label className="flex items-center space-x-3">Is Active</label>
                    <input
                        type="checkbox"
                        checked={isActive}
                        onChange={(e) => setIsActive(e.target.checked)}
                        className="ml-2"
                    />
                </div>


                {/* IMAGE UPLOAD */}
                <div className="space-y-2">
                    <label className="text-sm font-semibold text-gray-700">
                        Slider Images
                    </label>

                    <input
                        type="file"
                        multiple
                        accept="image/*"
                        onChange={handleImageChange}
                        className="block w-full text-sm"
                    />

                    {/* Image Preview */}
                    {imagePreviews.length > 0 && (
                        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                            {imagePreviews.map((src, index) => (
                                <div
                                    key={index}
                                    className="relative group border rounded-lg overflow-hidden"
                                >
                                    <Image
                                        src={src}
                                        alt="preview"
                                        width={400}   // specify width
                                        height={200}  // specify height
                                        className="object-cover w-full h-32"
                                        unoptimized={src.startsWith("blob:")} // for local previews
                                    />
                                    <button
                                        type="button"
                                        onClick={() => removeImage(src, index)}
                                        className="absolute top-1 right-1 bg-red-600 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition"
                                    >
                                        <X size={14} />
                                    </button>
                                </div>
                            ))}
                        </div>
                    )}
                </div>

                {/* Actions */}
                <div className="flex items-center gap-4 pt-4">
                    <button
                        onClick={onSubmit}
                        disabled={loading}
                        className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg"
                    >
                        {loading ? "Saving..." : "Save"}
                    </button>

                    <button
                        type="button"
                        onClick={() => router.back()}
                        className="bg-gray-100 hover:bg-gray-200 px-6 py-2 rounded-lg"
                    >
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    );
};

export default SlidersForm;