import { Building2, CalendarDays, CircleDollarSign, Layers3 } 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 { SwapsViewPageData } from "../_lib/fetch-swaps-view-page";

type SwapsViewPageProps = {
  tenant: string;
  data: SwapsViewPageData;
  backHref?: string;
};

export function SwapsViewPage({ tenant, data, backHref }: SwapsViewPageProps) {
  const {
    values,
    refId,
    boughtCurrencyLabel,
    soldCurrencyLabel,
    bankLabel,
    errorMessage,
    id,
  } = data;
  const localId = id.split("-")[0] ?? id;
  const listHref = backHref || customerUrl(tenant, "/fx-currency/swaps");
  const editHref = customerUrl(
    tenant,
    `/fx-currency/swaps/form?id=${encodeURIComponent(localId)}`,
  );
  const cashflowHref = customerUrl(tenant, "/reports/cashflow");
  const bought = boughtCurrencyLabel.trim();
  const sold = soldCurrencyLabel.trim();
  const pair =
    bought && sold ? `${bought} / ${sold}` : bought || sold || `Swap #${localId}`;

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

      <ErrorBanner message={errorMessage} />

      {!errorMessage && values ? (
        <>
          <RecordViewHero
            tone="teal"
            amountLabel="Amount swapped"
            amount={formatRecordMoney(values.amount, sold)}
            subtitle={`Base ${formatRecordMoney(values.price, bought)} · Rate ${displayValue(values.quantity)}`}
            leftDate={values.t_date}
            leftDateLabel="Placement"
            rightDateLabel="Maturity"
            rightDate={values.m_date}
          />

          <div className="grid gap-4 lg:grid-cols-2">
            <RecordViewSection title="Swap details" icon={<Layers3 className="size-4" />}>
              <RecordDetailRow label="Currency bought" value={displayValue(bought)} />
              <RecordDetailRow label="Currency sold" value={displayValue(sold)} />
              <RecordDetailRow
                label="Amount (base)"
                value={formatRecordMoney(values.price, bought)}
              />
              <RecordDetailRow label="Rate of swap" value={displayValue(values.quantity)} />
              <RecordDetailRow
                label="Amount swapped"
                value={formatRecordMoney(values.amount, sold)}
              />
              <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) || "—"}
              />
            </RecordViewSection>

            <RecordViewSection title="Fees" icon={<CircleDollarSign className="size-4" />}>
              <RecordDetailRow
                label="Commission"
                value={formatRecordMoney(values.commission, bought)}
              />
              <RecordDetailRow label="Charges abroad" value={displayValue(values.b_1)} />
              <RecordDetailRow label="Turnover 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>
  );
}