import { Building2, CalendarDays, CircleDollarSign, Percent } from "lucide-react";

import { RecordViewMutationActions } from "@/app/customer/_components/record-view/record-view-mutation-actions";
import {
  RecordViewHeader,
  RecordViewHero,
  RecordViewShell,
} from "@/app/customer/_components/record-view/record-view-layout";
import {
  displayValue,
  formatRecordMoney,
  RecordDetailRow,
  RecordExternalLinkRow,
  RecordViewSection,
} from "@/app/customer/_components/record-view/record-view-primitives";
import { ErrorBanner } from "@/components/shared/error-banner";
import { FRONTEND_ROUTES } from "@/config/frontend-routes";
import { formatApiDate } from "@/lib/format/dates";
import { customerUrl } from "@/lib/tenant";

import type { LeverageViewPageData } from "../_lib/fetch-leverage-view-page";

type LeverageViewPageProps = {
  tenant: string;
  data: LeverageViewPageData;
  backHref?: string;
};

export function LeverageViewPage({ tenant, data, backHref }: LeverageViewPageProps) {
  const {
    values,
    refId,
    currencyLabel,
    bankLabel,
    timePeriodLabel,
    transactionLabel,
    errorMessage,
    id,
  } = data;
  const localId = id.split("-")[0] ?? id;
  const listHref = backHref || customerUrl(tenant, "/fx-currency/leverage");
  const editHref = customerUrl(
    tenant,
    `/fx-currency/leverage/form?id=${encodeURIComponent(localId)}`,
  );
  const cashflowHref = customerUrl(tenant, "/reports/cashflow");
  const currency = currencyLabel.trim();
  const title = currency ? `${currency} leverage` : `Leverage #${localId}`;

  return (
    <RecordViewShell>
      <RecordViewHeader
        tone="rose"
        badgeLabel="Leverage"
        title={displayValue(title, `Leverage #${localId}`)}
        refId={displayValue(refId, localId)}
        actions={
          <RecordViewMutationActions
            localId={localId}
            refId={displayValue(refId, localId)}
            listHref={listHref}
            cashflowHref={cashflowHref}
            editHref={editHref}
            deleteLabel="leverage"
            deleteHref={FRONTEND_ROUTES.customerPortal.leverage.delete(tenant)}
            successTitle="Leverage deleted"
          />
        }
      />

      <ErrorBanner message={errorMessage} />

      {!errorMessage && values ? (
        <>
          <RecordViewHero
            tone="rose"
            amountLabel="Amount"
            amount={formatRecordMoney(values.price || values.amount, currency)}
            subtitle={`Interest ${displayValue(values.i_rate)}% p.a.${
              timePeriodLabel ? ` · ${timePeriodLabel}` : ""
            }`}
            leftDate={values.t_date}
            leftDateLabel="Placement"
            rightDateLabel="Maturity"
            rightDate={values.m_date}
          />

          <div className="grid gap-4 lg:grid-cols-2">
            <RecordViewSection title="Leverage details" icon={<Percent className="size-4" />}>
              <RecordDetailRow label="Currency" value={displayValue(currency)} />
              <RecordDetailRow
                label="Amount"
                value={formatRecordMoney(values.price || values.amount, currency)}
              />
              <RecordDetailRow label="Time period" value={displayValue(timePeriodLabel)} />
              <RecordDetailRow
                label="Interest rate"
                value={
                  values.i_rate != null && String(values.i_rate).trim() !== ""
                    ? `${displayValue(values.i_rate)}% p.a.`
                    : "—"
                }
              />
              <RecordDetailRow label="Transaction" value={displayValue(transactionLabel)} />
              <RecordDetailRow label="Reference no." value={displayValue(values.r_no)} />
            </RecordViewSection>

            <RecordViewSection title="Dates" icon={<CalendarDays className="size-4" />}>
              <RecordDetailRow
                label="Placement date"
                value={formatApiDate(values.t_date, "dd MMM yyyy", values.t_date) || "—"}
              />
              <RecordDetailRow
                label="Maturity date"
                value={formatApiDate(values.m_date, "dd MMM yyyy", values.m_date) || "—"}
              />
              {values.total_days != null && values.total_days > 0 ? (
                <RecordDetailRow label="Total days" value={String(values.total_days)} />
              ) : null}
            </RecordViewSection>

            <RecordViewSection title="Fees" icon={<CircleDollarSign className="size-4" />}>
              <RecordDetailRow
                label="Transaction costs"
                value={formatRecordMoney(values.commission, currency)}
              />
              <RecordDetailRow label="Premium" value={displayValue(values.b_1)} />
              <RecordDetailRow label="Tax" value={displayValue(values.b_2)} />
            </RecordViewSection>

            <RecordViewSection title="Settlement" icon={<Building2 className="size-4" />}>
              <RecordDetailRow label="Bank" value={displayValue(bankLabel)} />
              <RecordDetailRow label="Purpose" value={displayValue(values.purpose)} />
              <RecordDetailRow label="Remarks" value={displayValue(values.remarks)} />
              {values.r_link?.trim() ? <RecordExternalLinkRow href={values.r_link} /> : null}
            </RecordViewSection>
          </div>
        </>
      ) : null}
    </RecordViewShell>
  );
}