/**
 * 進貨單列表表格
 */

import { useState, useMemo } from "react";
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import GoodsReceiptActions, { GoodsReceipt } from "./GoodsReceiptActions";
import GoodsReceiptStatusBadge from "./GoodsReceiptStatusBadge";
import CopyButton from "@/Components/shared/CopyButton";
import { formatCurrency, formatDate } from "@/utils/format";

interface GoodsReceiptTableProps {
    receipts: GoodsReceipt[];
}

type SortField = "code" | "type" | "warehouse_name" | "vendor_name" | "received_date" | "total_amount" | "status";
type SortDirection = "asc" | "desc" | null;

export default function GoodsReceiptTable({
    receipts,
}: GoodsReceiptTableProps) {
    const [sortField, setSortField] = useState<SortField | null>(null);
    const [sortDirection, setSortDirection] = useState<SortDirection>(null);

    // 處理排序
    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 typeMap: Record<string, string> = {
        standard: "標準採購",
        miscellaneous: "雜項入庫",
        other: "其他入庫",
    };

    // 排序後的進貨單列表
    const sortedReceipts = useMemo(() => {
        if (!sortField || !sortDirection) {
            return receipts;
        }

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

            switch (sortField) {
                case "code":
                    aValue = a.code;
                    bValue = b.code;
                    break;
                case "type":
                    aValue = typeMap[a.status] || a.status; // status here might actually refer to type in existing code logic? Let's use a.type if it exists.
                    // Checking if 'type' is in receipt - based on implementation plan we want it.
                    // Currently GoodsReceipt model HAS type.
                    // @ts-ignore
                    aValue = typeMap[a.type] || a.type || "";
                    // @ts-ignore
                    bValue = typeMap[b.type] || b.type || "";
                    break;
                case "warehouse_name":
                    aValue = a.warehouse?.name || "";
                    bValue = b.warehouse?.name || "";
                    break;
                case "vendor_name":
                    aValue = a.vendor?.name || "";
                    bValue = b.vendor?.name || "";
                    break;
                case "received_date":
                    aValue = a.received_date;
                    bValue = b.received_date;
                    break;
                case "total_amount":
                    aValue = a.items_sum_total_amount || 0;
                    bValue = b.items_sum_total_amount || 0;
                    break;
                case "status":
                    aValue = a.status;
                    bValue = b.status;
                    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);
            }
        });
    }, [receipts, sortField, sortDirection]);

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

    return (
        <div className="bg-white rounded-lg border shadow-sm overflow-hidden mt-6">
            <div className="overflow-x-auto">
                <Table>
                    <TableHeader>
                        <TableRow className="bg-gray-50/50">
                            <TableHead className="w-[50px] text-center">#</TableHead>
                            <TableHead className="w-[180px]">
                                <button
                                    onClick={() => handleSort("code")}
                                    className="flex items-center gap-2 hover:text-foreground transition-colors"
                                >
                                    進貨單編號
                                    <SortIcon field="code" />
                                </button>
                            </TableHead>
                            <TableHead className="w-[120px]">
                                <button
                                    onClick={() => handleSort("type")}
                                    className="flex items-center gap-2 hover:text-foreground transition-colors"
                                >
                                    入庫類型
                                    <SortIcon field="type" />
                                </button>
                            </TableHead>
                            <TableHead className="w-[180px]">
                                <button
                                    onClick={() => handleSort("warehouse_name")}
                                    className="flex items-center gap-2 hover:text-foreground transition-colors"
                                >
                                    入庫倉庫
                                    <SortIcon field="warehouse_name" />
                                </button>
                            </TableHead>
                            <TableHead className="w-[180px]">
                                <button
                                    onClick={() => handleSort("vendor_name")}
                                    className="flex items-center gap-2 hover:text-foreground transition-colors"
                                >
                                    供應商
                                    <SortIcon field="vendor_name" />
                                </button>
                            </TableHead>
                            <TableHead className="w-[150px]">
                                <button
                                    onClick={() => handleSort("received_date")}
                                    className="flex items-center gap-2 hover:text-foreground transition-colors"
                                >
                                    進貨日期
                                    <SortIcon field="received_date" />
                                </button>
                            </TableHead>
                            <TableHead className="w-[140px] text-right">
                                <button
                                    onClick={() => handleSort("total_amount")}
                                    className="flex items-center gap-2 ml-auto hover:text-foreground transition-colors"
                                >
                                    總金額
                                    <SortIcon field="total_amount" />
                                </button>
                            </TableHead>
                            <TableHead className="w-[120px] text-center">
                                <button
                                    onClick={() => handleSort("status")}
                                    className="flex items-center gap-2 mx-auto hover:text-foreground transition-colors"
                                >
                                    狀態
                                    <SortIcon field="status" />
                                </button>
                            </TableHead>
                            <TableHead className="text-center">操作</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {sortedReceipts.length === 0 ? (
                            <TableRow>
                                <TableCell colSpan={9} className="text-center text-muted-foreground py-12">
                                    尚無進貨單
                                </TableCell>
                            </TableRow>
                        ) : (
                            sortedReceipts.map((receipt, index) => (
                                <TableRow key={receipt.id}>
                                    <TableCell className="text-gray-500 font-medium text-center">
                                        {index + 1}
                                    </TableCell>
                                    <TableCell>
                                        <div className="flex items-center gap-1.5">
                                            <span className="font-mono text-sm font-medium">{receipt.code}</span>
                                            <CopyButton text={receipt.code} label="複製單號" />
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <span className="text-sm">
                                            {/* @ts-ignore */}
                                            {typeMap[receipt.type] || receipt.type || "-"}
                                        </span>
                                    </TableCell>
                                    <TableCell>
                                        <div className="text-sm font-medium text-gray-900">
                                            {receipt.warehouse?.name || "-"}
                                        </div>
                                    </TableCell>
                                    <TableCell>
                                        <span className="text-sm text-gray-700">{receipt.vendor?.name || "-"}</span>
                                    </TableCell>
                                    <TableCell>
                                        <span className="text-sm text-gray-500">{formatDate(receipt.received_date)}</span>
                                    </TableCell>
                                    <TableCell className="text-right">
                                        <span className="font-semibold text-gray-900">
                                            {formatCurrency(receipt.items_sum_total_amount)}
                                        </span>
                                    </TableCell>
                                    <TableCell className="text-center">
                                        <GoodsReceiptStatusBadge status={receipt.status} />
                                    </TableCell>
                                    <TableCell className="text-center">
                                        <GoodsReceiptActions receipt={receipt} />
                                    </TableCell>
                                </TableRow>
                            ))
                        )}
                    </TableBody>
                </Table>
            </div>
        </div>
    );
}