import { useState, useCallback } from "react";
import { debounce } from "lodash";
import { Head, Link, router } from "@inertiajs/react";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import {
    Search,
    TrendingUp,
    Eye,
    Trash2,
} from "lucide-react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import Pagination from "@/Components/shared/Pagination";
import { formatDate } from "@/lib/date";
import { formatNumber } from "@/utils/format";
import { Can } from "@/Components/Permission/Can";

interface SalesOrder {
    id: number;
    external_order_id: string;
    name: string | null;
    status: string;
    payment_method: string;
    total_amount: string;
    total_qty: string;
    sold_at: string;
    created_at: string;
    source: string;
    source_label: string | null;
}

interface PaginationLink {
    url: string | null;
    label: string;
    active: boolean;
}

interface Props {
    orders: {
        data: SalesOrder[];
        total: number;
        per_page: number;
        current_page: number;
        last_page: number;
        links: PaginationLink[];
    };
    filters: {
        search?: string;
        per_page?: string;
        source?: string;
        status?: string;
        payment_method?: string;
    };
}

// 來源篩選選項
const sourceOptions = [
    { label: "全部來源", value: "" },
    { label: "POS 收銀機", value: "pos" },
    { label: "販賣機", value: "vending" },
    { label: "手動匯入", value: "manual_import" },
];

const paymentMethodOptions = [
    { label: "全部付款方式", value: "" },
    { label: "現金", value: "cash" },
    { label: "信用卡", value: "credit_card" },
    { label: "Line Pay", value: "line_pay" },
    { label: "悠遊卡", value: "easycard" },
];

const getSourceLabel = (source: string): string => {
    switch (source) {
        case 'pos': return 'POS';
        case 'vending': return '販賣機';
        case 'manual_import': return '手動匯入';
        default: return source;
    }
};

const getSourceVariant = (source: string): StatusVariant => {
    switch (source) {
        case 'pos': return 'info';
        case 'vending': return 'warning';
        case 'manual_import': return 'neutral';
        default: return 'neutral';
    }
};

const getStatusVariant = (status: string): StatusVariant => {
    switch (status) {
        case 'completed': return 'success';
        case 'pending': return 'warning';
        case 'cancelled': return 'destructive';
        default: return 'neutral';
    }
};

const getStatusLabel = (status: string): string => {
    switch (status) {
        case 'completed': return "已完成";
        case 'pending': return "待處理";
        case 'cancelled': return "已取消";
        default: return status;
    }
};

