import { Head } from '@inertiajs/react';
import { Download, Printer } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Table,
    TableBody,
    TableCell,
    TableFooter,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import AppLayout from '@/layouts/app-layout';
import { formatIDR } from '@/lib/formatters';
import { useFilterParams } from '@/lib/hooks/useFilterParams';
import accountingRoutes from '@/routes/accounting';
import type { BreadcrumbItem } from '@/types';

interface BalanceItem {
    code: string;
    name: string;
    balance: number;
}

interface PageProps {
    assets: BalanceItem[];
    liabilities: BalanceItem[];
    equity: BalanceItem[];
    total_assets: number;
    total_liabilities: number;
    total_equity: number;
    as_of_date: string;
}

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Akuntansi',
        href: accountingRoutes.accounts.index().url,
    },
    {
        title: 'Laporan Keuangan',
        href: '#',
    },
    {
        title: 'Neraca (Balance Sheet)',
        href: accountingRoutes.reports.balanceSheet().url,
    },
];

export default function BalanceSheet({
    assets,
    liabilities,
    equity,
    total_assets,
    total_liabilities,
    total_equity,
    as_of_date,
}: PageProps) {
    const { updateFilter } = useFilterParams({
        baseUrl: accountingRoutes.reports.balanceSheet().url,
    });

    const handleDateChange = (date: string) => {
        updateFilter('as_of_date', date);
    };

    return (
        <AppLayout breadcrumbs={breadcrumbs}>
            <Head title="Neraca (Balance Sheet)" />

            <div className="flex h-full flex-1 flex-col gap-4 p-4">
                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
                    <div className="flex flex-col gap-1">
                        <h1 className="text-2xl font-black">
                            Neraca (Balance Sheet)
                        </h1>
                        <p className="text-sm text-muted-foreground">
                            Ringkasan aset, kewajiban, dan ekuitas pada titik
                            waktu tertentu.
                        </p>
                    </div>
                    <div className="flex gap-2">
                        <DropdownMenu>
                            <DropdownMenuTrigger asChild>
                                <Button variant="outline" size="sm">
                                    <Download className="mr-2 h-4 w-4" />
                                    Export
                                </Button>
                            </DropdownMenuTrigger>
                            <DropdownMenuContent align="end">
                                <DropdownMenuItem asChild>
                                    <a
                                        href={
                                            accountingRoutes.reports.balanceSheet.export(
                                                {
                                                    query: {
                                                        as_of_date:
                                                            as_of_date.split(
                                                                'T',
                                                            )[0],
                                                        format: 'pdf',
                                                    },
                                                },
                                            ).url
                                        }
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="w-full cursor-pointer"
                                    >
                                        Export PDF
                                    </a>
                                </DropdownMenuItem>
                                <DropdownMenuItem asChild>
                                    <a
                                        href={
                                            accountingRoutes.reports.balanceSheet.export(
                                                {
                                                    query: {
                                                        as_of_date:
                                                            as_of_date.split(
                                                                'T',
                                                            )[0],
                                                        format: 'csv',
                                                    },
                                                },
                                            ).url
                                        }
                                        className="w-full cursor-pointer"
                                    >
                                        Export CSV
                                    </a>
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                        <Button
                            variant="outline"
                            size="sm"
                            onClick={() => window.print()}
                        >
                            <Printer className="mr-2 h-4 w-4" />
                            Cetak
                        </Button>
                    </div>
                </div>

                <Card className="mb-4">
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
                        <CardTitle>Filter Laporan</CardTitle>
                        <div className="flex items-center gap-2">
                            <Label
                                htmlFor="as_of_date"
                                className="text-sm whitespace-nowrap"
                            >
                                Per Tanggal:
                            </Label>
                            <Input
                                id="as_of_date"
                                type="date"
                                className="w-40"
                                value={as_of_date.split('T')[0]}
                                onChange={(e) =>
                                    handleDateChange(e.target.value)
                                }
                            />
                        </div>
                    </CardHeader>
                </Card>

                <div className="grid gap-4 md:grid-cols-2">
                    {/* ASSETS SECTION */}
                    <div className="space-y-4">
                        <Card>
                            <CardHeader className="rounded-t-lg bg-muted/50">
                                <CardTitle className="text-lg">
                                    AKTIVA (ASSETS)
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="p-0">
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>Akun</TableHead>
                                            <TableHead className="text-right">
                                                Saldo
                                            </TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {assets.map((item: BalanceItem) => (
                                            <TableRow key={item.code}>
                                                <TableCell className="py-2">
                                                    <div className="flex flex-col">
                                                        <span className="font-medium">
                                                            {item.name}
                                                        </span>
                                                        <span className="font-mono text-xs text-muted-foreground">
                                                            {item.code}
                                                        </span>
                                                    </div>
                                                </TableCell>
                                                <TableCell className="py-2 text-right font-medium">
                                                    {formatIDR(item.balance)}
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                    <TableFooter>
                                        <TableRow className="bg-primary/5">
                                            <TableCell className="text-base font-black uppercase">
                                                Total Aktiva
                                            </TableCell>
                                            <TableCell className="text-right text-lg font-black text-primary">
                                                {formatIDR(total_assets)}
                                            </TableCell>
                                        </TableRow>
                                    </TableFooter>
                                </Table>
                            </CardContent>
                        </Card>
                    </div>

                    {/* LIABILITIES & EQUITY SECTION */}
                    <div className="space-y-4">
                        {/* LIABILITIES */}
                        <Card>
                            <CardHeader className="rounded-t-lg bg-muted/50">
                                <CardTitle className="text-lg">
                                    KEWAJIBAN (LIABILITIES)
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="p-0">
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>Akun</TableHead>
                                            <TableHead className="text-right">
                                                Saldo
                                            </TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {liabilities.map(
                                            (item: BalanceItem) => (
                                                <TableRow key={item.code}>
                                                    <TableCell className="py-2">
                                                        <div className="flex flex-col">
                                                            <span className="font-medium">
                                                                {item.name}
                                                            </span>
                                                            <span className="font-mono text-xs text-muted-foreground">
                                                                {item.code}
                                                            </span>
                                                        </div>
                                                    </TableCell>
                                                    <TableCell className="py-2 text-right font-medium">
                                                        {formatIDR(
                                                            item.balance,
                                                        )}
                                                    </TableCell>
                                                </TableRow>
                                            ),
                                        )}
                                    </TableBody>
                                    <TableFooter>
                                        <TableRow className="bg-muted/30">
                                            <TableCell className="font-bold">
                                                Total Kewajiban
                                            </TableCell>
                                            <TableCell className="text-right font-bold">
                                                {formatIDR(total_liabilities)}
                                            </TableCell>
                                        </TableRow>
                                    </TableFooter>
                                </Table>
                            </CardContent>
                        </Card>

                        {/* EQUITY */}
                        <Card>
                            <CardHeader className="rounded-t-lg bg-muted/50">
                                <CardTitle className="text-lg">
                                    MODAL (EQUITY)
                                </CardTitle>
                            </CardHeader>
                            <CardContent className="p-0">
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>Akun</TableHead>
                                            <TableHead className="text-right">
                                                Saldo
                                            </TableHead>
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {equity.map((item: BalanceItem) => (
                                            <TableRow key={item.code}>
                                                <TableCell className="py-2">
                                                    <div className="flex flex-col">
                                                        <span className="font-medium">
                                                            {item.name}
                                                        </span>
                                                        <span className="font-mono text-xs text-muted-foreground">
                                                            {item.code}
                                                        </span>
                                                    </div>
                                                </TableCell>
                                                <TableCell className="py-2 text-right font-medium">
                                                    {formatIDR(item.balance)}
                                                </TableCell>
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                    <TableFooter>
                                        <TableRow className="bg-muted/30">
                                            <TableCell className="font-bold">
                                                Total Modal
                                            </TableCell>
                                            <TableCell className="text-right font-bold">
                                                {formatIDR(total_equity)}
                                            </TableCell>
                                        </TableRow>
                                    </TableFooter>
                                </Table>
                            </CardContent>
                        </Card>

                        {/* FINAL SUMMARY */}
                        <Card className="border-2 border-primary/20">
                            <CardContent className="flex items-center justify-between rounded-lg bg-primary/5 p-4">
                                <span className="text-lg font-black uppercase">
                                    Total Pasiva
                                </span>
                                <span className="text-xl font-black text-primary">
                                    {formatIDR(
                                        total_liabilities + total_equity,
                                    )}
                                </span>
                            </CardContent>
                            {Math.abs(
                                total_assets -
                                    (total_liabilities + total_equity),
                            ) > 0.01 && (
                                <div className="px-4 pb-4">
                                    <div className="rounded bg-red-50 p-2 text-center text-xs font-bold text-red-600">
                                        WARNING: Neraca tidak seimbang! Selisih:{' '}
                                        {formatIDR(
                                            Math.abs(
                                                total_assets -
                                                    (total_liabilities +
                                                        total_equity),
                                            ),
                                        )}
                                    </div>
                                </div>
                            )}
                        </Card>
                    </div>
                </div>
            </div>
        </AppLayout>
    );
}
