import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { Button } from '@admin/components/ui/button';
import { CalendarIcon, Eye } from 'lucide-react';

export interface Announcement {
    id: string;
    title: string;
    excerpt: string;
    date: string;
    description?: string;
    coverImage?: string;
    likes?: number;
    comments?: number;
    favorite?: boolean;
    archived?: boolean;
    author?: {
        name: string;
        role: string;
        avatar?: string;
    };
    category?: string;
    tags?: string[];
}

interface AnnouncementDetailsProps {
    announcement: Announcement | null;
    onBack: () => void;
    onEdit?: () => void;
}

export function AnnouncementDetails({ announcement, onBack, onEdit }: AnnouncementDetailsProps) {
    if (!announcement) {
        return null;
    }

    const formattedDate = new Date(announcement.date).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    });

    return (
        <div className="flex h-full flex-col">
            <div className="flex-1 overflow-y-auto">
                <div className="p-4">
                    <h1 className="text-xl font-bold">{announcement.title}</h1>
                    <div className="mt-2 flex items-center gap-2 text-gray-500">
                        <div className="flex items-center gap-2">
                            <CalendarIcon className="h-4 w-4" />
                            <span>{formattedDate}</span>
                        </div>
                        <div className="ml-auto flex items-center gap-1">
                            <p>0</p>
                            <Eye className="size-5 text-text-gray" />
                        </div>
                    </div>

                    {announcement.coverImage && (
                        <div className="my-4 h-50 w-full overflow-hidden rounded-lg">
                            <img src={announcement.coverImage} alt={announcement.title} className="h-full w-full object-cover" />
                        </div>
                    )}

                    <div className="space-y-6">
                        <div className="prose flex max-w-none flex-col">
                            <p className="">{announcement.excerpt}</p>
                            {announcement.description && (
                                <div className="mt-4 text-gray-700">
                                    {announcement.description.split('\n').map((paragraph, index) => (
                                        <p key={index} className="mb-4">
                                            {paragraph}
                                        </p>
                                    ))}
                                </div>
                            )}
                        </div>
                        {announcement.author && (
                            <div className="">
                                <h4 className="mb-2 text-sm font-medium">Posted by:</h4>
                                <div className="flex items-center gap-3">
                                    <Avatar className="h-8 w-8">
                                        <AvatarImage src={announcement?.author.avatar} alt={announcement.author.name} />
                                        <AvatarFallback>{announcement.author.name?.charAt(0)}</AvatarFallback>
                                    </Avatar>
                                    <div>
                                        <p className="text-sm font-medium">{announcement?.author.name}</p>
                                        <p className="text-xs text-gray-500">{announcement?.author.role}</p>
                                    </div>
                                    {onEdit && (
                                        <Button onClick={onEdit} variant="outline" size="sm" className="ml-auto">
                                            Edit
                                        </Button>
                                    )}
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}