import { Table, Tabs } from "@tailor-platform/app-shell";
import { Fragment, useState } from "react";
import { useT } from "@/i18n/labels";
import { formatCurrency } from "@/lib/format-currency";
import { formatDate } from "@/lib/format-date";
import { StatusBadge } from "@/lib/status";

export interface JournalViewLine {
  id: string;
  accountLabel: string;
  description?: string | null;
  debit: string | null;
  credit: string | null;
}

export interface JournalViewEntry {
  id: string;
  entryDate: string;
  status: string;
  heading?: string | null;
  lines: JournalViewLine[];
}

interface Props {
  entries: JournalViewEntry[];
}

const amountNum = (value: string | null | undefined): number =>
  value != null && Number(value) !== 0 ? Number(value) : 0;

const amountText = (value: string | null | undefined): string => {
  const n = amountNum(value);
  return n !== 0 ? formatCurrency(n) : "—";
};

export const JournalEntriesView = ({ entries }: Props) => {
  const t = useT();
  const [viewMode, setViewMode] = useState<"flat" | "grouped">("flat");

  return (
    <div className="overflow-hidden rounded-md border border-border bg-card shadow-xs">
      {/* View switcher inside the card: List (flat) ⟷ Voucher (grouped) — a bare
          capsule toggle, no leading label. */}
      <div className="flex justify-end border-b px-4 py-2">
        <Tabs.Root
          variant="capsule"
          value={viewMode}
          onValueChange={(value) => setViewMode(value === "flat" ? "flat" : "grouped")}
        >
          <Tabs.List>
            <Tabs.Tab value="flat">{t("journal.view.list")}</Tabs.Tab>
            <Tabs.Tab value="grouped">{t("journal.view.voucher")}</Tabs.Tab>
          </Tabs.List>
        </Tabs.Root>
      </div>

      {entries.map((entry, index) => {
        const debitLines = entry.lines.filter((l) => amountNum(l.debit) !== 0);
        const creditLines = entry.lines.filter((l) => amountNum(l.credit) !== 0);
        const rowCount = Math.max(debitLines.length, creditLines.length);

        const totalDebit = entry.lines.reduce((sum, l) => sum + amountNum(l.debit), 0);
        const totalCredit = entry.lines.reduce((sum, l) => sum + amountNum(l.credit), 0);

        return (
          <Fragment key={entry.id}>
            {/* Each entry is a section within the shared card, separated by a rule. */}
            <div className={index > 0 ? "border-t border-border" : undefined}>
              {/* Header: heading (if any) on the left, date + status on the right */}
              <div className="flex items-center justify-between gap-2 border-b px-4 py-3 text-sm text-muted-foreground">
                {entry.heading ? <span>{entry.heading}</span> : <span />}
                <div className="flex shrink-0 items-center gap-2">
                  <span>{formatDate(entry.entryDate, "medium")}</span>
                  <StatusBadge value={entry.status} />
                </div>
              </div>
              <div className="overflow-x-auto">
                {viewMode === "grouped" ? (
                  <Table.Root>
                    <Table.Header>
                      <Table.Row>
                        <Table.Head className="ps-6! border-e text-center" colSpan={2}>
                          {t("journal.view.debit")}
                        </Table.Head>
                        <Table.Head className="pe-6! text-center" colSpan={2}>
                          {t("journal.view.credit")}
                        </Table.Head>
                      </Table.Row>
                      <Table.Row>
                        <Table.Head className="ps-6! border-e">
                          {t("journal.view.account")}
                        </Table.Head>
                        <Table.Head className="text-right border-e">
                          {t("journal.view.debit")}
                        </Table.Head>
                        <Table.Head className="border-e">{t("journal.view.account")}</Table.Head>
                        <Table.Head className="pe-6! text-right">
                          {t("journal.view.credit")}
                        </Table.Head>
                      </Table.Row>
                    </Table.Header>
                    <Table.Body>
                      {Array.from({ length: rowCount }, (_, i) => {
                        const dr = debitLines[i];
                        const cr = creditLines[i];
                        return (
                          <Table.Row key={`${entry.id}-grouped-${i}`}>
                            <Table.Cell className="ps-6! text-sm border-e">
                              {dr ? dr.accountLabel : null}
                            </Table.Cell>
                            <Table.Cell className="text-right tabular-nums border-e">
                              {dr ? amountText(dr.debit) : ""}
                            </Table.Cell>
                            <Table.Cell className="text-sm border-e">
                              {cr ? cr.accountLabel : null}
                            </Table.Cell>
                            <Table.Cell className="pe-6! text-right tabular-nums">
                              {cr ? amountText(cr.credit) : ""}
                            </Table.Cell>
                          </Table.Row>
                        );
                      })}
                    </Table.Body>
                    <Table.Footer>
                      <Table.Row>
                        <Table.Cell className="ps-6! font-medium border-e" colSpan={1}>
                          {t("journal.view.total")}
                        </Table.Cell>
                        <Table.Cell className="text-right font-medium tabular-nums border-e">
                          {formatCurrency(totalDebit)}
                        </Table.Cell>
                        <Table.Cell className="border-e" />
                        <Table.Cell className="pe-6! text-right font-medium tabular-nums">
                          {formatCurrency(totalCredit)}
                        </Table.Cell>
                      </Table.Row>
                    </Table.Footer>
                  </Table.Root>
                ) : (
                  <Table.Root>
                    <Table.Header>
                      <Table.Row>
                        <Table.Head className="ps-6! border-e">
                          {t("journal.view.account")}
                        </Table.Head>
                        <Table.Head className="border-e">
                          {t("journal.view.description")}
                        </Table.Head>
                        <Table.Head className="text-right border-e">
                          {t("journal.view.debit")}
                        </Table.Head>
                        <Table.Head className="pe-6! text-right">
                          {t("journal.view.credit")}
                        </Table.Head>
                      </Table.Row>
                    </Table.Header>
                    <Table.Body>
                      {entry.lines.map((line) => (
                        <Table.Row key={`${entry.id}-flat-${line.id}`}>
                          <Table.Cell className="ps-6! text-sm border-e">
                            {line.accountLabel}
                          </Table.Cell>
                          <Table.Cell className="text-sm text-muted-foreground border-e">
                            {line.description ?? null}
                          </Table.Cell>
                          <Table.Cell className="text-right tabular-nums border-e">
                            {amountText(line.debit)}
                          </Table.Cell>
                          <Table.Cell className="pe-6! text-right tabular-nums">
                            {amountText(line.credit)}
                          </Table.Cell>
                        </Table.Row>
                      ))}
                    </Table.Body>
                    <Table.Footer>
                      <Table.Row>
                        <Table.Cell className="ps-6! font-medium border-e">
                          {t("journal.view.total")}
                        </Table.Cell>
                        <Table.Cell className="border-e" />
                        <Table.Cell className="text-right font-medium tabular-nums border-e">
                          {formatCurrency(totalDebit)}
                        </Table.Cell>
                        <Table.Cell className="pe-6! text-right font-medium tabular-nums">
                          {formatCurrency(totalCredit)}
                        </Table.Cell>
                      </Table.Row>
                    </Table.Footer>
                  </Table.Root>
                )}
              </div>
            </div>
          </Fragment>
        );
      })}
    </div>
  );
};