import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, Link, router } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { Plus, Search, FileText } from 'lucide-react';
import { Input } from '@/Components/ui/input';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/Components/ui/table';
import { Badge } from '@/Components/ui/badge';
import Pagination from '@/Components/shared/Pagination';
import { useState } from 'react';
import { Can } from '@/Components/Permission/Can';

export default function GoodsReceiptIndex({ receipts, filters }: any) {
    const [search, setSearch] = useState(filters.search || '');

    const handleSearch = (e: React.FormEvent) => {
        e.preventDefault();
        router.get(route('goods-receipts.index'), { search }, { preserveState: true });
    };

    return (
        <AuthenticatedLayout
            breadcrumbs={[
                { label: '供應鏈管理', href: '#' },
                { label: '進貨單管理', href: route('goods-receipts.index'), isPage: true },
            ]}
        >
            <Head title="進貨單管理" />

            <div className="container mx-auto p-6 max-w-7xl">
                {/* Header Section */}
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
                            <FileText className="h-6 w-6 text-primary-main" />
                            進貨單管理
                        </h1>
                        <p className="text-gray-500 mt-1">
                            管理所有的進貨單據，包含新增、查詢與查看詳細內容。
                        </p>
                    </div>
                    <Can permission="goods_receipts.create">
                        <Link href={route('goods-receipts.create')}>
                            <Button className="button-filled-primary">
                                <Plus className="mr-2 h-4 w-4" />
                                新增進貨單
                            </Button>
                        </Link>
                    </Can>
                </div>

                {/* Filter Bar */}
                <div className="bg-white p-4 rounded-xl border border-gray-200 mb-6 shadow-sm">
                    <form onSubmit={handleSearch} className="flex gap-4 items-end">
                        <div className="space-y-1">
                            <label className="text-xs font-medium text-gray-500">關鍵字搜尋</label>
                            <div className="flex gap-2">
                                <Input
                                    type="text"
                                    placeholder="搜尋單號..."
                                    value={search}
                                    onChange={(e) => setSearch(e.target.value)}
                                    className="w-64 h-9"
                                />
                                <Button type="submit" variant="outline" size="sm" className="h-9 w-9 p-0 button-outlined-primary">
                                    <Search className="h-4 w-4" />
                                </Button>
                            </div>
                        </div>
                    </form>
                </div>

                {/* Table Section */}
                <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
                    <Table>
                        <TableHeader className="bg-gray-50">
                            <TableRow>
                                <TableHead className="w-[180px]">單號</TableHead>
                                <TableHead>倉庫</TableHead>
                                <TableHead>供應商ID</TableHead>
                                <TableHead className="w-[120px] text-center">進貨日期</TableHead>
                                <TableHead className="w-[100px] text-center">狀態</TableHead>
                                <TableHead className="w-[100px] text-center">操作</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {receipts.data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={6} className="h-24 text-center text-gray-500">
                                        尚無進貨紀錄
                                    </TableCell>
                                </TableRow>
                            ) : (
                                receipts.data.map((receipt: any) => (
                                    <TableRow key={receipt.id}>
                                        <TableCell className="font-medium text-gray-900">{receipt.code}</TableCell>
                                        <TableCell className="text-gray-600">{receipt.warehouse?.name}</TableCell>
                                        <TableCell className="text-gray-600">{receipt.vendor_id}</TableCell>
                                        <TableCell className="text-center text-gray-600">{receipt.received_date}</TableCell>
                                        <TableCell className="text-center">
                                            <Badge variant="outline" className={
                                                receipt.status === 'completed'
                                                    ? 'bg-green-50 text-green-700 border-green-200'
                                                    : 'bg-gray-50 text-gray-700 border-gray-200'
                                            }>
                                                {receipt.status}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="text-center">
                                            <div className="flex items-center justify-center gap-2">
                                                <Can permission="goods_receipts.view">
                                                    <Button variant="outline" size="sm" className="button-outlined-primary" title="查看詳情">
                                                        <FileText className="h-4 w-4" />
                                                    </Button>
                                                </Can>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>

                <div className="mt-6">
                    <Pagination links={receipts.links} />
                </div>
            </div>
        </AuthenticatedLayout>
    );
}
