import { ArrowLeft, TrendingUp, FileJson } from "lucide-react";
import { Button } from "@/Components/ui/button";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, Link } from "@inertiajs/react";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import { StatusBadge, StatusVariant } from "@/Components/shared/StatusBadge";
import { formatDate } from "@/lib/date";
import { formatNumber } from "@/utils/format";

interface SalesOrderItem {
    id: number;
    product_name: string;
    quantity: string;
    price: string;
    total: string;
}

interface SalesOrder {
    id: number;
    external_order_id: string;
    status: string;
    payment_method: string;
    total_amount: string;
    sold_at: string;
    created_at: string;
    raw_payload: any;
    items: SalesOrderItem[];
    source: string;
    source_label: string | null;
}

const getSourceDisplay = (source: string, sourceLabel: string | null): string => {
    const base = source === 'pos' ? 'POS 收銀機'
        : source === 'vending' ? '販賣機'
            : source === 'manual_import' ? '手動匯入'
                : source;
    return sourceLabel ? `${base} (${sourceLabel})` : base;
};

interface Props {
    order: SalesOrder;
}

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 SalesOrderShow({ order }: Props) {
    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: "銷售管理", href: "#" },
                { label: "銷售訂單管理", href: route("integration.sales-orders.index") },
                { label: `訂單詳情 (#${order.external_order_id})`, href: "#", isPage: true },
            ]}
        >
            <Head title={`銷售訂單詳情 - ${order.external_order_id}`} />

            <div className="container mx-auto p-6 max-w-7xl">
                {/* Header */}
                <div className="mb-6">
                    <Link href={route("integration.sales-orders.index")}>
                        <Button
                            variant="outline"
                            className="gap-2 button-outlined-primary mb-6"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            返回銷售訂單列表
                        </Button>
                    </Link>

                    <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-6">
                        <div className="space-y-2">
                            <div className="flex items-center gap-2">
                                <h1 className="text-2xl font-bold text-grey-0 flex items-center gap-2">
                                    <TrendingUp className="h-6 w-6 text-primary-main" />
                                    銷售訂單: #{order.external_order_id}
                                </h1>
                                <StatusBadge variant={getStatusVariant(order.status)}>
                                    {getStatusLabel(order.status)}
                                </StatusBadge>
                            </div>
                            <p className="text-sm text-gray-500 font-medium flex flex-wrap items-center gap-2">
                                銷售時間: {formatDate(order.sold_at)} <span className="mx-1">|</span>
                                付款方式: {order.payment_method || "—"} <span className="mx-1">|</span>
                                訂單來源: {getSourceDisplay(order.source, order.source_label)} <span className="mx-1">|</span>
                                同步時間: {formatDate(order.created_at as any)}
                            </p>
                        </div>
                    </div>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    {/* 左側：基本資訊與明細 */}
                    <div className="lg:col-span-2 space-y-6">
                        {/* 項目清單卡片 */}
                        <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                            <div className="p-6 border-b border-gray-100">
                                <h2 className="text-lg font-bold text-gray-900 mb-0">銷售項目清單</h2>
                            </div>
                            <div className="p-6">
                                <div className="border rounded-lg overflow-hidden">
                                    <Table>
                                        <TableHeader>
                                            <TableRow className="bg-gray-50 hover:bg-gray-50">
                                                <TableHead className="w-[50px] text-center">#</TableHead>
                                                <TableHead>商品名稱</TableHead>
                                                <TableHead className="text-right">數量</TableHead>
                                                <TableHead className="text-right">單價</TableHead>
                                                <TableHead className="text-right">小計</TableHead>
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {order.items.map((item, index) => (
                                                <TableRow key={item.id}>
                                                    <TableCell className="text-gray-500 text-center">{index + 1}</TableCell>
                                                    <TableCell className="font-medium">{item.product_name}</TableCell>
                                                    <TableCell className="text-right font-medium">{formatNumber(parseFloat(item.quantity))}</TableCell>
                                                    <TableCell className="text-right text-gray-600">${formatNumber(parseFloat(item.price))}</TableCell>
                                                    <TableCell className="text-right font-bold text-primary-main">${formatNumber(parseFloat(item.total))}</TableCell>
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                </div>
                                <div className="mt-6 flex justify-end">
                                    <div className="w-full max-w-sm bg-primary-lightest/30 px-6 py-4 rounded-xl border border-primary-light/20 flex flex-col gap-3">
                                        <div className="flex justify-between items-end w-full">
                                            <span className="text-sm text-gray-500 font-medium mb-1">訂單總金額</span>
                                            <span className="text-2xl font-black text-primary-main">
                                                ${formatNumber(parseFloat(order.total_amount))}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* 右側：原始資料 (Raw Payload) */}
                    <div className="space-y-6">
                        <div className="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                            <h2 className="text-lg font-bold text-gray-900 mb-4 flex items-center gap-2">
                                <FileJson className="h-5 w-5 text-primary-main" />
                                API 原始資料
                            </h2>
                            <p className="text-sm text-gray-500 mb-4">
                                此區塊顯示同步時接收到的完整原始 JSON 內容，可用於排查資料問題。
                            </p>
                            <div className="bg-gray-50 border border-gray-100 rounded-lg p-4 overflow-auto max-h-[600px]">
                                <pre className="text-xs text-gray-700 font-mono">
                                    {JSON.stringify(order.raw_payload, null, 2)}
                                </pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
