import { Head, Link } from '@inertiajs/react';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import AdminLayout from '@/layouts/admin-layout';
import { type Product } from '@/types';

export default function AdminInventoryReport({ lowStockProducts, outOfStockProducts }: { lowStockProducts: Product[]; outOfStockProducts: Product[] }) {
    return (
        <AdminLayout title="Inventory Report">
            <Head title="Inventory Report" />
            <div className="grid gap-4 md:grid-cols-2">
                <Card>
                    <CardHeader><CardTitle className="text-base text-yellow-600">⚠️ Low Stock ({lowStockProducts.length})</CardTitle></CardHeader>
                    <CardContent className="p-0">
                        <table className="w-full text-sm">
                            <thead className="border-b bg-slate-50 text-xs text-slate-500">
                                <tr>
                                    <th className="px-4 py-2 text-left">Product</th>
                                    <th className="px-4 py-2 text-right">Stock</th>
                                    <th className="px-4 py-2 text-right">Alert</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y">
                                {lowStockProducts.map((p) => (
                                    <tr key={p.id}>
                                        <td className="px-4 py-2">
                                            <Link href={`/admin/products/${p.id}`} className="text-indigo-600 hover:underline">{p.name}</Link>
                                            <div className="text-xs text-slate-400">{p.category?.name}</div>
                                        </td>
                                        <td className="px-4 py-2 text-right font-semibold text-yellow-600">{p.stock_qty}</td>
                                        <td className="px-4 py-2 text-right text-slate-400">{p.low_stock_alert}</td>
                                    </tr>
                                ))}
                                {!lowStockProducts.length && <tr><td colSpan={3} className="px-4 py-6 text-center text-slate-400">All good!</td></tr>}
                            </tbody>
                        </table>
                    </CardContent>
                </Card>

                <Card>
                    <CardHeader><CardTitle className="text-base text-red-600">🚫 Out of Stock ({outOfStockProducts.length})</CardTitle></CardHeader>
                    <CardContent className="p-0">
                        <table className="w-full text-sm">
                            <thead className="border-b bg-slate-50 text-xs text-slate-500">
                                <tr>
                                    <th className="px-4 py-2 text-left">Product</th>
                                    <th className="px-4 py-2 text-right">Stock</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y">
                                {outOfStockProducts.map((p) => (
                                    <tr key={p.id}>
                                        <td className="px-4 py-2">
                                            <Link href={`/admin/products/${p.id}`} className="text-indigo-600 hover:underline">{p.name}</Link>
                                            <div className="text-xs text-slate-400">{p.category?.name}</div>
                                        </td>
                                        <td className="px-4 py-2 text-right font-bold text-red-600">0</td>
                                    </tr>
                                ))}
                                {!outOfStockProducts.length && <tr><td colSpan={2} className="px-4 py-6 text-center text-slate-400">All in stock!</td></tr>}
                            </tbody>
                        </table>
                    </CardContent>
                </Card>
            </div>
        </AdminLayout>
    );
}
