'use client';
import React, { useState, useEffect, ChangeEvent, FormEvent } from 'react';
import IconTrashLines from '../icon/icon-trash-lines';
import axios from 'axios';
import Cookies from 'universal-cookie';
import { useRouter, useSearchParams } from 'next/navigation';
import { showMessage } from '@/utils/CommonFunction.utils';
import { buildApiUrl } from '@/utils/BaseUrl.utils';

interface FormValues {
    title: string;
    slug: string;
    date: string;
    time: string;
    location: string;
    image: File | null;
    existingImageUrl: string;
    link: string;
    btn_text: string;
    admission: string;
    description: string;
}

interface FormErrors {
    [key: string]: string;
}

const slugify = (text: string) => {
    if (!text) return '';
    return text
        .toString()
        .toLowerCase()
        .trim()
        .replace(/\s+/g, '-')
        .replace(/[^\w\-]+/g, '')
        .replace(/\-\-+/g, '-');
};

const EditUpcomingEventForm: React.FC = () => {
    const router = useRouter();
    const searchParams = useSearchParams();
    const id = searchParams.get('id');

    const [formData, setFormData] = useState<FormValues>({
        title: '',
        slug: '',
        date: '',
        time: '',
        location: '',
        image: null,
        existingImageUrl: '',
        link: '',
        btn_text: 'Details Coming Soon',
        admission: '',
        description: '',
    });

    const [errors, setErrors] = useState<FormErrors>({});
    const [previewUrl, setPreviewUrl] = useState<string | null>(null);
    const [loading, setLoading] = useState(false);
    const [fetching, setFetching] = useState(true);

    useEffect(() => {
        if (id) {
            fetchEventDetails(id);
        } else {
            showMessage('Invalid Event ID');
            router.push('/upcoming-events');
        }
    }, [id]);

    const fetchEventDetails = async (eventId: string) => {
        try {
            const cookies = new Cookies();
            const token = cookies.get('token');
            const res = await axios.get(buildApiUrl(`upcoming-events/${eventId}`), {
                headers: { Authorization: `Bearer ${token}` },
            });

            if (res?.data?.success && res?.data?.data) {
                const ev = res.data.data;
                const titleStr = ev.title || ev.eventtitle || '';
                const computedSlug = (ev.slug && ev.slug.trim()) ? ev.slug.trim() : slugify(titleStr);
                const computedLink = (ev.link && ev.link.trim()) ? ev.link.trim() : `/upcoming-event/${computedSlug}`;

                setFormData({
                    title: titleStr,
                    slug: computedSlug,
                    date: ev.date || ev.eventdate || '',
                    time: ev.time || '',
                    location: ev.location || '',
                    image: null,
                    existingImageUrl: ev.image || ev.eventimageurl || '',
                    link: computedLink,
                    btn_text: ev.btn_text || ev.btnText || 'Details Coming Soon',
                    admission: ev.admission || '',
                    description: ev.description || ev.desc || ev.eventdescription || '',
                });
                setPreviewUrl(ev.image || ev.eventimageurl || null);
            }
        } catch (error) {
            console.error('Error fetching event details:', error);
            showMessage('Failed to load event details');
        } finally {
            setFetching(false);
        }
    };

    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setFormData(prev => {
            const nextState = { ...prev, [name]: value };
            if (name === 'title') {
                const autoSlug = slugify(value);
                if (!prev.slug || prev.slug === slugify(prev.title)) {
                    nextState.slug = autoSlug;
                }
                if (!prev.link || prev.link === `/upcoming-event/${slugify(prev.title)}`) {
                    nextState.link = `/upcoming-event/${autoSlug}`;
                }
            }
            return nextState;
        });
    };

    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0] || null;
        setFormData(prev => ({
            ...prev,
            image: file,
        }));

        if (file) {
            const url = URL.createObjectURL(file);
            setPreviewUrl(url);
        } else {
            setPreviewUrl(formData.existingImageUrl || null);
        }
    };

    const validateForm = (): boolean => {
        const newErrors: FormErrors = {};

        if (!formData.title.trim()) newErrors.title = 'Event title is required';
        if (!formData.date.trim()) newErrors.date = 'Event date is required';

        if (formData.image && !formData.image.type.startsWith('image/')) {
            newErrors.image = 'Only image files are allowed';
        }

        setErrors(newErrors);
        return Object.keys(newErrors).length === 0;
    };

    const handleSubmit = async (e: FormEvent) => {
        e.preventDefault();
        if (!validateForm() || !id) return;

        setLoading(true);

        try {
            const cookies = new Cookies();
            const token = cookies.get('token');

            let imageUrl = formData.existingImageUrl;

            // Upload new image if selected
            if (formData.image && formData.image.type.startsWith('image/')) {
                const data = new FormData();
                data.append('file', formData.image);

                const imageUpload = await axios.post(buildApiUrl('upload/single'), data, {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        Authorization: `Bearer ${token}`,
                    },
                });

                imageUrl = imageUpload?.data?.data?.fullUrl || imageUpload?.data?.data?.path || imageUrl;
            }

            const updateData = {
                title: formData.title,
                slug: formData.slug,
                date: formData.date,
                time: formData.time,
                location: formData.location,
                image: imageUrl,
                link: formData.link,
                btn_text: formData.btn_text,
                admission: formData.admission,
                description: formData.description,
            };

            await axios.put(buildApiUrl(`upcoming-events/${id}`), updateData, {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
            });

            showMessage('Upcoming Event Updated Successfully', 'success');
            router.push('/upcoming-events');
        } catch (error: any) {
            console.error('Update error:', error);
            showMessage(error?.response?.data?.message || 'Failed to update upcoming event');
        } finally {
            setLoading(false);
        }
    };

    const handleImageDelete = () => {
        setFormData(prev => ({
            ...prev,
            image: null,
            existingImageUrl: '',
        }));
        setPreviewUrl(null);
    };

    if (fetching) {
        return (
            <div className="p-10 text-center text-gray-500">
                Loading event details...
            </div>
        );
    }

    return (
        <form onSubmit={handleSubmit} className="max-w-4xl mx-auto p-6 bg-white rounded shadow-md dark:bg-black dark:border dark:border-[#1B2E4B]">
            <h2 className="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Edit Upcoming Event</h2>

            <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                <div className="space-y-4">
                    {/* Event Title */}
                    <div>
                        <label htmlFor="title" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Event Title <span className="text-red-500">*</span>
                        </label>
                        <input
                            type="text"
                            name="title"
                            id="title"
                            value={formData.title}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                        {errors.title && <p className="text-red-500 text-sm mt-1">{errors.title}</p>}
                    </div>

                    {/* Event Date */}
                    <div>
                        <label htmlFor="date" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Event Date <span className="text-red-500">*</span>
                        </label>
                        <input
                            type="text"
                            name="date"
                            id="date"
                            value={formData.date}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                        {errors.date && <p className="text-red-500 text-sm mt-1">{errors.date}</p>}
                    </div>

                    {/* Event Time */}
                    <div>
                        <label htmlFor="time" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Event Time
                        </label>
                        <input
                            type="text"
                            name="time"
                            id="time"
                            value={formData.time}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>

                    {/* Venue / Location */}
                    <div>
                        <label htmlFor="location" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Venue / Location
                        </label>
                        <input
                            type="text"
                            name="location"
                            id="location"
                            value={formData.location}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>

                    {/* Button Text */}
                    <div>
                        <label htmlFor="btn_text" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Button Text
                        </label>
                        <input
                            type="text"
                            name="btn_text"
                            id="btn_text"
                            value={formData.btn_text}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>
                </div>

                <div className="space-y-4">
                    {/* Slug */}
                    <div>
                        <label htmlFor="slug" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Slug
                        </label>
                        <input
                            type="text"
                            name="slug"
                            id="slug"
                            value={formData.slug}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>

                    {/* Event Link */}
                    <div>
                        <label htmlFor="link" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Event Link
                        </label>
                        <input
                            type="text"
                            name="link"
                            id="link"
                            value={formData.link}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>

                    {/* Admission */}
                    <div>
                        <label htmlFor="admission" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Admission Details
                        </label>
                        <input
                            type="text"
                            name="admission"
                            id="admission"
                            value={formData.admission}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>

                    {/* Event Description */}
                    <div>
                        <label htmlFor="description" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Event Description
                        </label>
                        <textarea
                            name="description"
                            id="description"
                            rows={3}
                            value={formData.description}
                            onChange={handleChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                    </div>

                    {/* Image Upload */}
                    <div>
                        <label htmlFor="image" className="block font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Event Image
                        </label>
                        <input
                            type="file"
                            name="image"
                            id="image"
                            accept="image/*"
                            onChange={handleFileChange}
                            className="w-full border rounded px-3 py-2 dark:bg-gray-900 dark:border-gray-700 dark:text-white"
                        />
                        {errors.image && <p className="text-red-500 text-sm mt-1">{errors.image}</p>}

                        {/* Preview */}
                        {previewUrl && (
                            <div className="mt-3 relative w-40 h-40 border rounded overflow-hidden">
                                <img src={previewUrl} alt="Preview" className="w-full h-full object-cover" />
                                <button
                                    type="button"
                                    onClick={handleImageDelete}
                                    className="absolute top-1 right-1 bg-red-600 text-white p-1 rounded-full text-xs"
                                >
                                    <IconTrashLines />
                                </button>
                            </div>
                        )}
                    </div>
                </div>
            </div>

            {/* Action Buttons */}
            <div className="mt-8 flex justify-end gap-3">
                <button
                    type="button"
                    onClick={() => router.push('/upcoming-events')}
                    className="px-5 py-2 border rounded font-semibold text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800"
                >
                    Cancel
                </button>
                <button
                    type="submit"
                    disabled={loading}
                    className="px-6 py-2 bg-primary text-white rounded font-semibold hover:bg-primary/90 disabled:opacity-50"
                >
                    {loading ? 'Updating...' : 'Update Event'}
                </button>
            </div>
        </form>
    );
};

export default EditUpcomingEventForm;