import { Head, Link } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import {
    AlertTriangle,
    MinusCircle,
    Clock,
    LayoutDashboard,
    TrendingUp,
    DollarSign,
    ClipboardCheck,
    Trophy,
    Package,
} from "lucide-react";
import {
    AreaChart,
    Area,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip as RechartsTooltip,
    ResponsiveContainer,
} from "recharts";
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from "@/Components/ui/tooltip";

interface Props {
    stats: {
        totalItems: number;
        lowStockCount: number;
        negativeCount: number;
        expiringCount: number;
        totalInventoryValue: number;
        thisMonthRevenue: number;
        pendingOrdersCount: number;
        pendingTransferCount: number;
        pendingProductionCount: number;
        todoCount: number;
        salesTrend: { date: string; amount: number }[];
        topSellingProducts: { name: string; amount: number }[];
        topInventoryValue: { name: string; code: string; value: number }[];
        topSellingByQuantity: { name: string; code: string; value: number }[];
        expiringSoon: { name: string; batch_number: string; expiry_date: string; quantity: number }[];
    };
}

export default function Dashboard({ stats }: Props) {
    const mainCards = [
        {
            label: "庫存總值",
            value: `NT$ ${Math.round(stats.totalInventoryValue).toLocaleString()}`,
            description: `品項總數: ${stats.totalItems}`,
            icon: <TrendingUp className="h-5 w-5" />,
            color: "text-blue-600",
            bgColor: "bg-blue-50",
            borderColor: "border-blue-100",
        },
        {
            label: "本月銷售營收",
            value: `NT$ ${Math.round(stats.thisMonthRevenue).toLocaleString()}`,
            description: "基於銷售導入數據",
            icon: <DollarSign className="h-5 w-5" />,
            color: "text-emerald-600",
            bgColor: "bg-emerald-50",
            borderColor: "border-emerald-100",
        },
        {
            label: "待辦任務",
            value: stats.todoCount,
            description: (
                <div className="flex items-center gap-1 font-medium">
                    <Link href={route('purchase-orders.index')} className="text-purple-600 hover:text-purple-800 hover:underline transition-colors">
                        採購: {stats.pendingOrdersCount}
                    </Link>
                    <span className="mx-1 text-gray-400">|</span>
                    <Link href={route('production-orders.index')} className="text-purple-600 hover:text-purple-800 hover:underline transition-colors">
                        生產: {stats.pendingProductionCount}
                    </Link>
                    <span className="mx-1 text-gray-400">|</span>
                    <Link href={route('inventory.transfer.index')} className="text-purple-600 hover:text-purple-800 hover:underline transition-colors">
                        調撥: {stats.pendingTransferCount}
                    </Link>
                </div>
            ),
            icon: <ClipboardCheck className="h-5 w-5" />,
            color: "text-purple-600",
            bgColor: "bg-purple-50",
            borderColor: "border-purple-100",
            alert: stats.todoCount > 0,
        },
    ];

    const alertCards = [
        {
            label: "低庫存",
            value: stats.lowStockCount,
            icon: <AlertTriangle className="h-4 w-4" />,
            color: "text-amber-600",
            bgColor: "bg-amber-50",
            borderColor: "border-amber-200",
            href: "/inventory/stock-query?status=low_stock",
            alert: stats.lowStockCount > 0,
        },
        {
            label: "負庫存",
            value: stats.negativeCount,
            icon: <MinusCircle className="h-4 w-4" />,
            color: "text-red-600",
            bgColor: "bg-red-50",
            borderColor: "border-red-200",
            href: "/inventory/stock-query?status=negative",
            alert: stats.negativeCount > 0,
        },
        {
            label: "即將過期",
            value: stats.expiringCount,
            icon: <Clock className="h-4 w-4" />,
            color: "text-yellow-600",
            bgColor: "bg-yellow-50",
            borderColor: "border-yellow-200",
            href: "/inventory/stock-query?status=expiring",
            alert: stats.expiringCount > 0,
        },
    ];

    return (
        <AuthenticatedLayout
            breadcrumbs={[{ label: "儀表板", href: "/", isPage: true }]}
        >
            <Head title="儀表板" />

            <div className="container mx-auto p-6 max-w-7xl space-y-8">
                <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                            <LayoutDashboard className="h-6 w-6 text-primary-main" />
                            系統概況
                        </h1>
                        <p className="text-gray-500 mt-1">即時分析營運數據與庫存警示</p>
                    </div>
                    <div className="flex gap-2">
                        {alertCards.map((card) => (
                            <Link key={card.label} href={card.href} className="flex-1 md:flex-none">
                                <div className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border ${card.borderColor} ${card.bgColor} transition-colors hover:shadow-sm`}>
                                    <div className={card.color}>{card.icon}</div>
                                    <span className="text-xs font-medium text-gray-700">{card.label}</span>
                                    <span className={`text-sm font-bold ${card.color}`}>{card.value}</span>
                                </div>
                            </Link>
                        ))}
                    </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {mainCards.map((card) => (
                        <div key={card.label} className={`relative rounded-xl border ${card.borderColor} bg-white p-6 shadow-sm`}>
                            <div className="flex items-center justify-between mb-4">
                                <div className={`p-2 rounded-lg ${card.bgColor} ${card.color}`}>
                                    {card.icon}
                                </div>
                                {card.alert && (
                                    <span className="flex h-2 w-2 rounded-full bg-red-500 animate-pulse" />
                                )}
                            </div>
                            <div className="text-sm font-medium text-gray-500 mb-1">{card.label}</div>
                            <div className="text-2xl font-bold text-gray-900 mb-1">{card.value}</div>
                            <div className="text-xs text-gray-400">{card.description}</div>
                        </div>
                    ))}
                </div>

                {/* 銷售趨勢 & 熱銷排行 */}
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* 銷售趨勢 - Area Chart */}
                    <div className="lg:col-span-2 bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="flex items-center gap-2 mb-6">
                            <TrendingUp className="h-5 w-5 text-emerald-500" />
                            <h2 className="text-lg font-semibold text-gray-800">近 30 日銷售趨勢</h2>
                        </div>
                        <div className="h-[300px] w-full">
                            <ResponsiveContainer width="100%" height="100%">
                                <AreaChart data={stats.salesTrend} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
                                    <defs>
                                        <linearGradient id="colorAmount" x1="0" y1="0" x2="0" y2="1">
                                            <stop offset="5%" stopColor="#10b981" stopOpacity={0.8} />
                                            <stop offset="95%" stopColor="#10b981" stopOpacity={0} />
                                        </linearGradient>
                                    </defs>
                                    <XAxis dataKey="date" />
                                    <YAxis tickFormatter={(value) => `$${value / 1000}k`} />
                                    <CartesianGrid strokeDasharray="3 3" vertical={false} />
                                    <RechartsTooltip formatter={(value) => `NT$ ${Number(value).toLocaleString()}`} />
                                    <Area type="monotone" dataKey="amount" stroke="#10b981" fillOpacity={1} fill="url(#colorAmount)" />
                                </AreaChart>
                            </ResponsiveContainer>
                        </div>
                    </div>

                    {/* 熱銷商品排行 (金額) - Bar Chart */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                        <div className="flex items-center gap-2 mb-6">
                            <Trophy className="h-5 w-5 text-indigo-500" />
                            <h2 className="text-lg font-semibold text-gray-800">熱銷金額 Top 5</h2>
                        </div>
                        <div className="h-[300px] w-full flex flex-col justify-center space-y-6">
                            {stats.topSellingProducts.length > 0 ? (
                                (() => {
                                    const maxAmount = Math.max(...stats.topSellingProducts.map(p => p.amount));
                                    return stats.topSellingProducts.map((product, index) => (
                                        <div key={index} className="space-y-1">
                                            <div className="flex justify-between items-end">
                                                <div className="min-w-0 flex-1 pr-4">
                                                    <Tooltip>
                                                        <TooltipTrigger asChild>
                                                            <span className="block text-sm font-medium text-gray-700 truncate cursor-help">
                                                                {product.name}
                                                            </span>
                                                        </TooltipTrigger>
                                                        <TooltipContent>
                                                            <p>{product.name}</p>
                                                        </TooltipContent>
                                                    </Tooltip>
                                                </div>
                                                <span className="text-sm font-bold text-indigo-600 shrink-0">
                                                    NT$ {product.amount.toLocaleString()}
                                                </span>
                                            </div>
                                            <div className="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                                                <div
                                                    className="bg-indigo-500 h-2 rounded-full transition-all duration-500"
                                                    style={{ width: `${(product.amount / maxAmount) * 100}%` }}
                                                />
                                            </div>
                                        </div>
                                    ));
                                })()
                            ) : (
                                <div className="h-full flex items-center justify-center text-gray-400 text-sm">暫無銷售數據</div>
                            )}
                        </div>
                    </div>
                </div>

                {/* 其他排行資訊 */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {/* 庫存積壓排行 */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div className="p-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
                            <DollarSign className="h-4 w-4 text-blue-500" />
                            <h3 className="font-semibold text-gray-700">庫存積壓 Top 5</h3>
                        </div>
                        <div className="divide-y divide-gray-100">
                            {stats.topInventoryValue.length > 0 ? stats.topInventoryValue.map((item, idx) => (
                                <div key={idx} className="p-3 flex items-center justify-between hover:bg-gray-50 transition-colors">
                                    <div className="min-w-0 flex-1 pr-2">
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <div className="text-sm font-medium text-gray-900 truncate cursor-help">{item.name}</div>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                <p>{item.name}</p>
                                            </TooltipContent>
                                        </Tooltip>
                                        <div className="text-xs text-gray-500 truncate">{item.code}</div>
                                    </div>
                                    <div className="text-right">
                                        <div className="text-sm font-bold text-gray-700">NT$ {item.value.toLocaleString()}</div>
                                    </div>
                                </div>
                            )) : (
                                <div className="p-8 text-center text-gray-400 text-sm">無庫存資料</div>
                            )}
                        </div>
                    </div>

                    {/* 熱銷數量排行 */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div className="p-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
                            <Package className="h-4 w-4 text-emerald-500" />
                            <h3 className="font-semibold text-gray-700">熱銷數量 Top 5</h3>
                        </div>
                        <div className="divide-y divide-gray-100">
                            {stats.topSellingByQuantity.length > 0 ? stats.topSellingByQuantity.map((item, idx) => (
                                <div key={idx} className="p-3 flex items-center justify-between hover:bg-gray-50 transition-colors">
                                    <div className="min-w-0 flex-1 pr-2">
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <div className="text-sm font-medium text-gray-900 truncate cursor-help">{item.name}</div>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                <p>{item.name}</p>
                                            </TooltipContent>
                                        </Tooltip>
                                        <div className="text-xs text-gray-500 truncate">{item.code}</div>
                                    </div>
                                    <div className="text-right">
                                        <div className="text-sm font-bold text-gray-700">{item.value.toLocaleString()} <span className="text-xs font-normal text-gray-500">件</span></div>
                                    </div>
                                </div>
                            )) : (
                                <div className="p-8 text-center text-gray-400 text-sm">無銷售資料</div>
                            )}
                        </div>
                    </div>

                    {/* 即將過期商品 */}
                    <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                        <div className="p-4 border-b border-gray-100 bg-gray-50 flex items-center gap-2">
                            <Clock className="h-4 w-4 text-red-500" />
                            <h3 className="font-semibold text-gray-700">即將過期 Top 5</h3>
                        </div>
                        <div className="divide-y divide-gray-100">
                            {stats.expiringSoon.length > 0 ? stats.expiringSoon.map((item, idx) => (
                                <div key={idx} className="p-3 flex items-center justify-between hover:bg-gray-50 transition-colors">
                                    <div className="min-w-0 flex-1 pr-2">
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                                <div className="text-sm font-medium text-gray-900 truncate cursor-help">{item.name}</div>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                <p>{item.name}</p>
                                            </TooltipContent>
                                        </Tooltip>
                                        <div className="text-xs text-gray-500 truncate">批號: {item.batch_number}</div>
                                    </div>
                                    <div className="text-right">
                                        <div className="text-sm font-bold text-red-600">{item.expiry_date}</div>
                                        <div className="text-xs text-gray-500">庫存: {item.quantity}</div>
                                    </div>
                                </div>
                            )) : (
                                <div className="p-8 text-center text-green-500 text-sm">目前無即將過期商品</div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}