import { Head, Link, router } from '@inertiajs/react';
import {
    ArrowDown,
    ArrowLeft,
    Banknote,
    Calendar,
    CalendarClockIcon,
    CheckCircle,
    CircleDollarSign,
    FileText,
    HandCoins,
    Home,
    PackageIcon,
    TrendingUp,
    Wallet,
    X,
} from 'lucide-react';
import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
    Card,
    CardAction,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';

import { StatusBadge } from '@/components/ui/status-badge';
import { usePermissions } from '@/hooks/use-permissions';
import AppLayout from '@/layouts/app-layout';
import { formatDateID, formatIDR } from '@/lib/formatters';
import { toastError, toastLoading, toastSuccess } from '@/lib/toast';
import financingsRoutes from '@/routes/financing';
import type { BreadcrumbItem } from '@/types';
import type {
    Financing,
    FinancingInstallment,
    FinancingPayment,
} from '@/types/financing';
import { ReassignEntityModal } from './Components/ReassignEntityModal';

interface PageProps {
    financing: Financing;
    installments?: FinancingInstallment[];
    payments?: FinancingPayment[];
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Pembiayaan',
        href: financingsRoutes.index().url,
    },
    {
        title: 'Detail',
        href: '',
    },
];

export default function Show({ financing, payments }: PageProps) {
    const { can } = usePermissions();
    const [showDisburseModal, setShowDisburseModal] = useState(false);
    const [showApproveModal, setShowApproveModal] = useState(false);
    const [showRejectModal, setShowRejectModal] = useState(false);
    const [showReassignModal, setShowReassignModal] = useState(false);
    const [reassignType, setReassignType] = useState<'member' | 'collector'>(
        'member',
    );
    const [disbursementMethod, setDisbursementMethod] = useState<
        'cash' | 'transfer'
    >('cash');
    const [isProcessing, setIsProcessing] = useState(false);

    // Calculate progress
    const totalPaid = financing.total_repayment - financing.total_balance;
    const progressPercentage = (totalPaid / financing.total_repayment) * 100;
    const handleConfirmApprove = () => {
        router.post(
            financingsRoutes.approve({ financing: financing.id }).url,
            { approval_notes: '' },
            {
                onStart: () => {
                    setIsProcessing(true);
                    toastLoading('Memproses persetujuan...');
                },
                onSuccess: () => {
                    toastSuccess('Pembiayaan disetujui');
                    setShowApproveModal(false);
                },
                onError: () => {
                    toastError('Gagal menyetujui pembiayaan');
                },
                onFinish: () => setIsProcessing(false),
            },
        );
    };

    const handleApprove = () => {
        setShowApproveModal(true);
    };

    const handleReject = () => {
        setShowRejectModal(true);
    };

    const handleConfirmReject = (reason?: string) => {
        if (!reason) return;

        router.post(
            financingsRoutes.reject({ financing: financing.id }).url,
            { rejection_reason: reason },
            {
                onStart: () => {
                    setIsProcessing(true);
                    toastLoading('Memproses penolakan...');
                },
                onSuccess: () => {
                    toastSuccess('Pembiayaan ditolak');
                    setShowRejectModal(false);
                },
                onError: (errors: Record<string, string>) => {
                    console.error('Error rejecting financing:', errors);
                    toastError('Gagal menolak pembiayaan');
                },
                onFinish: () => setIsProcessing(false),
            },
        );
    };

    const handleDisburse = () => {
        router.post(
            financingsRoutes.disburse({ financing: financing.id }).url,
            {
                disbursement_method: disbursementMethod,
                notes: 'Pencairan dana pembiayaan',
            },
            {
                onStart: () => {
                    setIsProcessing(true);
                    toastLoading('Mencairkan dana...');
                },
                onSuccess: () => {
                    toastSuccess('Dana berhasil dicairkan');
                    setShowDisburseModal(false);
                },
                onError: () => {
                    toastError('Gagal mencairkan dana');
                },
                onFinish: () => setIsProcessing(false),
            },
        );
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Pembiayaan ${financing.account_number}`} />
            <div className="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
                {/* Header */}
                <div className="flex items-center gap-4">
                    <Button variant="outline" size="icon" asChild>
                        <Link href={financingsRoutes.index().url}>
                            <ArrowLeft className="h-4 w-4" />
                        </Link>
                    </Button>
                    <div className="flex flex-1 flex-col gap-1">
                        <div className="flex items-center gap-3">
                            <h1 className="text-2xl font-black">
                                {financing.account_number}
                            </h1>
                            <StatusBadge
                                type="financing"
                                status={financing.status}
                            />
                            {financing.collectibility_score && (
                                <StatusBadge
                                    type="collectibility"
                                    status={financing.collectibility_score.toString()}
                                />
                            )}
                        </div>
                        <span className="text-sm text-muted-foreground">
                            <Link
                                href={`/members/${financing.member.id}`}
                                className="font-medium text-primary hover:underline"
                            >
                                {financing.member.name}
                            </Link>{' '}
                            • {financing.member.id_number || '-'}
                            {financing.member.notes === 'Imported from CSV' && (
                                <Button
                                    variant="ghost"
                                    size="sm"
                                    className="ml-2 h-7 px-2 text-xs text-amber-600 hover:bg-amber-50 hover:text-amber-700"
                                    onClick={() => {
                                        setReassignType('member');
                                        setShowReassignModal(true);
                                    }}
                                >
                                    Tugaskan Ulang Anggota
                                </Button>
                            )}
                        </span>
                    </div>
                    {/* Action Buttons */}
                    <div className="flex flex-wrap justify-end gap-4">
                        {financing.status === 'proposed' &&
                            can('financing.approve') && (
                                <>
                                    <Button
                                        onClick={handleApprove}
                                        disabled={isProcessing}
                                    >
                                        <CheckCircle className="mr-2 h-4 w-4" />
                                        Setujui
                                    </Button>
                                    <Button
                                        variant="destructive"
                                        onClick={handleReject}
                                        disabled={isProcessing}
                                    >
                                        <X className="mr-2 h-4 w-4" />
                                        Tolak
                                    </Button>
                                </>
                            )}

                        {financing.status === 'approved' &&
                            can('financing.disburse') && (
                                <Dialog
                                    open={showDisburseModal}
                                    onOpenChange={setShowDisburseModal}
                                >
                                    <DialogTrigger asChild>
                                        <Button disabled={isProcessing}>
                                            <CircleDollarSign className="mr-2 h-4 w-4" />
                                            Cairkan Dana
                                        </Button>
                                    </DialogTrigger>
                                    <DialogContent>
                                        <DialogHeader>
                                            <DialogTitle>
                                                Pencairan Dana Pembiayaan
                                            </DialogTitle>
                                            <DialogDescription>
                                                Pilih metode pencairan untuk
                                                pembiayaan{' '}
                                                {financing.account_number}
                                            </DialogDescription>
                                        </DialogHeader>

                                        <div className="space-y-4 py-4">
                                            <div className="rounded-lg border p-4">
                                                <div className="text-sm text-muted-foreground">
                                                    Jumlah Pencairan
                                                </div>
                                                <div className="text-2xl font-bold">
                                                    {formatIDR(
                                                        financing.total_repayment,
                                                    )}
                                                </div>
                                            </div>

                                            <div className="space-y-2">
                                                <label className="text-sm font-medium">
                                                    Metode Pencairan
                                                </label>
                                                <div className="space-y-2">
                                                    <Button
                                                        type="button"
                                                        variant={
                                                            disbursementMethod ===
                                                            'cash'
                                                                ? 'default'
                                                                : 'outline'
                                                        }
                                                        className="w-full justify-start"
                                                        onClick={() =>
                                                            setDisbursementMethod(
                                                                'cash',
                                                            )
                                                        }
                                                    >
                                                        <CircleDollarSign className="mr-2 h-4 w-4" />
                                                        Tunai
                                                    </Button>
                                                    <Button
                                                        type="button"
                                                        variant={
                                                            disbursementMethod ===
                                                            'transfer'
                                                                ? 'default'
                                                                : 'outline'
                                                        }
                                                        className="w-full justify-start"
                                                        onClick={() =>
                                                            setDisbursementMethod(
                                                                'transfer',
                                                            )
                                                        }
                                                    >
                                                        <Wallet className="mr-2 h-4 w-4" />
                                                        Transfer ke Rekening
                                                        Simpanan
                                                    </Button>
                                                </div>
                                            </div>
                                        </div>

                                        <DialogFooter>
                                            <Button
                                                variant="outline"
                                                onClick={() =>
                                                    setShowDisburseModal(false)
                                                }
                                                disabled={isProcessing}
                                            >
                                                Batal
                                            </Button>
                                            <Button
                                                onClick={handleDisburse}
                                                disabled={isProcessing}
                                            >
                                                {isProcessing
                                                    ? 'Memproses...'
                                                    : 'Cairkan Dana'}
                                            </Button>
                                        </DialogFooter>
                                    </DialogContent>
                                </Dialog>
                            )}

                        {financing.status === 'active' &&
                            can('financing.record_payment') && (
                                <div className="flex flex-wrap gap-2">
                                    <Button asChild>
                                        <Link
                                            href={
                                                financingsRoutes.payments.create(
                                                    {
                                                        financing: financing.id,
                                                    },
                                                ).url
                                            }
                                        >
                                            <Wallet className="mr-2 h-4 w-4" />
                                            Catat Pembayaran
                                        </Link>
                                    </Button>
                                    <Button variant="outline" asChild>
                                        <Link
                                            href={
                                                financingsRoutes.installments({
                                                    financing: financing.id,
                                                }).url
                                            }
                                        >
                                            <Calendar className="mr-2 h-4 w-4" />
                                            Detail Angsuran
                                        </Link>
                                    </Button>

                                    <Button variant="outline" asChild>
                                        <Link
                                            href={
                                                financingsRoutes.payments.history(
                                                    {
                                                        financing: financing.id,
                                                    },
                                                ).url
                                            }
                                        >
                                            <FileText className="mr-2 h-4 w-4" />
                                            Riwayat Pembayaran
                                        </Link>
                                    </Button>
                                </div>
                            )}
                    </div>
                </div>
                {/* {Saldos} */}
                <div className="grid gap-4 md:grid-cols-4">
                    <Card>
                        <CardHeader>
                            <CardTitle>Pokok</CardTitle>
                            <CardAction>
                                <Home className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(financing.principal_amount)}
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Margin</CardTitle>
                            <CardAction>
                                <TrendingUp className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(financing.margin_amount)}
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Total Pengembalian</CardTitle>
                            <CardAction>
                                <ArrowDown className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(financing.total_repayment)}
                            </div>
                        </CardContent>
                    </Card>

                    <Card>
                        <CardHeader>
                            <CardTitle>Angsuran Harian</CardTitle>
                            <CardAction>
                                <Banknote className="h-4 w-4" />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="text-2xl font-bold">
                                {formatIDR(financing.installment_amount)}
                            </div>
                        </CardContent>
                    </Card>
                </div>
                <div className="grid grid-cols-3 gap-4">
                    {/* Progress Bar for Active Financings */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2 pb-2">
                                <HandCoins className="h-4 w-4" />
                                Progres Angsuran
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-2">
                            <div className="space-y-3">
                                <div className="flex justify-between text-sm">
                                    <span className="text-muted-foreground">
                                        Pokok
                                    </span>
                                    <span className="font-medium">
                                        {formatIDR(financing.principal_balance)}
                                    </span>
                                </div>
                                <div className="flex justify-between text-sm">
                                    <span className="text-muted-foreground">
                                        Margin
                                    </span>
                                    <span className="font-medium">
                                        {formatIDR(financing.margin_balance)}
                                    </span>
                                </div>
                                <div className="flex justify-between border-t pt-2 text-lg font-bold">
                                    <span>Total</span>
                                    <span>
                                        {formatIDR(financing.total_balance)}
                                    </span>
                                </div>
                            </div>

                            {financing.status === 'active' && (
                                <div>
                                    <div className="mb-2 flex justify-between text-sm">
                                        <span className="text-muted-foreground">
                                            Progres
                                        </span>
                                        <span className="font-medium">
                                            {progressPercentage.toFixed(1)}%
                                        </span>
                                    </div>
                                    <div className="h-2 overflow-hidden rounded-full bg-secondary">
                                        <div
                                            className="h-full bg-primary transition-all"
                                            style={{
                                                width: `${progressPercentage}%`,
                                            }}
                                        />
                                    </div>
                                    <div className="mt-1 flex justify-between text-xs text-muted-foreground">
                                        <span>
                                            {formatIDR(totalPaid)} dibayar
                                        </span>
                                        <span>
                                            {formatIDR(
                                                financing.total_repayment,
                                            )}{' '}
                                            total
                                        </span>
                                    </div>
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    {/* Status & Waktu */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2 pb-2">
                                <CalendarClockIcon className="h-4 w-4" />
                                Status & Progres
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-2">
                            <div className="flex justify-between">
                                <span className="text-muted-foreground">
                                    Tgl Pengajuan
                                </span>
                                <span>
                                    {formatDateID(financing.application_date)}
                                </span>
                            </div>
                            {financing.approval_date && (
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Tgl Persetujuan
                                    </span>
                                    <span>
                                        {formatDateID(financing.approval_date)}
                                    </span>
                                </div>
                            )}
                            {financing.disbursement_date && (
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Tgl Pencairan
                                    </span>
                                    <span>
                                        {formatDateID(
                                            financing.disbursement_date,
                                        )}
                                    </span>
                                </div>
                            )}
                            {financing.due_date && (
                                <div className="flex justify-between">
                                    <span className="text-muted-foreground">
                                        Jatuh Tempo
                                    </span>
                                    <span>
                                        {formatDateID(financing.due_date)}
                                    </span>
                                </div>
                            )}
                        </CardContent>
                    </Card>

                    {/* Product Info Card */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2 pb-2">
                                <PackageIcon className="h-4 w-4" />
                                Informasi Produk
                            </CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-2">
                            <div className="flex justify-between">
                                <span className="text-muted-foreground">
                                    Produk
                                </span>
                                <span className="font-medium">
                                    {financing.financing_product?.name}
                                </span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-muted-foreground">
                                    Akad
                                </span>
                                <span>
                                    {financing.financing_product?.akad_type}
                                </span>
                            </div>
                            <div className="flex justify-between">
                                <span className="text-muted-foreground">
                                    Margin (
                                    {financing.financing_product?.margin_rate}
                                    %)
                                </span>
                                <span>
                                    {formatIDR(financing.margin_amount)}
                                </span>
                            </div>
                            {/* <div className="flex justify-between">
                                <span className="text-muted-foreground">
                                    Jangka Waktu
                                </span>
                                <span>{financing.installment_count} hari</span>
                            </div> */}
                            <div className="flex justify-between">
                                <span className="text-muted-foreground">
                                    Tujuan
                                </span>
                                <span className="max-w-50 text-right">
                                    {financing.financing_purpose}
                                </span>
                            </div>
                            {financing.collector && (
                                <div className="border-t border-muted/50 pt-2">
                                    <div className="flex justify-between">
                                        <span className="text-muted-foreground">
                                            Staf Lapangan
                                        </span>

                                        <div className="flex items-center gap-1 font-medium">
                                            <span className="mr-1 text-muted-foreground">
                                                {financing.collector.name}
                                            </span>
                                            {financing.collector?.email?.endsWith(
                                                '@btm.dummy',
                                            ) && (
                                                <Button
                                                    variant="ghost"
                                                    size="sm"
                                                    className="h-6 px-1 text-[10px] text-amber-600 hover:bg-amber-50"
                                                    onClick={() => {
                                                        setReassignType(
                                                            'collector',
                                                        );
                                                        setShowReassignModal(
                                                            true,
                                                        );
                                                    }}
                                                >
                                                    Tugaskan Ulang
                                                </Button>
                                            )}
                                        </div>
                                    </div>
                                </div>
                            )}
                        </CardContent>
                    </Card>
                </div>

                {/* Balance & Progress */}
                <div className="grid gap-6 md:grid-cols-1">
                    {/* Recent Payments */}
                    <Card className="gap-4">
                        <CardHeader className="gap-1">
                            <CardTitle>Pembayaran Terakhir</CardTitle>
                            <CardDescription>
                                {payments?.length || 0} transaksi tercatat
                            </CardDescription>
                            <CardAction>
                                <Button variant="outline" asChild>
                                    <Link
                                        href={
                                            financingsRoutes.payments.history({
                                                financing: financing.id,
                                            }).url
                                        }
                                    >
                                        Lihat Semua
                                    </Link>
                                </Button>
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            {payments && payments.length > 0 ? (
                                <div className="space-y-3">
                                    {payments.slice(0, 5).map((payment) => (
                                        <div
                                            key={payment.id}
                                            className="flex items-center justify-between rounded-lg border p-3"
                                        >
                                            <div className="left-side flex flex-row items-center gap-4">
                                                <div className="icon">
                                                    <FileText />
                                                </div>
                                                <div>
                                                    <div className="font-medium">
                                                        {payment.payment_number}
                                                    </div>
                                                    <div className="text-sm text-muted-foreground">
                                                        {formatDateID(
                                                            payment.payment_date,
                                                        )}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="text-right">
                                                <div className="font-bold">
                                                    {formatIDR(
                                                        payment.total_amount,
                                                    )}
                                                </div>
                                                <div className="text-xs text-muted-foreground">
                                                    {payment.payment_method}
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <p className="py-4 text-center text-sm text-muted-foreground">
                                    Belum ada riwayat pembayaran
                                </p>
                            )}
                        </CardContent>
                    </Card>
                </div>
            </div>

            <ConfirmDialog
                open={showApproveModal}
                onOpenChange={setShowApproveModal}
                title="Konfirmasi Persetujuan"
                description={
                    financing.collectibility_score === 5
                        ? 'Anggota memiliki kolektibilitas Macet (5). Apakah Anda yakin ingin melanjutkan persetujuan pembiayaan ini?'
                        : 'Apakah Anda yakin ingin menyetujui pembiayaan ini?'
                }
                confirmText="Ya, Setujui"
                variant="default"
                isLoading={isProcessing}
                onConfirm={() => handleConfirmApprove()}
            />

            <ConfirmDialog
                open={showRejectModal}
                onOpenChange={setShowRejectModal}
                title="Tolak Pembiayaan"
                description="Silakan berikan alasan penolakan untuk pembiayaan ini."
                confirmText="Tolak Pembiayaan"
                requireInput
                inputLabel="Alasan Penolakan"
                inputPlaceholder="Contoh: Dokumen tidak lengkap"
                isLoading={isProcessing}
                onConfirm={(reason) => handleConfirmReject(reason)}
            />

            <ReassignEntityModal
                financing={financing}
                open={showReassignModal}
                onOpenChange={setShowReassignModal}
                type={reassignType}
            />
        </AppLayout>
    );
}