import { Badge } from '@admin/components/ui/badge';
import { Card, CardContent } from '@admin/components/ui/card';
import { Calendar } from 'lucide-react';

interface NoteDetailsProps {
    note: {
        title: string;
        description: string;
        bullets?: string[];
        tag: string;
        date: string;
        color: string;
        people?: string[];
    };
    onClose?: () => void;
    mode?: 'sidebar' | 'modal';
}

export function NoteDetails({ note, onClose, mode = 'sidebar' }: NoteDetailsProps) {
    const isSidebar = mode === 'sidebar';

    const tagColors: Record<string, string> = {
        Work: 'bg-blue-100 text-blue-700 border-blue-200',
        Personal: 'bg-green-100 text-green-700 border-green-200',
        Important: 'bg-red-100 text-red-700 border-red-200',
        Social: 'bg-purple-100 text-purple-700 border-purple-200',
        High: 'bg-amber-100 text-amber-700 border-amber-200',
        Ideas: 'bg-cyan-100 text-cyan-700 border-cyan-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">
                        {/* Note Title with Tag */}
                        <div className="flex items-center justify-between">
                            <h2 className={`${isSidebar ? 'text-xl' : 'text-2xl'} font-semibold text-balance`}>{note.title}</h2>
                            <Badge className={tagColors[note.tag] || 'bg-gray-100 text-gray-700'}>{note.tag}</Badge>
                        </div>

                        {/* Date */}
                        <div className="flex items-center gap-2 text-muted-foreground">
                            <Calendar className="h-4 w-4" />
                            <span className="text-sm">{note.date}</span>
                        </div>

                        {/* Description */}
                        <p className={`leading-relaxed text-pretty text-muted-foreground ${isSidebar ? 'text-sm' : ''}`}>{note.description}</p>

                        {/* Bullet Points if available */}
                        {note.bullets && note.bullets.length > 0 && (
                            <div className={`space-y-${isSidebar ? '2' : '3'}`}>
                                <h3 className={`${isSidebar ? 'text-base' : 'text-lg'} font-semibold`}>Key Points:</h3>
                                <ul className={`list-inside list-disc space-y-${isSidebar ? '1' : '2'} text-muted-foreground`}>
                                    {note.bullets.map((bullet, index) => (
                                        <li key={index} className={`leading-relaxed ${isSidebar ? 'text-sm' : ''}`}>
                                            {bullet}
                                        </li>
                                    ))}
                                </ul>
                            </div>
                        )}
                    </div>
                </div>
            </CardContent>
        </Card>
    );
}

export const sampleNote = {
    title: 'Project Kickoff Meeting Notes',
    description:
        'Initial discussion about the new client project requirements, timeline, and deliverables. Key stakeholders were present and provided feedback.',
    bullets: ['Define project scope and objectives', 'Create initial timeline and milestones', 'Assign team roles and responsibilities'],
    tag: 'Work',
    date: 'Nov 15th, 2024',
    color: '#1f8ef1',
    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',
    ],
};