star-erp/resources/js/Pages/UtilityFee/Index.tsx

import { useState } from "react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { SearchableSelect } from "@/Components/ui/searchable-select";
import {
    Plus,
    Search,
    X,
    Pencil,
    Trash2,
    FileText,
    Calendar,
    RotateCcw,
    ArrowUpDown,
    ArrowUp,
    ArrowDown,
    ChevronDown,
    ChevronUp
} from 'lucide-react';
import { Label } from "@/Components/ui/label";
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
import { Head, router } from "@inertiajs/react";
import Pagination from "@/Components/shared/Pagination";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/Components/ui/table";
import { Badge } from "@/Components/ui/badge";
import { toast } from "sonner";
import UtilityFeeDialog, { UtilityFee } from "@/Components/UtilityFee/UtilityFeeDialog";
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
} from "@/Components/ui/alert-dialog";
import { Can } from "@/Components/Permission/Can";
import { formatDateWithDayOfWeek, formatInvoiceNumber, getDateRange } from "@/utils/format";

interface PageProps {
    fees: {
        data: UtilityFee[];
        links: any[];
        from: number;
        to: number;
        total: number;
        current_page: number;
        last_page: number;
        per_page: number;
    };
    availableCategories: string[];
    filters: {
        search?: string;
        category?: string;
        date_start?: string;
        date_end?: string;
        sort_field?: string | null;
        sort_direction?: "asc" | "desc" | null;
        per_page?: string;
    };
}

