import { Head, Link, useForm } from '@inertiajs/react';
import {
    AlertCircle,
    ArrowLeft,
    BanknoteArrowDown,
    BanknoteArrowUp,
    BookX,
    Calendar,
    Home,
    User,
    Wallet,
} from 'lucide-react';
import { useState, type FormEvent } from 'react';

import { Button } from '@/components/ui/button';
import {
    Card,
    CardAction,
    CardContent,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { CurrencyInput } from '@/components/ui/currency-input';
import { Label } from '@/components/ui/label';

import { StatusBadge } from '@/components/ui/status-badge';
import { Textarea } from '@/components/ui/textarea';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@/components/ui/tooltip';
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 savingsRoutes from '@/routes/savings';
import type { BreadcrumbItem } from '@/types';
import type { SavingsAccount, SavingsTransaction } from '@/types/savings';

interface PageProps {
    account: SavingsAccount;
    recent_transactions?: SavingsTransaction[];
}

const breadcrumbs: BreadcrumbItem[] = [
    { title: 'Simpanan', href: '/savings' },
    { title: 'Detail', href: '#' },
];

export default function Show({ account, recent_transactions }: PageProps) {
    const { can } = usePermissions();
    const [showDepositForm, setShowDepositForm] = useState(false);
    const [showWithdrawForm, setShowWithdrawForm] = useState(false);
    const [showCloseModal, setShowCloseModal] = useState(false);

    // Deposit form
    const depositForm = useForm({
        savings_account_id: account.id,
        amount: '',
        description: 'Setoran tunai',
    });

    const handleDeposit = (e: FormEvent) => {
        e.preventDefault();
        depositForm.post(savingsRoutes.deposit().url, {
            onStart: () => toastLoading('Menyetor dana...'),
            onSuccess: () => {
                toastSuccess('Dana berhasil dicairkan');
                depositForm.reset();
                setShowDepositForm(false);
            },
            onError: () => {
                toastError('Gagal menyetor dana');
            },
        });
    };

    // Withdrawal form
    const withdrawForm = useForm({
        savings_account_id: account.id,
        amount: '',
        description: 'Penarikan tunai',
    });

    const handleWithdraw = (e: FormEvent) => {
        e.preventDefault();

        const amount = parseFloat(withdrawForm.data.amount);

        if (isNaN(amount) || amount <= 0) {
            withdrawForm.setError(
                'amount',
                'Jumlah penarikan harus lebih dari 0',
            );
            return;
        }

        if (amount > availableBalance) {
            withdrawForm.setError(
                'amount',
                `Jumlah penarikan melebihi saldo tersedia (${formatIDR(
                    availableBalance,
                )})`,
            );
            return;
        }

        withdrawForm.post(savingsRoutes.withdraw().url, {
            onStart: () => {
                toastLoading('Menarik dana...');
            },
            onSuccess: () => {
                toastSuccess('Dana berhasil dicairkan');
                withdrawForm.reset();
                setShowWithdrawForm(false);
            },
            onError: () => {
                toastError('Gagal menarik dana');
            },
        });
    };

    // Close account form
    const closeForm = useForm({
        reason: '',
    });

    const handleCloseAccount = (e: FormEvent) => {
        e.preventDefault();
        closeForm.post(savingsRoutes.close({ account: account.id }).url, {
            onStart: () => {
                toastLoading('Menutup rekening...');
            },
            onSuccess: () => {
                toastSuccess('Rekening berhasil ditutup');
                closeForm.reset();
                setShowCloseModal(false);
            },
            onError: () => {
                toastError('Gagal menutup rekening');
            },
        });
    };

    const availableBalance =
        account.available_balance ?? account.balance - account.hold_amount;

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Rekening ${account.account_number}`} />

            <div className="flex h-full flex-1 flex-col gap-4 overflow-x-auto 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={savingsRoutes.index().url}>
                                <ArrowLeft className="h-4 w-4" />
                            </Link>
                        </Button>
                        <div className="flex flex-col gap-1">
                            <h1 className="text-2xl font-black">
                                {account.account_number}
                            </h1>
                            <div className="flex items-center gap-2">
                                <StatusBadge
                                    type="savings"
                                    status={account.status}
                                />
                                <span className="text-sm text-muted-foreground">
                                    {account.account_name}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div className="flex gap-2">
                        {account.status === 'active' && (
                            <>
                                {can('savings.deposit') && (
                                    <Button
                                        onClick={() => setShowDepositForm(true)}
                                    >
                                        <BanknoteArrowDown className="mr-2 h-4 w-4" />
                                        Setor
                                    </Button>
                                )}
                                {can('savings.withdraw') && (
                                    <Button
                                        variant="outline"
                                        onClick={() =>
                                            setShowWithdrawForm(true)
                                        }
                                        disabled={availableBalance <= 0}
                                    >
                                        <BanknoteArrowUp className="mr-2 h-4 w-4" />
                                        Tarik
                                    </Button>
                                )}
                            </>
                        )}
                        {(account.status === 'active' ||
                            account.status === 'closed') &&
                            can('savings.close') && (
                                <TooltipProvider>
                                    <Tooltip>
                                        <TooltipTrigger asChild>
                                            <div className="inline-block">
                                                <Button
                                                    variant="destructive"
                                                    onClick={() =>
                                                        setShowCloseModal(true)
                                                    }
                                                    disabled={
                                                        account.balance > 0
                                                    }
                                                >
                                                    <BookX className="h-4 w-4" />
                                                    Tutup Rekening
                                                </Button>
                                            </div>
                                        </TooltipTrigger>
                                        {account.balance > 0 && (
                                            <TooltipContent>
                                                <p>
                                                    Rekening tidak dapat ditutup
                                                    karena masih memiliki saldo.
                                                </p>
                                            </TooltipContent>
                                        )}
                                    </Tooltip>
                                </TooltipProvider>
                            )}
                    </div>
                </div>

                {/* Stats Cards */}
                <div className="grid gap-2 md:grid-cols-2">
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-sm font-medium">
                                Saldo
                            </CardTitle>
                            <CardAction>
                                <Home size={20} />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="grid grid-cols-3 gap-4">
                                <div className="content-1 col-span-2 flex flex-col gap-1">
                                    <span className="text-2xl font-semibold">
                                        {formatIDR(account.balance)}
                                    </span>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                    <Card>
                        <CardHeader>
                            <CardTitle className="text-sm font-medium">
                                Tgl Buka
                            </CardTitle>
                            <CardAction>
                                <Calendar size={20} />
                            </CardAction>
                        </CardHeader>
                        <CardContent>
                            <div className="grid grid-cols-3 gap-4">
                                <div className="content-1 col-span-2 flex flex-col gap-1">
                                    <span className="text-2xl font-semibold">
                                        {formatDateID(account.opened_date)}
                                    </span>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
                <div className="grid grid-cols-2 gap-2">
                    {/* Member Info */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <User className="h-5 w-5" />
                                Informasi Anggota
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="flex flex-row justify-around gap-4">
                                <div>
                                    <Label className="text-muted-foreground">
                                        Nomor Identitas
                                    </Label>
                                    <p className="font-medium">
                                        {account.member?.id_number || '-'}
                                    </p>
                                </div>
                                <div>
                                    <Label className="text-muted-foreground">
                                        Nama Lengkap
                                    </Label>
                                    <p className="font-medium">
                                        {account.member?.name || 'Unknown'}
                                    </p>
                                </div>
                                <div>
                                    <Label className="text-muted-foreground">
                                        Telepon
                                    </Label>
                                    <p className="font-medium">
                                        {account.member?.phone || '-'}
                                    </p>
                                </div>
                            </div>
                        </CardContent>
                    </Card>

                    {/* Account Info */}
                    <Card>
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2">
                                <Wallet className="h-5 w-5" />
                                Informasi Rekening
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            <div className="flex flex-row justify-around gap-4">
                                <div>
                                    <Label className="text-muted-foreground">
                                        Produk Simpanan
                                    </Label>
                                    <p className="font-medium">
                                        {account.savingsProduct?.name || '-'}
                                    </p>
                                </div>
                                <div>
                                    <Label className="text-muted-foreground">
                                        Cabang
                                    </Label>
                                    <p className="font-medium">
                                        {account.branch?.name || '-'}
                                    </p>
                                </div>
                                <div>
                                    <Label className="text-muted-foreground">
                                        Status
                                    </Label>
                                    <div className="mt-1">
                                        <StatusBadge
                                            type="savings"
                                            status={account.status}
                                        />
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>

                {/* Recent Transactions */}
                <Card>
                    <CardHeader>
                        <div className="flex items-center justify-between pb-2">
                            <CardTitle>Transaksi Terakhir</CardTitle>
                            <Button variant="outline" size="sm" asChild>
                                <Link
                                    href={
                                        savingsRoutes.transactions({
                                            account: account.id,
                                        }).url
                                    }
                                >
                                    Lihat Semua
                                </Link>
                            </Button>
                        </div>
                    </CardHeader>
                    <CardContent>
                        {recent_transactions &&
                        recent_transactions.length > 0 ? (
                            <div className="space-y-4">
                                {recent_transactions
                                    .slice(0, 5)
                                    .map((transaction) => (
                                        <div
                                            key={transaction.id}
                                            className="flex items-center justify-between border-b pb-2 last:border-0"
                                        >
                                            <div className="flex flex-row gap-2">
                                                <div className="flex justify-center">
                                                    <div className="rounded-full border p-3 text-primary">
                                                        {transaction.type ===
                                                        'deposit' ? (
                                                            <BanknoteArrowUp
                                                                size={24}
                                                            />
                                                        ) : (
                                                            <BanknoteArrowDown
                                                                size={24}
                                                                color="red"
                                                            />
                                                        )}
                                                    </div>
                                                </div>
                                                <div>
                                                    <p className="font-medium">
                                                        {
                                                            transaction.transaction_number
                                                        }
                                                    </p>
                                                    <p className="text-sm text-muted-foreground">
                                                        {transaction.description ||
                                                            '-'}
                                                    </p>
                                                </div>
                                            </div>
                                            <div className="text-right">
                                                <p
                                                    className={`font-bold ${
                                                        transaction.type ===
                                                        'deposit'
                                                            ? 'text-green-600'
                                                            : 'text-red-600'
                                                    }`}
                                                >
                                                    {transaction.type ===
                                                    'deposit'
                                                        ? '+'
                                                        : '-'}
                                                    {formatIDR(
                                                        transaction.amount,
                                                    )}
                                                </p>
                                                <p className="text-xs text-muted-foreground">
                                                    {formatDateID(
                                                        transaction.created_at ||
                                                            transaction.transaction_date,
                                                    )}
                                                </p>
                                            </div>
                                        </div>
                                    ))}
                            </div>
                        ) : (
                            <p className="text-center text-muted-foreground">
                                Belum ada transaksi
                            </p>
                        )}
                    </CardContent>
                </Card>
            </div>

            {/* Deposit Modal */}
            {showDepositForm && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
                    <Card className="w-full max-w-md">
                        <CardHeader>
                            <CardTitle>Setor Tunai</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <form
                                onSubmit={handleDeposit}
                                className="space-y-4"
                            >
                                <div className="space-y-2">
                                    <Label htmlFor="deposit-amount">
                                        Jumlah (Rp)
                                    </Label>
                                    <CurrencyInput
                                        id="deposit-amount"
                                        prefix="Rp "
                                        thousandSeparator="."
                                        placeholder="Rp 0"
                                        value={depositForm.data.amount}
                                        onValueChange={(values) => {
                                            depositForm.setData(
                                                'amount',
                                                values.floatValue
                                                    ? values.floatValue.toString()
                                                    : '',
                                            );
                                        }}
                                        required
                                    />

                                    {depositForm.errors.amount && (
                                        <p className="text-sm text-destructive">
                                            {depositForm.errors.amount}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="deposit-description">
                                        Keterangan
                                    </Label>
                                    <Textarea
                                        id="deposit-description"
                                        value={depositForm.data.description}
                                        onChange={(e) =>
                                            depositForm.setData(
                                                'description',
                                                e.target.value,
                                            )
                                        }
                                        rows={3}
                                    />
                                    {depositForm.errors.description && (
                                        <p className="text-sm text-destructive">
                                            {depositForm.errors.description}
                                        </p>
                                    )}
                                </div>
                                <div className="flex gap-2">
                                    <Button
                                        type="button"
                                        variant="outline"
                                        className="flex-1"
                                        onClick={() => {
                                            setShowDepositForm(false);
                                            depositForm.reset();
                                        }}
                                        disabled={depositForm.processing}
                                    >
                                        Batal
                                    </Button>
                                    <Button
                                        type="submit"
                                        className="flex-1"
                                        disabled={depositForm.processing}
                                    >
                                        {depositForm.processing
                                            ? 'Memproses...'
                                            : 'Setor'}
                                    </Button>
                                </div>
                            </form>
                        </CardContent>
                    </Card>
                </div>
            )}

            {/* Withdrawal Modal */}
            {showWithdrawForm && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
                    <Card className="w-full max-w-md">
                        <CardHeader>
                            <CardTitle>Penarikan Tunai</CardTitle>
                        </CardHeader>
                        <CardContent>
                            <form
                                onSubmit={handleWithdraw}
                                className="space-y-4"
                            >
                                <div className="rounded-lg bg-muted p-3">
                                    <div className="flex justify-between text-sm">
                                        <span>Saldo Tersedia:</span>
                                        <span className="font-bold">
                                            {formatIDR(availableBalance)}
                                        </span>
                                    </div>
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="withdraw-amount">
                                        Jumlah (Rp)
                                    </Label>
                                    <CurrencyInput
                                        id="withdraw-amount"
                                        prefix="Rp "
                                        thousandSeparator="."
                                        placeholder="Rp 0"
                                        value={withdrawForm.data.amount}
                                        onValueChange={(values) => {
                                            withdrawForm.setData(
                                                'amount',
                                                values.floatValue
                                                    ? values.floatValue.toString()
                                                    : '',
                                            );
                                            if (withdrawForm.errors.amount) {
                                                withdrawForm.clearErrors(
                                                    'amount',
                                                );
                                            }
                                        }}
                                        required
                                    />
                                    {withdrawForm.errors.amount && (
                                        <p className="text-sm text-destructive">
                                            {withdrawForm.errors.amount}
                                        </p>
                                    )}
                                </div>
                                <div className="space-y-2">
                                    <Label htmlFor="withdraw-description">
                                        Keterangan
                                    </Label>
                                    <Textarea
                                        id="withdraw-description"
                                        value={withdrawForm.data.description}
                                        onChange={(e) =>
                                            withdrawForm.setData(
                                                'description',
                                                e.target.value,
                                            )
                                        }
                                        rows={3}
                                    />
                                    {withdrawForm.errors.description && (
                                        <p className="text-sm text-destructive">
                                            {withdrawForm.errors.description}
                                        </p>
                                    )}
                                </div>
                                <div className="flex gap-2">
                                    <Button
                                        type="button"
                                        variant="outline"
                                        className="flex-1"
                                        onClick={() => {
                                            setShowWithdrawForm(false);
                                            withdrawForm.reset();
                                        }}
                                        disabled={withdrawForm.processing}
                                    >
                                        Batal
                                    </Button>
                                    <Button
                                        type="submit"
                                        className="flex-1"
                                        disabled={withdrawForm.processing}
                                    >
                                        {withdrawForm.processing
                                            ? 'Memproses...'
                                            : 'Tarik'}
                                    </Button>
                                </div>
                            </form>
                        </CardContent>
                    </Card>
                </div>
            )}

            {/* Close Account Modal */}
            {showCloseModal && (
                <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
                    <Card className="w-full max-w-md">
                        <CardHeader>
                            <CardTitle className="flex items-center gap-2 text-destructive">
                                <AlertCircle className="h-5 w-5" />
                                Tutup Rekening
                            </CardTitle>
                        </CardHeader>
                        <CardContent>
                            {account.balance > 0 ? (
                                <div className="space-y-4">
                                    <p className="text-sm text-muted-foreground">
                                        Rekening tidak dapat ditutup karena
                                        masih memiliki saldo.
                                    </p>
                                    <div className="rounded-lg bg-muted p-3">
                                        <div className="flex justify-between">
                                            <span>Saldo saat ini:</span>
                                            <span className="font-bold">
                                                {formatIDR(account.balance)}
                                            </span>
                                        </div>
                                    </div>
                                    <Button
                                        className="w-full"
                                        variant="outline"
                                        onClick={() => setShowCloseModal(false)}
                                    >
                                        Tutup
                                    </Button>
                                </div>
                            ) : (
                                <form
                                    onSubmit={handleCloseAccount}
                                    className="space-y-4"
                                >
                                    <p className="text-sm text-muted-foreground">
                                        Apakah Anda yakin ingin menutup rekening{' '}
                                        <strong>
                                            {account.account_number}
                                        </strong>
                                        ?
                                    </p>
                                    <div className="space-y-2">
                                        <Label htmlFor="close-reason">
                                            Alasan Penutupan *
                                        </Label>
                                        <Textarea
                                            id="close-reason"
                                            value={closeForm.data.reason}
                                            onChange={(e) =>
                                                closeForm.setData(
                                                    'reason',
                                                    e.target.value,
                                                )
                                            }
                                            rows={3}
                                            required
                                        />
                                        {closeForm.errors.reason && (
                                            <p className="text-sm text-destructive">
                                                {closeForm.errors.reason}
                                            </p>
                                        )}
                                    </div>
                                    <div className="flex gap-2">
                                        <Button
                                            type="button"
                                            variant="outline"
                                            className="flex-1"
                                            onClick={() => {
                                                setShowCloseModal(false);
                                                closeForm.reset();
                                            }}
                                            disabled={closeForm.processing}
                                        >
                                            Batal
                                        </Button>
                                        <Button
                                            type="submit"
                                            variant="destructive"
                                            className="flex-1"
                                            disabled={closeForm.processing}
                                        >
                                            {closeForm.processing
                                                ? 'Memproses...'
                                                : 'Tutup'}
                                        </Button>
                                    </div>
                                </form>
                            )}
                        </CardContent>
                    </Card>
                </div>
            )}
        </AppLayout>
    );
}