import { Head, Link } from '@inertiajs/react';
import { ArrowLeft, Download, FileText, Filter, Printer } from 'lucide-react';
import { useMemo, useState } from 'react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';

import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import AppLayout from '@/layouts/app-layout';
import { exportToCSV } from '@/lib/exportToCSV';
import { formatDateID, formatIDR } from '@/lib/formatters';
import financingsRoutes from '@/routes/financing';
import type { BreadcrumbItem, PaginatedData } from '@/types';
import type {
    Financing,
    FinancingPayment,
    PaymentMethod,
} from '@/types/financing';

interface PageProps {
    financing: Financing;
    payments?: PaginatedData<FinancingPayment>;
    filters?: {
        method?: string;
        from?: string;
        to?: string;
        min_amount?: string;
    };
}

export default function Payments({
    financing,
    payments,
    filters = {},
}: PageProps) {
    const breadcrumbs: BreadcrumbItem[] = [
        {
            title: 'Pembiayaan',
            href: financingsRoutes.index().url,
        },
        {
            title: 'Riwayat Pembayaran',
            href: '',
        },
    ];
    // Filter state
    const [methodFilter, setMethodFilter] = useState(filters.method || 'all');
    const [fromDate, setFromDate] = useState(filters.from || '');
    const [toDate, setToDate] = useState(filters.to || '');
    const [minAmount, setMinAmount] = useState(filters.min_amount || '');

    // Filter payments
    const filteredPayments = useMemo(() => {
        if (!payments) return [];
        return payments.data.filter((payment) => {
            // Method filter
            if (
                methodFilter !== 'all' &&
                payment.payment_method !== methodFilter
            ) {
                return false;
            }

            // Date range filter
            if (fromDate) {
                const from = new Date(fromDate);
                const paymentDate = new Date(payment.payment_date);
                if (paymentDate < from) return false;
            }

            if (toDate) {
                const to = new Date(toDate);
                const paymentDate = new Date(payment.payment_date);
                if (paymentDate > to) return false;
            }

            // Min amount filter
            if (minAmount && payment.total_amount < Number(minAmount)) {
                return false;
            }

            return true;
        });
    }, [payments, methodFilter, fromDate, toDate, minAmount]);

    // Calculate totals
    const totals = useMemo(() => {
        return filteredPayments.reduce(
            (acc, payment) => {
                acc.totalAmount += parseFloat(payment.total_amount.toString());
                acc.totalPrincipal += parseFloat(
                    payment.principal_amount.toString(),
                );
                acc.totalMargin += parseFloat(payment.margin_amount.toString());

                return acc;
            },
            { totalAmount: 0, totalPrincipal: 0, totalMargin: 0 },
        );
    }, [filteredPayments]);

    // Get payment method label
    const getMethodLabel = (method: PaymentMethod) => {
        const labels: Record<string, string> = {
            cash: 'Tunai',
            transfer: 'Transfer',
            savings_debit: 'Auto Debit',
        };
        return labels[method] || method;
    };

    // Export CSV
    const handleExportCSV = () => {
        const filename = `riwayat-pembayaran-${financing.account_number}.csv`;

        exportToCSV(
            [
                'Nomor Pembayaran',
                'Tanggal',
                'Jumlah',
                'Pokok',
                'Margin',
                'Metode',
                'Catatan',
            ],
            filteredPayments.map((payment) => ({
                'Nomor Pembayaran': payment.payment_number,
                Tanggal: payment.payment_date,
                Jumlah: payment.total_amount.toString(),
                Pokok: payment.principal_amount.toString(),
                Margin: payment.margin_amount.toString(),
                Metode: getMethodLabel(payment.payment_method),
                Catatan: payment.notes || '-',
            })),
            filename,
        );
    };

    // console.log(filteredPayments);
    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Riwayat Pembayaran - ${financing.account_number}`} />

            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                {/* Header */}
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <Button variant="outline" size="icon" asChild>
                            <Link
                                href={
                                    financingsRoutes.show({
                                        financing: financing.id,
                                    }).url
                                }
                            >
                                <ArrowLeft className="h-4 w-4" />
                            </Link>
                        </Button>
                        <div className="flex flex-col gap-1">
                            <h1 className="text-2xl font-black">
                                Riwayat Pembayaran
                            </h1>
                            <span className="text-sm text-muted-foreground">
                                {financing.account_number} •{' '}
                                {financing.member?.name || 'Unknown'}
                            </span>
                        </div>
                    </div>

                    <div className="flex gap-2">
                        <Button variant="outline" onClick={handleExportCSV}>
                            <Download className="mr-2 h-4 w-4" />
                            Export CSV
                        </Button>
                    </div>
                </div>

                {/* Summary Cards */}
                <div className="grid gap-4 md:grid-cols-4">
                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-sm font-medium text-muted-foreground">
                                Total Pembayaran
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(totals.totalAmount)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                {filteredPayments.length} transaksi
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-sm font-medium text-muted-foreground">
                                Total Pokok
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold text-blue-600">
                                {formatIDR(totals.totalPrincipal)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                {totals.totalAmount > 0
                                    ? (
                                          (totals.totalPrincipal /
                                              totals.totalAmount) *
                                          100
                                      ).toFixed(1)
                                    : '0'}
                                % dari total
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-sm font-medium text-muted-foreground">
                                Total Margin
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold text-green-600">
                                {formatIDR(totals.totalMargin)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                {totals.totalAmount > 0
                                    ? (
                                          (totals.totalMargin /
                                              totals.totalAmount) *
                                          100
                                      ).toFixed(1)
                                    : '0'}
                                % dari total
                            </p>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader className="pb-3">
                            <CardTitle className="text-sm font-medium text-muted-foreground">
                                Saldo Outstanding
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(financing.total_balance)}
                            </div>
                            <p className="text-xs text-muted-foreground">
                                Sisa hutang pokok + margin
                            </p>
                        </CardContent>
                    </Card>
                </div>

                {/* Filters */}
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Filter className="h-5 w-5" />
                            Filter
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="grid gap-4 md:grid-cols-4">
                            {/* Method Filter */}
                            <div className="space-y-2">
                                <Label htmlFor="method">
                                    Metode Pembayaran
                                </Label>
                                <Select
                                    value={methodFilter}
                                    onValueChange={setMethodFilter}
                                >
                                    <SelectTrigger>
                                        <SelectValue placeholder="Semua Metode" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectLabel>Metode</SelectLabel>
                                            <SelectItem value="all">
                                                Semua
                                            </SelectItem>
                                            <SelectItem value="cash">
                                                Tunai
                                            </SelectItem>
                                            <SelectItem value="transfer">
                                                Transfer
                                            </SelectItem>
                                            <SelectItem value="savings_debit">
                                                Auto Debit
                                            </SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>

                            {/* From Date */}
                            <div className="space-y-2">
                                <Label htmlFor="from">Dari Tanggal</Label>
                                <Input
                                    id="from"
                                    type="date"
                                    value={fromDate}
                                    onChange={(e) =>
                                        setFromDate(e.target.value)
                                    }
                                />
                            </div>

                            {/* To Date */}
                            <div className="space-y-2">
                                <Label htmlFor="to">Sampai Tanggal</Label>
                                <Input
                                    id="to"
                                    type="date"
                                    value={toDate}
                                    onChange={(e) => setToDate(e.target.value)}
                                />
                            </div>

                            {/* Min Amount */}
                            <div className="space-y-2">
                                <Label htmlFor="min_amount">
                                    Jumlah Minimum
                                </Label>
                                <Input
                                    id="min_amount"
                                    type="number"
                                    min={0}
                                    step={1000}
                                    value={minAmount}
                                    onChange={(e) =>
                                        setMinAmount(e.target.value)
                                    }
                                    placeholder="0"
                                />
                            </div>
                        </div>
                    </CardContent>
                </Card>

                {/* Payments Table */}
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <FileText className="h-5 w-5" />
                            Daftar Pembayaran
                            <span className="ml-2 text-sm font-normal text-muted-foreground">
                                ({filteredPayments.length} dari{' '}
                                {payments?.total})
                            </span>
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="flex flex-col gap-4">
                            <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Nomor Pembayaran</TableHead>
                                        <TableHead>Tanggal</TableHead>
                                        <TableHead className="text-right">
                                            Jumlah
                                        </TableHead>
                                        <TableHead className="text-right">
                                            Pokok
                                        </TableHead>
                                        <TableHead className="text-right">
                                            Margin
                                        </TableHead>
                                        <TableHead>Metode</TableHead>
                                        <TableHead>Catatan</TableHead>
                                        <TableHead className="text-right">
                                            Aksi
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {filteredPayments.map((payment) => (
                                        <TableRow key={payment.id}>
                                            <TableCell>
                                                <span className="font-medium">
                                                    {payment.payment_number}
                                                </span>
                                            </TableCell>
                                            <TableCell>
                                                {formatDateID(
                                                    payment.payment_date,
                                                )}
                                            </TableCell>
                                            <TableCell className="text-right font-bold">
                                                {formatIDR(
                                                    payment.total_amount,
                                                )}
                                            </TableCell>
                                            <TableCell className="text-right text-blue-600">
                                                {formatIDR(
                                                    payment.principal_amount,
                                                )}
                                            </TableCell>
                                            <TableCell className="text-right text-green-600">
                                                {formatIDR(
                                                    payment.margin_amount,
                                                )}
                                            </TableCell>
                                            <TableCell>
                                                <span className="rounded-full bg-primary/10 px-2 py-1 text-xs font-medium">
                                                    {getMethodLabel(
                                                        payment.payment_method,
                                                    )}
                                                </span>
                                            </TableCell>
                                            <TableCell className="min-w-50 whitespace-normal text-muted-foreground">
                                                {payment.notes || '-'}
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <Button
                                                    variant="outline"
                                                    size="sm"
                                                    asChild
                                                >
                                                    <a
                                                        href={
                                                            financingsRoutes.payments.receipt(
                                                                {
                                                                    payment:
                                                                        payment.id,
                                                                },
                                                            ).url
                                                        }
                                                        target="_blank"
                                                        rel="noopener noreferrer"
                                                    >
                                                        <Printer className="mr-2 h-3 w-3" />
                                                        Struk
                                                    </a>
                                                </Button>
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>

                            {filteredPayments.length === 0 && (
                                <div className="py-8 text-center text-muted-foreground">
                                    Tidak ada pembayaran yang cocok dengan
                                    filter
                                </div>
                            )}
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}