import AppLayout from '@/layouts/app-layout';
import { Head, router } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

export default function Notifications({ notifications, unreadCount }: any) {
    return (
        <AppLayout breadcrumbs={[{ title: 'Notifications', href: '/notifications' }]}>
            <Head title="Notifications" />
            <div className="space-y-6 p-4 md:p-6">
                <div className="flex items-center justify-between gap-3">
                    <div>
                        <h1 className="text-2xl font-semibold">Notifications</h1>
                        <p className="text-sm text-muted-foreground">Pemberitahuan aktivitas penting perusahaan Anda.</p>
                    </div>
                    {unreadCount > 0 && (
                        <Button variant="outline" onClick={() => router.put('/notifications/read-all')}>
                            Tandai semua sudah dibaca
                        </Button>
                    )}
                </div>
                <Card>
                    <CardHeader><CardTitle>{unreadCount} belum dibaca</CardTitle></CardHeader>
                    <CardContent className="space-y-3">
                        {notifications.data?.length ? notifications.data.map((item: any) => (
                            <div key={item.id} className={`rounded-lg border p-4 ${!item.read_at ? 'bg-muted/40' : ''}`}>
                                <div className="flex items-start justify-between gap-4">
                                    <div>
                                        <p className="font-medium">{item.title}</p>
                                        <p className="mt-1 text-sm text-muted-foreground">{item.message}</p>
                                        <p className="mt-2 text-xs text-muted-foreground">{new Date(item.created_at).toLocaleString('id-ID')}</p>
                                    </div>
                                    {!item.read_at && (
                                        <Button size="sm" variant="ghost" onClick={() => router.put(`/notifications/${item.id}/read`)}>
                                            Sudah dibaca
                                        </Button>
                                    )}
                                </div>
                            </div>
                        )) : <p className="text-sm text-muted-foreground">Belum ada notifikasi.</p>}
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}
