import { Head, Link, useForm } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { ArrowLeft, Printer, RotateCcw } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { DataTable } from '@/components/ui/data-table';
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { StatusBadge } from '@/components/ui/status-badge';
import { Textarea } from '@/components/ui/textarea';
import AppLayout from '@/layouts/app-layout';
import { formatDateID, formatIDR } from '@/lib/formatters';
import { toastError, toastSuccess } from '@/lib/toast';
import accountingRoutes from '@/routes/accounting';
import type { BreadcrumbItem } from '@/types';
import type { JournalEntry, JournalEntryLine } from '@/types/accounting';
import { useState } from 'react';

interface PageProps {
    entry: JournalEntry & {
        lines: JournalEntryLine[];
    };
}

export default function ShowJournal({ entry }: PageProps) {
    const [isVoidDialogOpen, setIsVoidDialogOpen] = useState(false);

    const {
        data: voidData,
        setData: setVoidData,
        post: submitVoid,
        processing: isVoiding,
        errors: voidErrors,
        reset: resetVoidForm,
    } = useForm({
        reason: '',
    });

    const breadcrumbs: BreadcrumbItem[] = [
        {
            title: 'Akuntansi',
            href: accountingRoutes.journal().url,
        },
        {
            title: 'Jurnal Umum',
            href: accountingRoutes.journal().url,
        },
        {
            title: `Voucher ${entry.voucher_number}`,
            href: accountingRoutes.journal.show({ entry: entry.id }).url,
        },
    ];

    const columns: ColumnDef<JournalEntryLine>[] = [
        {
            accessorKey: 'account.code',
            header: 'Kode Akun',
            cell: ({ row }) => (
                <Link
                    href={
                        accountingRoutes.accounts.show({
                            account: row.original.account_id,
                        }).url
                    }
                    className="font-mono text-primary hover:underline"
                >
                    {row.original.account?.code}
                </Link>
            ),
        },
        {
            accessorKey: 'account.name',
            header: 'Nama Akun',
            cell: ({ row }) => row.original.account?.name,
        },
        {
            accessorKey: 'description',
            header: 'Keterangan',
        },
        {
            id: 'debit',
            header: () => <div className="text-right">Debit</div>,
            cell: ({ row }) => {
                const amount =
                    row.original.type === 'debit' ? row.original.amount : 0;
                return amount > 0 ? (
                    <div className="text-right">{formatIDR(amount)}</div>
                ) : (
                    <div className="text-right">-</div>
                );
            },
        },
        {
            id: 'credit',
            header: () => <div className="text-right">Kredit</div>,
            cell: ({ row }) => {
                const amount =
                    row.original.type === 'credit' ? row.original.amount : 0;
                return amount > 0 ? (
                    <div className="text-right">{formatIDR(amount)}</div>
                ) : (
                    <div className="text-right">-</div>
                );
            },
        },
    ];

    const totalDebit = entry.lines.reduce(
        (sum, line) => sum + (line.type === 'debit' ? line.amount : 0),
        0,
    );
    const totalCredit = entry.lines.reduce(
        (sum, line) => sum + (line.type === 'credit' ? line.amount : 0),
        0,
    );

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title={`Jurnal Entry - ${entry.voucher_number}`} />

            <div className="flex h-full flex-1 flex-col gap-4 p-4">
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <Button variant="outline" size="icon" asChild>
                            <Link href={accountingRoutes.journal().url}>
                                <ArrowLeft className="h-4 w-4" />
                            </Link>
                        </Button>
                        <div className="flex flex-col gap-1">
                            <h1 className="text-2xl font-black">
                                Voucher {entry.voucher_number}
                            </h1>
                            <p className="text-sm text-muted-foreground">
                                {formatDateID(entry.transaction_date)} •{' '}
                                {entry.source_type || 'Manual Entry'}
                            </p>
                        </div>
                    </div>
                    <div className="flex gap-2">
                        <Button variant="outline">
                            <Printer className="mr-2 h-4 w-4" />
                            Cetak
                        </Button>
                        {entry.status === 'posted' && (
                            <Dialog
                                open={isVoidDialogOpen}
                                onOpenChange={(open) => {
                                    if (!open && !isVoiding) {
                                        setIsVoidDialogOpen(false);
                                        resetVoidForm();
                                    } else if (open) {
                                        setIsVoidDialogOpen(true);
                                    }
                                }}
                            >
                                <DialogTrigger asChild>
                                    <Button variant="destructive">
                                        <RotateCcw className="mr-2 h-4 w-4" />
                                        Void
                                    </Button>
                                </DialogTrigger>
                                <DialogContent>
                                    <DialogHeader>
                                        <DialogTitle>
                                            Void Jurnal Umum
                                        </DialogTitle>
                                        <DialogDescription>
                                            Apakah Anda yakin ingin membatalkan
                                            transaksi jurnal{' '}
                                            <span className="font-mono font-medium text-foreground">
                                                {entry.voucher_number}
                                            </span>
                                            ? Aksi ini akan memutarbalikkan
                                            saldo (reverse) dan tidak bisa
                                            diurungkan.
                                        </DialogDescription>
                                    </DialogHeader>

                                    <div className="grid gap-4 py-4">
                                        <div className="grid gap-2">
                                            <Label htmlFor="reason">
                                                Alasan Pembatalan{' '}
                                                <span className="text-destructive">
                                                    *
                                                </span>
                                            </Label>
                                            <Textarea
                                                id="reason"
                                                placeholder="Berikan alasan mengapa jurnal ini dibatalkan..."
                                                value={voidData.reason}
                                                onChange={(e) =>
                                                    setVoidData(
                                                        'reason',
                                                        e.target.value,
                                                    )
                                                }
                                                className={
                                                    voidErrors.reason
                                                        ? 'border-destructive'
                                                        : ''
                                                }
                                                rows={3}
                                            />
                                            {voidErrors.reason && (
                                                <p className="text-sm text-destructive">
                                                    {voidErrors.reason}
                                                </p>
                                            )}
                                        </div>
                                    </div>

                                    <DialogFooter>
                                        <Button
                                            variant="outline"
                                            onClick={() =>
                                                setIsVoidDialogOpen(false)
                                            }
                                            disabled={isVoiding}
                                        >
                                            Batal
                                        </Button>
                                        <Button
                                            variant="destructive"
                                            onClick={() => {
                                                submitVoid(
                                                    accountingRoutes.journal.void(
                                                        { entry: entry.id },
                                                    ).url,
                                                    {
                                                        onSuccess: () => {
                                                            setIsVoidDialogOpen(
                                                                false,
                                                            );
                                                            resetVoidForm();
                                                            toastSuccess(
                                                                'Jurnal berhasil divoid.',
                                                            );
                                                        },
                                                        onError: (err) => {
                                                            const errMsg =
                                                                err.reason ||
                                                                err.message ||
                                                                'Terjadi kesalahan saat melakukan void.';
                                                            toastError(errMsg);
                                                        },
                                                    },
                                                );
                                            }}
                                            disabled={
                                                isVoiding ||
                                                !voidData.reason.trim()
                                            }
                                        >
                                            {isVoiding ? (
                                                <>Membatalkan...</>
                                            ) : (
                                                'Ya, Void Jurnal'
                                            )}
                                        </Button>
                                    </DialogFooter>
                                </DialogContent>
                            </Dialog>
                        )}
                    </div>
                </div>

                <div className="grid gap-4 md:grid-cols-3">
                    <Card className="md:col-span-1">
                        <CardHeader>
                            <CardTitle>Ringkasan</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-4">
                            <div className="flex justify-between border-b pb-2 text-sm">
                                <span className="text-muted-foreground">
                                    Status
                                </span>
                                <StatusBadge
                                    type={
                                        entry.status === 'posted'
                                            ? 'success'
                                            : entry.status === 'void'
                                              ? 'destructive'
                                              : 'warning'
                                    }
                                    status={entry.status}
                                />
                            </div>
                            <div className="flex justify-between border-b pb-2 text-sm">
                                <span className="text-muted-foreground">
                                    Dibuat Oleh
                                </span>
                                <span className="font-medium">
                                    {entry.creator?.name || '-'}
                                </span>
                            </div>
                            <div className="flex justify-between border-b pb-2 text-sm">
                                <span className="text-muted-foreground">
                                    Diposting Pada
                                </span>
                                <span className="font-medium">
                                    {entry.posted_at
                                        ? formatDateID(entry.posted_at)
                                        : '-'}
                                </span>
                            </div>
                            <div className="space-y-1">
                                <span className="text-xs text-muted-foreground">
                                    Deskripsi
                                </span>
                                <p className="text-sm">{entry.description}</p>
                            </div>
                        </CardContent>
                    </Card>

                    <Card className="md:col-span-2">
                        <CardHeader>
                            <CardTitle>Rincian Baris</CardTitle>
                            <CardDescription>
                                Detail debit dan kredit untuk transaksi ini.
                            </CardDescription>
                        </CardHeader>
                        <CardContent>
                            <DataTable columns={columns} data={entry.lines} />
                            <div className="mt-4 flex justify-end">
                                <div className="w-full space-y-2 md:w-1/2">
                                    <div className="flex justify-between border-b pb-1">
                                        <span className="font-medium">
                                            Total Debit
                                        </span>
                                        <span className="font-bold">
                                            {formatIDR(totalDebit)}
                                        </span>
                                    </div>
                                    <div className="flex justify-between border-b pb-1">
                                        <span className="font-medium">
                                            Total Kredit
                                        </span>
                                        <span className="font-bold">
                                            {formatIDR(totalCredit)}
                                        </span>
                                    </div>
                                    <div className="flex justify-between pt-1">
                                        <span className="text-lg font-bold">
                                            Terbalance
                                        </span>
                                        <span className="text-lg font-bold text-green-600">
                                            Yes
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </div>
        </AppLayout>
    );
}