import { Badge } from '@admin/components/ui/badge';
import { Button } from '@admin/components/ui/button';
import { Card, CardContent } from '@admin/components/ui/card';
import { Clock, Share2, Star, User } from 'lucide-react';

interface ReminderDetailsProps {
    reminder: {
        title: string;
        description: string;
        status: 'Planned' | 'In Progress' | 'Completed';
        priority: 'low' | 'medium' | 'high';
        date: string;
        time?: string;
        people?: string[];
    };
    onClose?: () => void;
    mode?: 'sidebar' | 'modal';
    mode?: 'sidebar' | 'modal';
}

export function ReminderDetails({ reminder, onClose, mode = 'sidebar' }: ReminderDetailsProps) {
    const isSidebar = mode === 'sidebar';

    const statusColors = {
        Planned: 'bg-blue-100 text-blue-700 border-blue-200',
        'In Progress': 'bg-amber-100 text-amber-700 border-amber-200',
        Completed: 'bg-green-100 text-green-700 border-green-200',
    };

    const priorityColors = {
        low: 'bg-green-100 text-green-700 border-green-200',
        medium: 'bg-amber-100 text-amber-700 border-amber-200',
        high: 'bg-red-100 text-red-700 border-red-200',
    };

    return (
        <Card className={`mx-auto w-full border-none ${isSidebar ? 'sidebar-mode' : ''} px-0 pt-0`}>
            <CardContent className="px-1">
                <div className={`grid ${isSidebar ? 'grid-cols-1' : 'md:grid-cols-3'} gap-6`}>
                    {/* Main Content - Left Side */}
                    <div className="space-y-4 lg:col-span-2">
                        {/* Reminder Title with Status */}
                        <div className="flex items-center justify-between">
                            <h2 className={`text-lg font-semibold text-balance`}>{reminder.title}</h2>
                        </div>

                        {/* Date and Time */}
                        <div className="flex items-center gap-4 text-muted-foreground">
                            <div className="flex items-center gap-1">
                                <span className="text-sm font-semibold">Date:</span>
                                {/* <Calendar className="h-4 w-4" /> */}
                                <span className="text-sm font-medium">{reminder.date}</span>
                            </div>
                            {reminder.time && (
                                <>
                                    <span className="text-sm font-medium">Time:</span>
                                    <div className="flex items-center gap-1">
                                        <Clock className="h-4 w-4" />
                                        <span className="text-sm">{reminder.time}</span>
                                    </div>
                                </>
                            )}
                        </div>
                        {/* Priority */}
                        <div className="flex items-center gap-2">
                            <span className="text-sm font-semibold">Status:</span>
                            <Badge className={statusColors[reminder.status] || 'bg-gray-100 text-gray-700'}>{reminder.status}</Badge>
                        </div>
                        {/* Priority */}
                        <div className="flex items-center gap-2">
                            <span className="text-sm font-semibold">Priority:</span>
                            <Badge className={priorityColors[reminder.priority] || 'bg-gray-100 text-gray-700'}>
                                {reminder.priority.charAt(0).toUpperCase() + reminder.priority.slice(1)}
                            </Badge>
                        </div>

                        {/* Description */}
                        {reminder.description && (
                            <>
                                <span className="text-sm font-semibold">Description:</span>
                                <p className={`leading-relaxed text-pretty text-muted-foreground ${isSidebar ? 'text-sm' : ''}`}>
                                    {reminder.description}
                                </p>
                            </>
                        )}

                        {/* People associated */}
                        {reminder.people && reminder.people.length > 0 && (
                            <div className="mt-4">
                                <h3 className={`${isSidebar ? 'text-base' : 'text-lg'} mb-2 font-semibold`}>Participants:</h3>
                                <div className="flex -space-x-2">
                                    {reminder.people.map((person, index) => (
                                        <img key={index} src={person} alt="Person" className="size-8 rounded-full border-2 border-background" />
                                    ))}
                                </div>
                            </div>
                        )}
                    </div>

                    {/* Side Panel for Actions - Right Side (hidden on sidebar mode) */}
                    {!isSidebar && (
                        <div className="space-y-6 rounded-xl border p-4 lg:col-span-1">
                            {/* Action Buttons */}
                            <div className="space-y-2">
                                <Button variant="outline" className="w-full justify-start">
                                    <Share2 className="mr-2 h-4 w-4" /> Share
                                </Button>
                                <Button variant="outline" className="w-full justify-start">
                                    <User className="mr-2 h-4 w-4" /> Assign to
                                </Button>
                                <Button variant="outline" className="w-full justify-start">
                                    <Star className="mr-2 h-4 w-4" /> Mark Important
                                </Button>
                            </div>
                        </div>
                    )}
                </div>
            </CardContent>
        </Card>
    );
}

export const sampleReminder = {
    title: 'Team Weekly Standup',
    description:
        'Weekly team meeting to discuss progress, blockers, and upcoming work for the sprint. All team members should come prepared with updates.',
    status: 'Planned' as const,
    priority: 'medium' as const,
    date: 'Nov 15th, 2024',
    time: '10:00 AM',
    people: [
        'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=32&h=32&fit=crop&crop=face',
        'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=32&h=32&fit=crop&crop=face',
    ],
};