import { Head, router } from "@inertiajs/react";
import AppLayout from "@/layouts/app-layout";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
type Invoice = {
    id: number;
    invoice_number: string;
    amount: string | number;
    status: string;
    issued_at: string;
    due_at: string | null;
    paid_at: string | null;
    payment_url: string | null;
    subscription_plan?: { name: string };
};
type Props = { company: any; invoices: { data: Invoice[] } };
const money = (v: string | number) =>
    new Intl.NumberFormat("id-ID", {
        style: "currency",
        currency: "IDR",
        maximumFractionDigits: 0,
    }).format(Number(v));
export default function Billing({ company, invoices }: Props) {
    const plan = company.subscription_plan;
    const pay = () =>
        plan?.id && router.post("/crm/billing/pay", { plan_id: plan.id });
    return (
        <AppLayout breadcrumbs={[{ title: "Billing", href: "/crm/billing" }]}>
            <Head title="Billing" />
            <div className="space-y-6 p-4 md:p-6">
                <div>
                    <h1 className="text-2xl font-semibold">
                        Billing Subscription
                    </h1>
                    <p className="text-muted-foreground">
                        Tagihan SaaS perusahaan dan pembayaran paket.
                    </p>
                </div>
                <Card>
                    <CardHeader>
                        <CardTitle>Paket aktif</CardTitle>
                    </CardHeader>
                    <CardContent className="flex flex-wrap items-center justify-between gap-4">
                        <div>
                            <div className="text-lg font-semibold">
                                {plan?.name ?? "-"}
                            </div>
                            <div className="text-sm text-muted-foreground">
                                Status: {company.subscription_status} ·
                                Berakhir:{" "}
                                {company.subscription_expires_at ?? "-"}
                            </div>
                        </div>
                        {plan?.monthly_price > 0 && (
                            <Button onClick={pay}>Bayar / Buat Invoice</Button>
                        )}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle>Riwayat Invoice</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="overflow-x-auto">
                            <Table className="w-full text-sm">
                                <TableHeader>
                                    <TableRow className="border-b text-left">
                                        <TableHead className="p-2">
                                            Invoice
                                        </TableHead>
                                        <TableHead className="p-2">
                                            Paket
                                        </TableHead>
                                        <TableHead className="p-2">
                                            Jumlah
                                        </TableHead>
                                        <TableHead className="p-2">
                                            Status
                                        </TableHead>
                                        <TableHead className="p-2">
                                            Aksi
                                        </TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {invoices.data.map((i) => (
                                        <TableRow
                                            className="border-b"
                                            key={i.id}
                                        >
                                            <TableCell className="p-2">
                                                {i.invoice_number}
                                            </TableCell>
                                            <TableCell className="p-2">
                                                {i.subscription_plan?.name}
                                            </TableCell>
                                            <TableCell className="p-2">
                                                {money(i.amount)}
                                            </TableCell>
                                            <TableCell className="p-2">
                                                {i.status}
                                            </TableCell>
                                            <TableCell className="p-2">
                                                {i.status === "pending" &&
                                                i.payment_url ? (
                                                    <Button
                                                        size="sm"
                                                        variant="outline"
                                                        onClick={() =>
                                                            (window.location.href =
                                                                i.payment_url!)
                                                        }
                                                    >
                                                        Bayar
                                                    </Button>
                                                ) : i.paid_at ? (
                                                    "Lunas"
                                                ) : (
                                                    "-"
                                                )}
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                            </Table>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}