export default function SalesOrderIndex({ orders, filters }: Props) {
    const [search, setSearch] = useState(filters.search || "");
    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");

    const debouncedFilter = useCallback(
        debounce((params: any) => {
            router.get(route("integration.sales-orders.index"), params, {
                preserveState: true,
                replace: true,
                preserveScroll: true,
            });
        }, 300),
        []
    );
    
    const handleSearchChange = (term: string) => {
        setSearch(term);
        debouncedFilter({
            ...filters,
            search: term,
            page: 1,
        });
    };

    const handleFilterChange = (key: string, value: string) => {
        debouncedFilter({
            ...filters,
            [key]: value || undefined,
            page: 1,
        });
    };

    const handlePerPageChange = (value: string) => {
        setPerPage(value);
        router.get(
            route("integration.sales-orders.index"),
            { ...filters, per_page: value, page: 1 },
            { preserveState: false, replace: true, preserveScroll: true }
        );
    };

    const startIndex = (orders.current_page - 1) * orders.per_page + 1;

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: "銷售管理", href: "#" },
                {
                    label: "銷售訂單管理",
                    href: route("integration.sales-orders.index"),
                    isPage: true,
                },
            ]}
        >
            <Head title="銷售訂單管理" />

            <div className="container mx-auto p-6 max-w-7xl">
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                            <TrendingUp className="h-6 w-6 text-primary-main" />
                            銷售訂單管理
                        </h1>
                        <p className="text-gray-500 mt-1">
                            檢視從 POS 或販賣機同步進來的銷售訂單紀錄
                        </p>
                    </div>
                </div>

                {/* 篩選列 */}
                <div className="bg-white rounded-xl border border-gray-200 p-4 mb-4">
                    <div className="flex flex-wrap items-center gap-3">
                        <div className="flex items-center gap-2 flex-1 min-w-[300px] relative">
                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                            <Input
                                type="text"
                                value={search}
                                onChange={(e) => handleSearchChange(e.target.value)}
                                placeholder="搜尋訂單名稱或外部訂單號 (External Order ID)..."
                                className="pl-10 pr-10 h-9"
                            />
                            {search && (
                                <button
                                    onClick={() => handleSearchChange("")}
                                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                                >
                                    <Trash2 className="h-4 w-4" />
                                </button>
                            )}
                        </div>
                        <SearchableSelect
                            value={filters.source || ""}
                            onValueChange={(val) => handleFilterChange("source", val)}
                            options={sourceOptions}
                            className="w-[140px] h-9"
                            showSearch={false}
                            placeholder="篩選來源"
                        />
                        <SearchableSelect
                            value={filters.payment_method || ""}
                            onValueChange={(val) => handleFilterChange("payment_method", val)}
                            options={paymentMethodOptions}
                            className="w-[160px] h-9"
                            showSearch={false}
                            placeholder="篩選付款方式"
                        />
                    </div>
                </div>

                {/* 表格 */}
                <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <Table>
                        <TableHeader className="bg-gray-50">
                            <TableRow>
                                <TableHead className="w-[50px] text-center">#</TableHead>
                                <TableHead>外部訂單號</TableHead>
                                <TableHead>名稱</TableHead>
                                <TableHead className="text-center">來源</TableHead>
                                <TableHead className="text-center">狀態</TableHead>
                                <TableHead>付款方式</TableHead>
                                <TableHead className="text-right">總數量</TableHead>
                                <TableHead className="text-right">總金額</TableHead>
                                <TableHead>銷售時間</TableHead>
                                <TableHead className="text-center">操作</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {orders.data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={10} className="text-center py-8 text-gray-500">
                                        無符合條件的資料
                                    </TableCell>
                                </TableRow>
                            ) : (
                                orders.data.map((order, index) => (
                                    <TableRow key={order.id}>
                                        <TableCell className="text-gray-500 font-medium text-center">
                                            {startIndex + index}
                                        </TableCell>
                                        <TableCell className="font-mono text-sm">
                                            {order.external_order_id}
                                        </TableCell>
                                        <TableCell className="max-w-[150px] truncate" title={order.name || ""}>
                                            {order.name || "—"}
                                        </TableCell>
                                        <TableCell className="text-center">
                                            <StatusBadge variant={getSourceVariant(order.source)}>
                                                {order.source_label || getSourceLabel(order.source)}
                                            </StatusBadge>
                                        </TableCell>
                                        <TableCell className="text-center">
                                            <StatusBadge variant={getStatusVariant(order.status)}>
                                                {getStatusLabel(order.status)}
                                            </StatusBadge>
                                        </TableCell>
                                        <TableCell className="text-gray-600">
                                            {order.payment_method || "—"}
                                        </TableCell>
                                        <TableCell className="text-right font-medium">
                                            {formatNumber(parseFloat(order.total_qty))}
                                        </TableCell>
                                        <TableCell className="text-right font-bold text-primary-main">
                                            ${formatNumber(parseFloat(order.total_amount))}
                                        </TableCell>
                                        <TableCell className="text-gray-500 text-sm">
                                            {formatDate(order.sold_at)}
                                        </TableCell>
                                        <TableCell className="text-center">
                                            <div className="flex items-center justify-center gap-2">
                                                <Can permission="sales_orders.view">
                                                    <Link href={route("integration.sales-orders.show", order.id)}>
                                                        <Button
                                                            variant="outline"
                                                            size="sm"
                                                            className="button-outlined-primary"
                                                            title="檢視明細"
                                                        >
                                                            <Eye className="h-4 w-4" />
                                                        </Button>
                                                    </Link>
                                                </Can>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>

                {/* 分頁 */}
                <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
                    <div className="flex items-center gap-4">
                        <div className="flex items-center gap-2 text-sm text-gray-500">
                            <span>每頁顯示</span>
                            <SearchableSelect
                                value={perPage}
                                onValueChange={handlePerPageChange}
                                options={[
                                    { label: "10", value: "10" },
                                    { label: "20", value: "20" },
                                    { label: "50", value: "50" },
                                    { label: "100", value: "100" },
                                ]}
                                className="w-[90px] h-8"
                                showSearch={false}
                            />
                            <span>筆</span>
                        </div>
                        <span className="text-sm text-gray-500">共 {orders.total} 筆資料</span>
                    </div>
                    <Pagination links={orders.links} />
                </div>
            </div>
        </AuthenticatedLayout>
    );
}