import { Head } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { usePage } from '@inertiajs/react';
import { User2, Mail, ShieldCheck } from 'lucide-react';
import type { SharedData } from '@/types';
import type { BreadcrumbItem } from '@/types';

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Portal Saya', href: '/employee/index' },
];

export default function EmployeeIndex() {
    const { auth, flash } = usePage<any>().props;
    const user = auth.user;

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Portal Karyawan" />

            <div className="flex flex-1 flex-col gap-6 p-4 md:p-8">
                {/* Header Sambutan */}
                <div className="flex flex-col gap-1">
                    <h1 className="text-2xl font-semibold tracking-tight">
                        Selamat datang, {user.name}!
                    </h1>
                    <p className="text-sm text-muted-foreground">
                        Ini adalah portal SDM Anda. Pantau informasi akun Anda di sini.
                    </p>
                </div>

                {/* Flash Messages */}
                {flash?.error && (
                    <div className="p-4 bg-red-50 text-red-700 border border-red-200 rounded-md text-sm">
                        {flash.error}
                    </div>
                )}
                {flash?.success && (
                    <div className="p-4 bg-green-50 text-green-700 border border-green-200 rounded-md text-sm">
                        {flash.success}
                    </div>
                )}

                {/* Kartu Info Akun */}
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Nama Lengkap</CardTitle>
                            <User2 className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent>
                            <p className="text-lg font-semibold">{user.name}</p>
                            <p className="text-xs text-muted-foreground">Nama akun terdaftar</p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Alamat Email</CardTitle>
                            <Mail className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent>
                            <p className="text-lg font-semibold truncate">{user.email}</p>
                            <p className="text-xs text-muted-foreground">Email untuk login</p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                            <CardTitle className="text-sm font-medium">Hak Akses</CardTitle>
                            <ShieldCheck className="h-4 w-4 text-muted-foreground" />
                        </CardHeader>
                        <CardContent className="flex flex-col gap-2">
                            <Badge variant="secondary" className="w-fit capitalize">
                                {user.role}
                            </Badge>
                            <p className="text-xs text-muted-foreground">Role akun Anda saat ini</p>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </AppLayout>
    );
}
