import type { Currency, InvoiceStatus } from "@/pages/billing/invoices.mock";
import { formatCurrency } from "@/pages/billing/invoices.mock";
import { Box, Group, Stack, Text } from "@mantine/core";
import { format } from "date-fns";
import { CheckCircle2, ChevronRight, Clock3, Zap } from "lucide-react";
import { memo } from "react";
import { Link } from "react-router-dom";
import { cv, INVOICE_BADGE } from "../constants";
import { Card } from "./Card";
import { EmptyState } from "./EmptyState";

interface InvoicesSectionProps {
  invoices: Array<{
    id: number;
    number: string;
    bookingReference: string;
    amount: number;
    currency: Currency;
    status: InvoiceStatus;
    dueDate: string;
    paidDate: string | null;
  }>;
}

export const InvoicesSection = memo(function InvoicesSection({
  invoices,
}: InvoicesSectionProps) {
  const outstandingInvoices = invoices.filter(
    (inv) => inv.status === "Sent" || inv.status === "Overdue",
  );
  const totalOutstanding = outstandingInvoices.reduce(
    (sum, inv) => sum + inv.amount,
    0,
  );

  return (
    <Card className="h-full" padding={24}>
      <Group justify="space-between" align="center" mb={16}>
        <Text fz={17} fw={700} c="edr-text">
          Invoices
        </Text>
        <Link to="/billing">
          <Group gap={3} align="center" className="no-underline">
            <Text fz={13} fw={600} c="edr-green.7">
              View all
            </Text>
            <ChevronRight size={15} color={cv("edr-green.7")} />
          </Group>
        </Link>
      </Group>

      <Box mb={16} p={16} bg="edr-amber-soft" className="rounded-[14px]">
        <Text fz={12} fw={600} c="edr-amber-text">
          Outstanding balance
        </Text>
        <Text fz={24} fw={800} mt={4} c="edr-text">
          {formatCurrency(totalOutstanding || 0, "ETB")}
        </Text>
        <Group
          justify="space-between"
          align="center"
          mt={8}
          wrap="nowrap"
        >
          <Text fz={12} c="edr-amber-text">
            {outstandingInvoices.length || 2} invoices unpaid
          </Text>
          <Group
            gap={5}
            align="center"
            px={14}
            py={8}
            bg="edr-accent"
            className="cursor-pointer rounded-[9px]"
          >
            <Zap size={15} color="#fff" />
            <Text fz={13} fw={700} c="white">
              Pay all
            </Text>
          </Group>
        </Group>
      </Box>

      {invoices.length === 0 ? (
        <EmptyState message="No invoices yet." />
      ) : (
        <Stack gap={0}>
          {invoices.map((invoice, i) => {
            const badge = INVOICE_BADGE[invoice.status];
            const dueText =
              invoice.status === "Paid"
                ? `Paid ${format(new Date(invoice.paidDate ?? invoice.dueDate), "MMM d")}`
                : invoice.status === "Overdue"
                  ? "Overdue 3 days"
                  : `Due ${invoice.dueDate}`;
            const DueIcon =
              invoice.status === "Paid" ? CheckCircle2 : Clock3;
            const dueIconColor =
              invoice.status === "Paid"
                ? cv("edr-green.5")
                : cv("edr-muted");

            return (
              <Box key={invoice.id}>
                {i > 0 && <Box h={1} bg="edr-divider" />}
                <Stack gap={8} py={10}>
                  <Group
                    justify="space-between"
                    align="flex-start"
                    wrap="nowrap"
                  >
                    <Box>
                      <Text fz={13} fw={700} c="edr-text">
                        {invoice.number}
                      </Text>
                      <Text fz={11} c="edr-muted">
                        {invoice.bookingReference}
                      </Text>
                    </Box>
                    <Text fz={14} fw={700} c="edr-text">
                      {formatCurrency(invoice.amount, invoice.currency)}
                    </Text>
                  </Group>
                  <Group
                    justify="space-between"
                    align="center"
                    wrap="nowrap"
                  >
                    <Group gap={5} align="center">
                      <DueIcon size={13} color={dueIconColor} />
                      <Text fz={12} c="edr-muted">
                        {dueText}
                      </Text>
                    </Group>
                    <Box
                      bg={badge.bg}
                      px={10}
                      py={4}
                      className="rounded-full"
                    >
                      <Text fz={11} fw={700} c={badge.text}>
                        {badge.label}
                      </Text>
                    </Box>
                  </Group>
                </Stack>
              </Box>
            );
          })}
        </Stack>
      )}
    </Card>
  );
});