export default function UtilityFeeIndex({ fees, availableCategories, filters }: PageProps) {
    const [searchTerm, setSearchTerm] = useState(filters.search || "");
    const [categoryFilter, setCategoryFilter] = useState<string>(filters.category || "all");
    const [dateStart, setDateStart] = useState(filters.date_start || "");
    const [dateEnd, setDateEnd] = useState(filters.date_end || "");
    const [dateRangeType, setDateRangeType] = useState("custom");
    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");

    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
    const [editingFee, setEditingFee] = useState<UtilityFee | null>(null);
    const [deletingFeeId, setDeletingFeeId] = useState<number | null>(null);

    // Advanced Filter Toggle
    const [showAdvancedFilter, setShowAdvancedFilter] = useState(
        !!(filters.date_start || filters.date_end)
    );

    // Sorting
    const [sortField, setSortField] = useState<string | null>(filters.sort_field || null);
    const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || null);

    const handleDateRangeChange = (type: string) => {
        setDateRangeType(type);
        if (type === "custom") return;

        const { start, end } = getDateRange(type);
        setDateStart(start);
        setDateEnd(end);
    };

    const handleSearch = () => {
        router.get(
            route("utility-fees.index"),
            {
                search: searchTerm,
                category: categoryFilter,
                date_start: dateStart,
                date_end: dateEnd,
                sort_field: sortField,
                sort_direction: sortDirection,
                per_page: perPage,
            },
            { preserveState: true }
        );
    };

    const handlePerPageChange = (value: string) => {
        setPerPage(value);
        router.get(
            route("utility-fees.index"),
            {
                search: searchTerm,
                category: categoryFilter,
                date_start: dateStart,
                date_end: dateEnd,
                sort_field: sortField,
                sort_direction: sortDirection,
                per_page: value,
            },
            { preserveState: false, preserveScroll: true }
        );
    };

    const handleClearFilters = () => {
        setSearchTerm("");
        setCategoryFilter("all");
        setDateStart("");
        setDateEnd("");
        setDateRangeType("custom");
        router.get(route("utility-fees.index"), { per_page: perPage }, { preserveState: false });
    };

    const handleSort = (field: string) => {
        let newField: string | null = field;
        let newDirection: "asc" | "desc" | null = "asc";

        if (sortField === field) {
            if (sortDirection === "asc") {
                newDirection = "desc";
            } else {
                newDirection = null;
                newField = null;
            }
        }

        setSortField(newField);
        setSortDirection(newDirection);

        router.get(
            route("utility-fees.index"),
            {
                search: searchTerm,
                category: categoryFilter,
                date_start: dateStart,
                date_end: dateEnd,
                sort_field: newField,
                sort_direction: newDirection,
                per_page: perPage,
            },
            { preserveState: true }
        );
    };

    const openAddDialog = () => {
        setEditingFee(null);
        setIsDialogOpen(true);
    };

    const openEditDialog = (fee: UtilityFee) => {
        setEditingFee(fee);
        setIsDialogOpen(true);
    };

    const confirmDelete = (id: number) => {
        setDeletingFeeId(id);
        setIsDeleteDialogOpen(true);
    };

    const handleDelete = () => {
        if (deletingFeeId) {
            router.delete(route("utility-fees.destroy", deletingFeeId), {
                onSuccess: () => {
                    toast.success("紀錄已刪除");
                    setIsDeleteDialogOpen(false);
                },
            });
        }
    };

    const SortIcon = ({ field }: { field: string }) => {
        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" />;
    };

    return (
        <AuthenticatedLayout breadcrumbs={[{ label: "財務管理", href: "#" }, { label: "公共事業費", href: route("utility-fees.index"), isPage: true }]}>
            <Head title="公共事業費管理" />

            <div className="container mx-auto p-6 max-w-7xl">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                    <div>
                        <h1 className="text-2xl font-bold text-grey-0 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="utility_fees.create">
                        <Button
                            onClick={openAddDialog}
                            className="button-filled-primary gap-2"
                        >
                            <Plus className="h-4 w-4" /> 新增紀錄
                        </Button>
                    </Can>
                </div>

                <div className="bg-white rounded-xl shadow-sm border border-grey-4 p-5 mb-6">
                    <div className="flex flex-col gap-4">
                        {/* Row 1: Search and Category */}
                        <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
                            <div className="md:col-span-8 space-y-1">
                                <Label className="text-xs font-medium text-grey-1">關鍵字搜尋</Label>
                                <div className="relative">
                                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                                    <Input
                                        placeholder="搜尋發票號碼、說明或備註..."
                                        value={searchTerm}
                                        onChange={(e) => setSearchTerm(e.target.value)}
                                        onKeyDown={(e) => e.key === "Enter" && handleSearch()}
                                        className="pl-10 h-9 block"
                                    />
                                    {searchTerm && (
                                        <button
                                            onClick={() => setSearchTerm("")}
                                            className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors"
                                        >
                                            <X className="h-4 w-4" />
                                        </button>
                                    )}
                                </div>
                            </div>
                            <div className="md:col-span-4 space-y-1">
                                <Label className="text-xs font-medium text-grey-1">費用類別</Label>
                                <SearchableSelect
                                    value={categoryFilter}
                                    onValueChange={setCategoryFilter}
                                    options={[
                                        { label: "所有類別", value: "all" },
                                        ...availableCategories.map(c => ({ label: c, value: c }))
                                    ]}
                                    placeholder="篩選類別"
                                    className="h-9"
                                />
                            </div>
                        </div>

                        {/* Row 2: Date Filters (Collapsible) */}
                        {showAdvancedFilter && (
                            <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end animate-in fade-in slide-in-from-top-2 duration-200">
                                <div className="md:col-span-6 space-y-2">
                                    <Label className="text-xs font-medium text-grey-1">快速時間區間</Label>
                                    <div className="flex flex-wrap gap-2">
                                        {[
                                            { label: "今日", value: "today" },
                                            { label: "昨日", value: "yesterday" },
                                            { label: "本週", value: "this_week" },
                                            { label: "本月", value: "this_month" },
                                            { label: "上月", value: "last_month" },
                                        ].map((opt) => (
                                            <Button
                                                key={opt.value}
                                                size="sm"
                                                onClick={() => handleDateRangeChange(opt.value)}
                                                className={
                                                    dateRangeType === opt.value
                                                        ? 'button-filled-primary h-9 px-4 shadow-sm'
                                                        : 'button-outlined-primary h-9 px-4 bg-white'
                                                }
                                            >
                                                {opt.label}
                                            </Button>
                                        ))}
                                    </div>
                                </div>

                                <div className="md:col-span-6">
                                    <div className="grid grid-cols-2 gap-4 items-end">
                                        <div className="space-y-1">
                                            <Label className="text-xs text-grey-2 font-medium">開始日期</Label>
                                            <div className="relative">
                                                <Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
                                                <Input
                                                    type="date"
                                                    value={dateStart}
                                                    onChange={(e) => {
                                                        setDateStart(e.target.value);
                                                        setDateRangeType('custom');
                                                    }}
                                                    className="pl-9 block w-full h-9 bg-white"
                                                />
                                            </div>
                                        </div>
                                        <div className="space-y-1">
                                            <Label className="text-xs text-grey-2 font-medium">結束日期</Label>
                                            <div className="relative">
                                                <Calendar className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400 pointer-events-none" />
                                                <Input
                                                    type="date"
                                                    value={dateEnd}
                                                    onChange={(e) => {
                                                        setDateEnd(e.target.value);
                                                        setDateRangeType('custom');
                                                    }}
                                                    className="pl-9 block w-full h-9 bg-white"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        )}

                        {/* Action Buttons */}
                        <div className="flex items-center justify-end border-t border-grey-4 pt-5 gap-3">
                            <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => setShowAdvancedFilter(!showAdvancedFilter)}
                                className="mr-auto text-gray-500 hover:text-gray-900 h-9"
                            >
                                {showAdvancedFilter ? (
                                    <>
                                        <ChevronUp className="h-4 w-4 mr-1" />
                                        收合篩選
                                    </>
                                ) : (
                                    <>
                                        <ChevronDown className="h-4 w-4 mr-1" />
                                        進階篩選
                                        {(dateStart || dateEnd) && (
                                            <span className="ml-2 w-2 h-2 rounded-full bg-primary-main" />
                                        )}
                                    </>
                                )}
                            </Button>
                            <Button
                                variant="outline"
                                onClick={handleClearFilters}
                                className="flex items-center gap-2 button-outlined-primary h-9"
                            >
                                <RotateCcw className="h-4 w-4" />
                                重置
                            </Button>
                            <Button
                                onClick={handleSearch}
                                className="button-filled-primary h-9 px-6 gap-2"
                            >
                                <Search className="h-4 w-4" /> 查詢
                            </Button>
                        </div>
                    </div>
                </div>

                {/* Table */}
                <div className="bg-white rounded-lg shadow-sm border overflow-hidden">
                    <Table>
                        <TableHeader className="bg-gray-50">
                            <TableRow>
                                <TableHead className="w-[50px] text-center">#</TableHead>
                                <TableHead className="w-[120px]">
                                    <button
                                        onClick={() => handleSort('transaction_date')}
                                        className="flex items-center hover:text-gray-900"
                                    >
                                        費用日期 <SortIcon field="transaction_date" />
                                    </button>
                                </TableHead>
                                <TableHead>
                                    <button
                                        onClick={() => handleSort('category')}
                                        className="flex items-center hover:text-gray-900"
                                    >
                                        費用類別 <SortIcon field="category" />
                                    </button>
                                </TableHead>
                                <TableHead>
                                    <button
                                        onClick={() => handleSort('invoice_number')}
                                        className="flex items-center hover:text-gray-900"
                                    >
                                        發票號碼 <SortIcon field="invoice_number" />
                                    </button>
                                </TableHead>
                                <TableHead className="text-right">
                                    <div className="flex justify-end">
                                        <button
                                            onClick={() => handleSort('amount')}
                                            className="flex items-center hover:text-gray-900"
                                        >
                                            金額 <SortIcon field="amount" />
                                        </button>
                                    </div>
                                </TableHead>
                                <TableHead>說明 / 備註</TableHead>
                                <TableHead className="text-center w-[120px]">操作</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {fees.data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={7}>
                                        <div className="flex flex-col items-center justify-center space-y-2 py-8">
                                            <FileText className="h-8 w-8 text-gray-300" />
                                            <p className="text-gray-500">找不到符合條件的費用紀錄</p>
                                        </div>
                                    </TableCell>
                                </TableRow>
                            ) : (
                                fees.data.map((fee, index) => (
                                    <TableRow key={fee.id}>
                                        <TableCell className="text-gray-500 font-medium text-center">
                                            {fees.from + index}
                                        </TableCell>
                                        <TableCell className="font-medium text-gray-700">
                                            {formatDateWithDayOfWeek(fee.transaction_date)}
                                        </TableCell>
                                        <TableCell>
                                            <Badge variant="outline">
                                                {fee.category}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="font-mono text-sm text-gray-600">
                                            {formatInvoiceNumber(fee.invoice_number)}
                                        </TableCell>
                                        <TableCell className="text-right font-bold text-gray-900">
                                            $ {Number(fee.amount).toLocaleString()}
                                        </TableCell>
                                        <TableCell className="max-w-xs truncate text-gray-600" title={fee.description}>
                                            {fee.description || '-'}
                                        </TableCell>
                                        <TableCell>
                                            <div className="flex items-center justify-center gap-2">
                                                <Can permission="utility_fees.edit">
                                                    <Button
                                                        variant="outline"
                                                        size="sm"
                                                        className="button-outlined-primary"
                                                        onClick={() => openEditDialog(fee)}
                                                    >
                                                        <Pencil className="h-4 w-4" />
                                                    </Button>
                                                </Can>
                                                <Can permission="utility_fees.delete">
                                                    <Button
                                                        variant="outline"
                                                        size="sm"
                                                        className="button-outlined-error"
                                                        onClick={() => confirmDelete(fee.id)}
                                                    >
                                                        <Trash2 className="h-4 w-4" />
                                                    </Button>
                                                </Can>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>

                </div>

                <div className="mt-4 flex flex-col sm:flex-row items-start sm:items-center justify-between 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-[100px] h-8"
                            showSearch={false}
                        />
                        <span>筆</span>
                    </div>
                    <div className="w-full sm:w-auto flex justify-center sm:justify-end">
                        <Pagination links={fees.links} />
                    </div>
                </div>
            </div>

            <UtilityFeeDialog
                open={isDialogOpen}
                onOpenChange={setIsDialogOpen}
                fee={editingFee}
                availableCategories={availableCategories}
            />

            <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>確認刪除？</AlertDialogTitle>
                        <AlertDialogDescription>
                            這將永久刪除此筆費用紀錄，此操作無法撤銷。
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel>取消</AlertDialogCancel>
                        <AlertDialogAction
                            onClick={handleDelete}
                            className="bg-red-600 hover:bg-red-700 text-white"
                        >
                            確認刪除
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>
        </AuthenticatedLayout>
    );
}