import { Head, Link } from '@inertiajs/react';
import { ArrowLeft, Printer } from 'lucide-react';
import { AppLogoIcon } from '@/components/brand';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatCurrency } from '@/lib/utils';
import { index as invoiceIndex } from '@/routes/admin/manage/invoices';
import { InvoiceShareButton } from './invoice-share-button';

type InvoiceItem = {
    id: number;
    name: string;
    quantity: number;
    price: number;
    subtotal: number;
};

type Company = {
    name: string;
    address: string | null;
    email: string | null;
    phone: string | null;
};

type PrintInvoice = {
    id: number;
    invoice_number: string;
    customer_name: string;
    customer_phone: string | null;
    customer_address: string | null;
    amount: number;
    formatted_amount: string;
    formatted_date: string;
    formatted_due_date: string | null;
    status: 'unpaid' | 'paid';
    status_label: string;
    description: string | null;
    items: InvoiceItem[];
    company: Company;
};

type Props = {
    invoice: PrintInvoice;
};

const STATUS_BADGE_CLASSES: Record<string, string> = {
    unpaid: 'bg-yellow-100 text-yellow-800 hover:bg-yellow-100',
    paid: 'bg-green-100 text-green-800 hover:bg-green-100',
};

export default function InvoicePrint({ invoice }: Props) {
    const { company } = invoice;

    return (
        <>
            <Head title={`Invoice ${invoice.invoice_number}`} />

            <div className="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
                <div className="mb-6 flex items-center justify-between print:hidden">
                    <Button asChild variant="outline">
                        <Link href={invoiceIndex.url()}>
                            <ArrowLeft className="h-4 w-4" />
                            Kembali
                        </Link>
                    </Button>
                    <div className="flex items-center gap-2">
                        <InvoiceShareButton invoice={invoice} />
                        <Button onClick={() => window.print()}>
                            <Printer className="h-4 w-4" />
                            Cetak / Simpan PDF
                        </Button>
                    </div>
                </div>

                <div className="relative overflow-hidden rounded-lg border bg-card shadow-sm print:rounded-none print:border-none print:shadow-none">
                    <AppLogoIcon className="pointer-events-none absolute inset-0 m-auto h-80 w-80 object-contain opacity-20 print:opacity-25" />

                    <div className="relative z-10 border-b bg-muted/30 p-6 print:bg-white">
                        <div className="flex flex-wrap items-start justify-between gap-4">
                            <div>
                                <h1 className="text-2xl font-bold tracking-tight">
                                    INVOICE
                                </h1>
                                <p className="mt-1 font-medium">
                                    {company.name}
                                </p>
                                {company.address && (
                                    <p className="max-w-xs text-sm text-muted-foreground">
                                        {company.address}
                                    </p>
                                )}
                                {(company.phone || company.email) && (
                                    <p className="text-sm text-muted-foreground">
                                        {[company.phone, company.email]
                                            .filter(Boolean)
                                            .join(' · ')}
                                    </p>
                                )}
                            </div>
                            <div className="text-right">
                                <p className="text-lg font-semibold">
                                    {invoice.invoice_number}
                                </p>
                                <Badge
                                    variant="secondary"
                                    className={
                                        STATUS_BADGE_CLASSES[invoice.status]
                                    }
                                >
                                    {invoice.status_label}
                                </Badge>
                            </div>
                        </div>
                    </div>

                    <div className="relative z-10 grid grid-cols-1 gap-6 p-6 sm:grid-cols-2">
                        <div>
                            <p className="text-sm text-muted-foreground">
                                Ditagihkan Kepada
                            </p>
                            <p className="font-medium">
                                {invoice.customer_name}
                            </p>
                            {invoice.customer_phone && (
                                <p className="text-sm text-muted-foreground">
                                    {invoice.customer_phone}
                                </p>
                            )}
                            {invoice.customer_address && (
                                <p className="max-w-xs text-sm text-muted-foreground">
                                    {invoice.customer_address}
                                </p>
                            )}
                        </div>
                        <div className="sm:text-right">
                            <p className="text-sm text-muted-foreground">
                                Tanggal Invoice
                            </p>
                            <p className="font-medium">
                                {invoice.formatted_date}
                            </p>
                            {invoice.formatted_due_date && (
                                <>
                                    <p className="mt-2 text-sm text-muted-foreground">
                                        Jatuh Tempo
                                    </p>
                                    <p className="font-medium">
                                        {invoice.formatted_due_date}
                                    </p>
                                </>
                            )}
                        </div>
                    </div>

                    <div className="relative z-10 px-6 pb-6">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Item</TableHead>
                                    <TableHead className="text-center">
                                        Jumlah
                                    </TableHead>
                                    <TableHead className="text-right">
                                        Harga Satuan
                                    </TableHead>
                                    <TableHead className="text-right">
                                        Subtotal
                                    </TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                {invoice.items.map((item) => (
                                    <TableRow key={item.id}>
                                        <TableCell>{item.name}</TableCell>
                                        <TableCell className="text-center">
                                            {item.quantity}
                                        </TableCell>
                                        <TableCell className="text-right">
                                            {formatCurrency(item.price)}
                                        </TableCell>
                                        <TableCell className="text-right">
                                            {formatCurrency(item.subtotal)}
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </TableBody>
                        </Table>

                        <div className="mt-4 flex justify-end">
                            <div className="w-full max-w-xs space-y-2">
                                <div className="flex items-center justify-between border-t pt-2 text-base font-semibold">
                                    <span>Total</span>
                                    <span>{invoice.formatted_amount}</span>
                                </div>
                            </div>
                        </div>

                        {invoice.description && (
                            <div className="mt-6 border-t pt-4">
                                <p className="text-sm text-muted-foreground">
                                    Keterangan
                                </p>
                                <p className="mt-1 text-sm">
                                    {invoice.description}
                                </p>
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </>
    );
}
