/**
 * 庫存表格元件 (扁平化列表版)
 * 顯示庫存項目列表，不進行折疊分組
 */

import { useState, useMemo } from "react";
import {
    AlertTriangle,
    Trash2,
    Eye,
    CheckCircle,
    Package,
    ArrowUpDown,
    ArrowUp,
    ArrowDown
} from "lucide-react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import { Button } from "@/Components/ui/button";
import { Badge } from "@/Components/ui/badge";
import { WarehouseInventory } from "@/types/warehouse";
import { getSafetyStockStatus } from "@/utils/inventory";
import { formatDate } from "@/utils/format";
import { Can } from "@/Components/Permission/Can";

interface InventoryTableProps {
    inventories: WarehouseInventory[];
    onView: (id: string) => void;
    onDelete: (id: string) => void;
}

type SortField = "productName" | "quantity" | "lastInboundDate" | "lastOutboundDate" | "safetyStock" | "status";
type SortDirection = "asc" | "desc" | null;

export default function InventoryTable({
    inventories,
    onView,
    onDelete,
}: InventoryTableProps) {
    const [sortField, setSortField] = useState<SortField | null>("status");
    const [sortDirection, setSortDirection] = useState<SortDirection>("asc"); // "asc" for status means Priority High (Low Stock) first

    // 處理排序
    const handleSort = (field: SortField) => {
        if (sortField === field) {
            if (sortDirection === "asc") {
                setSortDirection("desc");
            } else if (sortDirection === "desc") {
                setSortDirection(null);
                setSortField(null);
            } else {
                setSortDirection("asc");
            }
        } else {
            setSortField(field);
            setSortDirection("asc");
        }
    };

    // 排序後的列表
    const sortedInventories = useMemo(() => {
        if (!sortField || !sortDirection) {
            return inventories;
        }

        return [...inventories].sort((a, b) => {
            let aValue: string | number;
            let bValue: string | number;

            // Status Priority map for sorting: Low > Near > Normal
            const statusPriority: Record<string, number> = {
                "低於": 1,
                "接近": 2,
                "正常": 3
            };

            switch (sortField) {
                case "productName":
                    aValue = a.productName;
                    bValue = b.productName;
                    break;
                case "quantity":
                    aValue = a.quantity;
                    bValue = b.quantity;
                    break;
                case "lastInboundDate":
                    aValue = a.lastInboundDate || "";
                    bValue = b.lastInboundDate || "";
                    break;
                case "lastOutboundDate":
                    aValue = a.lastOutboundDate || "";
                    bValue = b.lastOutboundDate || "";
                    break;
                case "safetyStock":
                    aValue = a.safetyStock ?? -1; // null as -1 or Infinity depending on desired order
                    bValue = b.safetyStock ?? -1;
                    break;
                case "status":
                    const aStatus = (a.safetyStock !== null && a.safetyStock !== undefined) ? getSafetyStockStatus(a.quantity, a.safetyStock) : "正常";
                    const bStatus = (b.safetyStock !== null && b.safetyStock !== undefined) ? getSafetyStockStatus(b.quantity, b.safetyStock) : "正常";
                    aValue = statusPriority[aStatus] || 3;
                    bValue = statusPriority[bStatus] || 3;
                    break;
                default:
                    return 0;
            }

            if (typeof aValue === "string" && typeof bValue === "string") {
                return sortDirection === "asc"
                    ? aValue.localeCompare(bValue, "zh-TW")
                    : bValue.localeCompare(aValue, "zh-TW");
            } else {
                return sortDirection === "asc"
                    ? (aValue as number) - (bValue as number)
                    : (bValue as number) - (aValue as number);
            }
        });
    }, [inventories, sortField, sortDirection]);

    const SortIcon = ({ field }: { field: SortField }) => {
        if (sortField !== field) {
            return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
        }
        if (sortDirection === "asc") {
            return <ArrowUp className="h-4 w-4 text-primary ml-1" />;
        }
        if (sortDirection === "desc") {
            return <ArrowDown className="h-4 w-4 text-primary ml-1" />;
        }
        return <ArrowUpDown className="h-4 w-4 text-muted-foreground ml-1" />;
    };

    if (inventories.length === 0) {
        return (
            <div className="text-center py-12 text-gray-400">
                <Package className="h-12 w-12 mx-auto mb-4 opacity-20" />
                <p>無符合條件的品項</p>
                <p className="text-sm mt-1">請調整搜尋或篩選條件</p>
            </div>
        );
    }

    // 獲取狀態徽章
    const getStatusBadge = (quantity: number, safetyStock: number) => {
        const status = getSafetyStockStatus(quantity, safetyStock);
        switch (status) {
            case "正常":
                return (
                    <Badge className="bg-green-100 text-green-700 border-green-300 hover:bg-green-100">
                        <CheckCircle className="mr-1 h-3 w-3" />
                        正常
                    </Badge>
                );
            case "接近": // 數量 <= 安全庫存 * 1.2
                return (
                    <Badge className="bg-yellow-100 text-yellow-700 border-yellow-300 hover:bg-yellow-100">
                        <AlertTriangle className="mr-1 h-3 w-3" />
                        接近
                    </Badge>
                );
            case "低於": // 數量 < 安全庫存
                return (
                    <Badge className="bg-orange-100 text-orange-700 border-orange-300 hover:bg-orange-100">
                        <AlertTriangle className="mr-1 h-3 w-3" />
                        低於
                    </Badge>
                );
            default:
                return null;
        }
    };

    return (
        <div className="overflow-x-auto">
            <Table>
                <TableHeader>
                    <TableRow className="bg-gray-50/50">
                        <TableHead className="w-[50px] text-center">#</TableHead>
                        <TableHead className="w-[25%]">
                            <button onClick={() => handleSort("productName")} className="flex items-center hover:text-gray-900">
                                商品資訊 <SortIcon field="productName" />
                            </button>
                        </TableHead>
                        <TableHead className="w-[10%] text-right">
                            <div className="flex justify-end">
                                <button onClick={() => handleSort("quantity")} className="flex items-center hover:text-gray-900">
                                    庫存數量 <SortIcon field="quantity" />
                                </button>
                            </div>
                        </TableHead>
                        <TableHead className="w-[12%]">
                            <button onClick={() => handleSort("lastInboundDate")} className="flex items-center hover:text-gray-900">
                                最新入庫 <SortIcon field="lastInboundDate" />
                            </button>
                        </TableHead>
                        <TableHead className="w-[12%]">
                            <button onClick={() => handleSort("lastOutboundDate")} className="flex items-center hover:text-gray-900">
                                最新出庫 <SortIcon field="lastOutboundDate" />
                            </button>
                        </TableHead>
                        <TableHead className="w-[10%] text-right">
                            <div className="flex justify-end">
                                <button onClick={() => handleSort("safetyStock")} className="flex items-center hover:text-gray-900">
                                    安全庫存 <SortIcon field="safetyStock" />
                                </button>
                            </div>
                        </TableHead>
                        <TableHead className="w-[10%] text-center">
                            <div className="flex justify-center">
                                <button onClick={() => handleSort("status")} className="flex items-center hover:text-gray-900">
                                    狀態 <SortIcon field="status" />
                                </button>
                            </div>
                        </TableHead>
                        <TableHead className="w-[10%] text-center">操作</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {sortedInventories.map((item, index) => (
                        <TableRow key={item.id}>
                            <TableCell className="text-gray-500 font-medium text-center">
                                {index + 1}
                            </TableCell>
                            {/* 商品資訊 */}
                            <TableCell>
                                <div className="flex flex-col">
                                    <div className="font-medium text-gray-900">{item.productName}</div>
                                    <div className="text-xs text-gray-500">{item.productCode}</div>
                                </div>
                            </TableCell>

                            {/* 庫存數量 */}
                            <TableCell className="text-right">
                                <span className="font-medium text-gray-900">{item.quantity}</span>
                                <span className="text-xs text-gray-500 ml-1">{item.unit}</span>
                            </TableCell>

                            {/* 最新入庫 */}
                            <TableCell className="text-gray-600">
                                {item.lastInboundDate ? formatDate(item.lastInboundDate) : "-"}
                            </TableCell>

                            {/* 最新出庫 */}
                            <TableCell className="text-gray-600">
                                {item.lastOutboundDate ? formatDate(item.lastOutboundDate) : "-"}
                            </TableCell>

                            {/* 安全庫存 */}
                            <TableCell className="text-right">
                                {item.safetyStock !== null && item.safetyStock >= 0 ? (
                                    <span className="font-medium text-gray-900">
                                        {item.safetyStock} <span className="text-xs text-gray-500 font-normal">{item.unit}</span>
                                    </span>
                                ) : (
                                    <span className="text-gray-400 text-xs">未設定</span>
                                )}
                            </TableCell>

                            {/* 狀態 */}
                            <TableCell className="text-center">
                                {(item.safetyStock !== null && item.safetyStock !== undefined) ? getStatusBadge(item.quantity, item.safetyStock) : (
                                    <Badge variant="outline" className="text-gray-400 border-dashed">正常</Badge>
                                )}
                            </TableCell>

                            {/* 操作 */}
                            <TableCell className="text-center">
                                <div className="flex justify-center gap-2">
                                    <Button
                                        variant="outline"
                                        size="sm"
                                        onClick={() => onView(item.id)}
                                        title="查看庫存流水帳"
                                        className="button-outlined-primary"
                                    >
                                        <Eye className="h-4 w-4" />
                                    </Button>
                                    <Can permission="inventory.delete">
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={() => onDelete(item.id)}
                                            title="刪除"
                                            className="button-outlined-error"
                                        >
                                            <Trash2 className="h-4 w-4" />
                                        </Button>
                                    </Can>
                                </div>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
}