import { Head, Link } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Button } from "@/Components/ui/button";
import { ArrowLeft, History } from "lucide-react";
import { Warehouse } from "@/types/warehouse";
import TransactionTable, { Transaction } from "@/Components/Warehouse/Inventory/TransactionTable";
import { getInventoryBreadcrumbs } from "@/utils/breadcrumb";

interface Props {
    warehouse: Warehouse;
    inventory: {
        id: string;
        productName: string;
        productCode: string;
        batchNumber?: string;
        quantity: number;
    };
    transactions: Transaction[];
}

export default function InventoryHistory({ warehouse, inventory, transactions }: Props) {
    return (
        <AuthenticatedLayout breadcrumbs={getInventoryBreadcrumbs(warehouse.id, warehouse.name, "庫存變動紀錄")}>
            <Head title={`庫存異動紀錄 - ${inventory.productName}`} />
            <div className="container mx-auto p-6 max-w-7xl">
                {/* Header */}
                <div className="mb-6">
                    <Link href={`/warehouses/${warehouse.id}/inventory`}>
                        <Button
                            variant="outline"
                            className="gap-2 button-outlined-primary mb-6"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            返回庫存管理
                        </Button>
                    </Link>

                    <div className="flex items-center justify-between">
                        <div>
                            <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                                <History className="h-6 w-6 text-primary-main" />
                                庫存異動紀錄
                            </h1>
                            <p className="text-gray-500 mt-1 flex gap-4 items-center">
                                <span>商品：<span className="font-medium text-gray-900">{inventory.productName}</span></span>
                                {inventory.productCode && <span className="text-gray-500">({inventory.productCode})</span>}
                                {inventory.batchNumber && (
                                    <span>批號：<span className="font-medium text-primary-main bg-primary-main/10 px-2 py-0.5 rounded border border-primary-main/20">{inventory.batchNumber}</span></span>
                                )}
                            </p>
                        </div>
                    </div>
                </div>

                {/* Content */}
                <div className="bg-white rounded-lg shadow-sm border p-6">
                    <div className="flex justify-between items-center mb-4 border-b pb-4">
                        <h3 className="font-medium text-lg">異動流水帳</h3>
                        <div className="text-sm text-gray-500">
                            目前庫存：<span className="font-medium text-gray-900">{inventory.quantity}</span>
                        </div>
                    </div>

                    <TransactionTable transactions={transactions} />
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
