import MainLayout from "@/Layouts/MainLayout";
import { Head, Link } from "@inertiajs/react";

export default function Dashboard({ stats, peminjaman_terbaru }) {
    const statCards = [
        {
            label: "Total Buku",
            value: stats.total_buku,
            icon: "📚",
            color: "bg-blue-500",
        },
        {
            label: "Anggota Aktif",
            value: stats.total_anggota,
            icon: "👥",
            color: "bg-green-500",
        },
        {
            label: "Sedang Dipinjam",
            value: stats.total_peminjaman,
            icon: "📋",
            color: "bg-yellow-500",
        },
        {
            label: "Terlambat Kembali",
            value: stats.total_terlambat,
            icon: "⚠️",
            color: "bg-red-500",
        },
    ];

    return (
        <MainLayout>
            <Head title="Dashboard" />

            <div className="space-y-6">
                <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>

                {/* Stat Cards */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {statCards.map((card) => (
                        <div
                            key={card.label}
                            className="bg-white rounded-xl shadow p-6 flex items-center gap-4"
                        >
                            <div
                                className={`${card.color} text-white text-3xl w-14 h-14 rounded-full flex items-center justify-center`}
                            >
                                {card.icon}
                            </div>
                            <div>
                                <p className="text-sm text-gray-500">
                                    {card.label}
                                </p>
                                <p className="text-2xl font-bold text-gray-800">
                                    {card.value}
                                </p>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Tabel Peminjaman Terbaru */}
                <div className="bg-white rounded-xl shadow p-6">
                    <div className="flex items-center justify-between mb-4">
                        <h2 className="text-lg font-semibold text-gray-700">
                            Peminjaman Terbaru
                        </h2>
                        <Link
                            href="/peminjaman"
                            className="text-indigo-600 hover:underline text-sm"
                        >
                            Lihat Semua →
                        </Link>
                    </div>
                    <div className="overflow-x-auto">
                        <table className="w-full text-sm">
                            <thead className="bg-gray-50">
                                <tr>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Anggota
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Buku
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Tgl Pinjam
                                    </th>
                                    <th className="px-4 py-3 text-left text-gray-600">
                                        Status
                                    </th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-gray-100">
                                {peminjaman_terbaru.map((p) => (
                                    <tr key={p.id} className="hover:bg-gray-50">
                                        <td className="px-4 py-3">
                                            {p.anggota?.nama}
                                        </td>
                                        <td className="px-4 py-3">
                                            {p.buku?.judul}
                                        </td>
                                        <td className="px-4 py-3">
                                            {p.tanggal_pinjam}
                                        </td>
                                        <td className="px-4 py-3">
                                            <StatusBadge status={p.status} />
                                        </td>
                                    </tr>
                                ))}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </MainLayout>
    );
}

function StatusBadge({ status }) {
    const colors = {
        dipinjam: "bg-yellow-100 text-yellow-800",
        dikembalikan: "bg-green-100 text-green-800",
        terlambat: "bg-red-100 text-red-800",
    };
    return (
        <span
            className={`px-2 py-1 rounded-full text-xs font-medium ${colors[status]}`}
        >
            {status}
        </span>
    );
}
