// modals/lead_marketing/EventHistory.tsx

import Modal from "../../components/Modals";
import IconCalendar from "../../components/Icon/IconCalendar";
import IconMapPin from "../../components/Icon/IconMapPin";
import IconTarget from "../../components/Icon/IconTarget";
import IconUser from "../../components/Icon/IconUser";
import IconEdit from "../../components/Icon/IconEdit";
import IconUpload from "../../components/Icon/IconUpload";
import Badge from "../../components/Badge";
import { useEffect, useState } from "react";
import api from "../../api/axios";
import { toast } from "react-toastify";

interface Props {
    open: boolean;
    onClose: () => void;
    event: any;
}

interface TimelineItem {
    date: string;
    title: string;
    subtitle: string;
    action: string;
    changed_by: string;
    field_name?: string;
    old_value?: string;
    new_value?: string;
}

const EventHistory = ({ open, onClose, event }: Props) => {
    const [timeline, setTimeline] = useState<TimelineItem[]>([]);
    const [loading, setLoading] = useState(false);
    const [eventDetails, setEventDetails] = useState<any>(null);

    useEffect(() => {
        if (open && event) {
            fetchEventHistory();
        }
    }, [open, event]);

    const fetchEventHistory = async () => {
        setLoading(true);
        try {
            const response = await api.get(`/marketing/${event.id}/history`);
            if (response.data.status) {
                setTimeline(response.data.data.timeline || []);
                setEventDetails(response.data.data.event);
            }
        } catch (error) {
            console.error('Failed to fetch event history:', error);
            toast.error('Failed to load event history');
        } finally {
            setLoading(false);
        }
    };

    const formatDate = (date: string) => {
        if (!date) return 'N/A';
        return new Date(date).toLocaleDateString('en-US', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        });
    };

    const getActionIcon = (action: string) => {
        switch (action) {
            case 'created':
                return <IconCalendar className="w-4 h-4 text-green-600" />;
            case 'updated':
            case 'status_changed':
                return <IconEdit className="w-4 h-4 text-blue-600" />;
            case 'bulk_upload':
                return <IconUpload className="w-4 h-4 text-purple-600" />;
            default:
                return <IconUser className="w-4 h-4 text-gray-600" />;
        }
    };

    const getStatusColor = (status: string) => {
        switch (status) {
            case 'UPCOMING': return 'info';
            case 'ONGOING': return 'warning';
            case 'COMPLETED': return 'success';
            case 'CANCELLED': return 'danger';
            default: return 'secondary';
        }
    };

    if (!event) return null;

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Event History & Timeline"
            maxWidth="max-w-4xl"
        >
            {/* Event Info */}
            <div className="mb-4 p-4 border rounded-lg bg-gray-50">
                <div className="flex items-center justify-between gap-2">
                    <h3 className="text-lg font-semibold mb-2">
                        {eventDetails?.event_name || event?.event_name || event?.name}
                    </h3>
                    <Badge
                        color={getStatusColor(eventDetails?.status || event?.status)}
                        variant="outline"
                        className="text-xs"
                        rounded
                    >
                        {eventDetails?.status || event?.status}
                    </Badge>
                </div>

                <div className="text-sm text-gray-500 mt-1 flex flex-wrap gap-4">
                    <span className='flex justify-start gap-1 items-center'>
                        <IconCalendar className="w-4 h-4"/>
                        {formatDate(eventDetails?.start_date || event?.start_date)}
                        {eventDetails?.end_date && ` - ${formatDate(eventDetails.end_date)}`}
                    </span>
                    <span className='flex justify-start gap-1 items-center'>
                        <IconMapPin className="w-4 h-4"/>
                        {eventDetails?.location || event?.location}
                    </span>
                    <span className='flex justify-start gap-1 items-center'>
                        <IconTarget className="w-4 h-4"/>
                        Target: {eventDetails?.target_lead || event?.target || 0} Leads
                    </span>
                    <span>|</span>
                    <span>Current Leads: {eventDetails?.leads_count || event?.leads_count || 0}</span>
                </div>
            </div>

            {/* Timeline */}
            <div className="mb-4 p-4 border rounded-lg bg-white">
                <h4 className="text-md font-semibold mb-3 flex items-center gap-2">
                    <IconCalendar className="w-5 h-5" />
                    Event Timeline
                </h4>

                {loading ? (
                    <div className="text-center py-8">
                        <div className="animate-pulse">Loading timeline...</div>
                    </div>
                ) : timeline.length > 0 ? (
                    <div className="flow-root">
                        <ul className="-mb-8">
                            {timeline.map((item, index) => (
                                <li key={index}>
                                    <div className="relative pb-8">
                                        {index !== timeline.length - 1 && (
                                            <span
                                                className="absolute top-4 left-4 -ml-px h-full w-0.5 bg-[rgb(216,41,66)]"
                                                aria-hidden="true"
                                            />
                                        )}
                                        <div className="relative flex space-x-3">
                                            <div>
                                                <span className="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center ring-8 ring-white">
                                                    {getActionIcon(item.action)}
                                                </span>
                                            </div>
                                            <div className="flex-1 min-w-0">
                                                <div className="text-sm text-gray-500 mb-1">
                                                    {item.date}
                                                </div>
                                                <div className="text-sm font-semibold text-gray-900">
                                                    {item.title}
                                                </div>
                                                {item.subtitle && (
                                                    <div className="mt-1 text-sm text-gray-600">
                                                        {item.subtitle}
                                                    </div>
                                                )}
                                                {/* {item.field_name && item.old_value && item.new_value && (
                                                    <div className="mt-2 text-xs text-gray-500 bg-gray-50 p-2 rounded">
                                                        <span className="font-medium">Change details:</span>{' '}
                                                        {item.field_name}: "{item.old_value}" → "{item.new_value}"
                                                    </div>
                                                )} */}
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>
                ) : (
                    <div className="text-center py-8">
                        <p className="text-sm text-gray-500">
                            No activity found for this event.
                        </p>
                        <p className="text-xs text-gray-400 mt-2">
                            Timeline will appear when events are created or updated.
                        </p>
                    </div>
                )}
            </div>

            {/* Statistics Summary */}
            {/* {timeline.length > 0 && (
                <div className="grid grid-cols-3 gap-3 mt-4 p-3 bg-blue-50 rounded-lg">
                    <div className="text-center">
                        <div className="text-sm font-semibold text-blue-800">
                            Total Updates
                        </div>
                        <div className="text-2xl font-bold text-blue-600">
                            {timeline.length}
                        </div>
                    </div>
                    <div className="text-center">
                        <div className="text-sm font-semibold text-blue-800">
                            Lead Uploads
                        </div>
                        <div className="text-2xl font-bold text-blue-600">
                            {timeline.filter(t => t.action === 'bulk_upload').length}
                        </div>
                    </div>
                    <div className="text-center">
                        <div className="text-sm font-semibold text-blue-800">
                            Status Changes
                        </div>
                        <div className="text-2xl font-bold text-blue-600">
                            {timeline.filter(t => t.action === 'status_changed').length}
                        </div>
                    </div>
                </div>
            )} */}
        </Modal>
    );
};

export default EventHistory;