import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { AlignLeft, Bell, Calendar, Link as LinkIcon, Mail, MapPin, Users, Video } from 'lucide-react';

interface EventDetailsProps {
    event: {
        title: string;
        description: string;
        agenda: string[];
        organizer: string;
        status: 'Upcoming' | 'In Progress' | 'Completed' | 'Cancelled';
        createdDate: string;
        eventDate: string;
        eventTime: string;
        type: 'Meeting' | 'Conference' | 'Workshop' | 'Webinar' | 'Other';
        location: string;
        attendees: string[];
        meetLink?: string;
    };
    onClose?: () => void;
    mode?: 'sidebar' | 'modal';
}

// Sample/Dummy data for demonstration
const sampleEvent = {
    title: 'Shanti chukti',
    description: 'Quarterly business review meeting to discuss project progress, challenges, and upcoming milestones.',
    agenda: [
        'Review Q4 performance metrics',
        'Discuss upcoming product launches',
        'Team feedback and concerns',
        'Budget allocation for next quarter',
    ],
    organizer: 'Shakib',
    status: 'Upcoming' as const,
    createdDate: '11/10/2025',
    eventDate: 'Monday, November 10',
    eventTime: 'The day before at 5pm',
    type: 'Meeting' as const,
    location: 'Dhaka College, New Market, Dhaka 1205, Bangladesh',
    attendees: ['shakibmiah554@gmail.com', 'john.doe@example.com', 'sarah.smith@example.com'],
    meetLink: 'meet.google.com/cpm-wsy-qwm',
};

export function EventDetails({ event, onClose, mode = 'sidebar' }: EventDetailsProps) {
    // Use sample data if event is not provided or for demo purposes
    const displayEvent = sampleEvent;

    const eventColor = 'bg-brand-500';
    const hasValidLocation = displayEvent.location && displayEvent.location !== 'Not specified';
    const hasValidOrganizer = displayEvent.organizer && displayEvent.organizer !== 'Unknown';
    const hasDescription = displayEvent.description && displayEvent.description !== 'Other' && displayEvent.description.trim() !== '';
    const hasAgenda = displayEvent.agenda && displayEvent.agenda.length > 0;
    const hasAttendees = displayEvent.attendees && displayEvent.attendees.length > 0;

    return (
        <div className="w-full space-y-0">
            {/* Header */}
            <div className="flex items-start gap-3 py-4">
                <div className={`mt-1 h-6 w-1.5 rounded-full ${eventColor}`} />
                <div className="flex-1 space-y-1">
                    <h1 className="text-2xl font-normal text-gray-900">{displayEvent.title}</h1>
                    <p className="text-sm text-gray-600">{displayEvent.eventDate}</p>
                </div>
            </div>

            {/* Action Buttons */}
            <div className="flex gap-2 py-3">
                <Button variant="outline" size="sm" className="gap-2">
                    <LinkIcon className="h-4 w-4" />
                    Invite via link
                </Button>
                {displayEvent.meetLink && (
                    <Button size="sm" className="gap-2 bg-brand-800 hover:bg-brand-700">
                        <Video className="h-4 w-4" />
                        Join with Google Meet
                    </Button>
                )}
            </div>

            <Separator />

            {/* Event Details */}
            <div className="space-y-4 py-4">
                {/* Location */}
                {hasValidLocation && (
                    <div className="flex items-start gap-4">
                        <MapPin className="mt-0.5 h-5 w-5 text-gray-500" />
                        <div className="flex-1">
                            <p className="text-sm font-medium text-gray-900">{displayEvent.location}</p>
                        </div>
                    </div>
                )}

                {/* Guests/Attendees */}
                {hasAttendees && (
                    <div className="flex items-start gap-4">
                        <Users className="mt-0.5 h-5 w-5 text-gray-500" />
                        <div className="flex-1 space-y-3">
                            <div>
                                <p className="text-sm font-medium text-gray-900">
                                    {displayEvent.attendees.length} guest{displayEvent.attendees.length > 1 ? 's' : ''}
                                </p>
                                <p className="text-xs text-gray-500">
                                    {displayEvent.attendees.filter((a) => a).length} yes,{' '}
                                    {displayEvent.attendees.length - displayEvent.attendees.filter((a) => a).length} awaiting
                                </p>
                            </div>
                            <div className="space-y-2">
                                {hasValidOrganizer && (
                                    <div className="flex items-center gap-2">
                                        <Avatar className="h-8 w-8">
                                            <AvatarFallback className="bg-gray-200 text-xs">
                                                {displayEvent.organizer.charAt(0).toUpperCase()}
                                            </AvatarFallback>
                                        </Avatar>
                                        <div className="flex-1">
                                            <p className="text-sm font-medium text-gray-900">{displayEvent.organizer}</p>
                                            <p className="text-xs text-gray-500">Organizer</p>
                                        </div>
                                    </div>
                                )}
                                {displayEvent.attendees.slice(0, 3).map((attendee, index) => (
                                    <div key={index} className="flex items-center gap-2">
                                        <Avatar className="h-8 w-8">
                                            <AvatarFallback className="bg-gray-200 text-xs">
                                                {attendee?.charAt(0).toUpperCase() || '?'}
                                            </AvatarFallback>
                                        </Avatar>
                                        <p className="text-sm text-gray-700">{attendee}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Mail className="h-4 w-4" />
                        </Button>
                    </div>
                )}

                {/* Description */}
                {hasDescription && (
                    <div className="flex items-start gap-4">
                        <AlignLeft className="mt-0.5 h-5 w-5 text-gray-500" />
                        <div className="flex-1">
                            <p className="text-sm text-gray-700">{displayEvent.description}</p>
                        </div>
                    </div>
                )}

                {/* Notification */}
                <div className="flex items-start gap-4">
                    <Bell className="mt-0.5 h-5 w-5 text-gray-500" />
                    <div className="flex-1">
                        <p className="text-sm text-gray-700">{displayEvent.eventTime}</p>
                    </div>
                </div>

                {/* Creator */}
                <div className="flex items-start gap-4">
                    <Calendar className="mt-0.5 h-5 w-5 text-gray-500" />
                    <div className="flex-1">
                        <p className="text-sm text-gray-700">{hasValidOrganizer ? displayEvent.organizer : 'Unknown'}</p>
                    </div>
                </div>
            </div>
        </div>
    );
}