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

type BondViewPageProps = {
  tenant: string;
  data: BondViewPageData;
  backHref?: string;
};

export function BondViewPage({ tenant, data, backHref }: BondViewPageProps) {
  const {
    values,
    refId,
    displayName,
    currencyLabel,
    bankLabel,
    transactionLabel,
    executionLabel,
    assetTypeLabel,
    errorMessage,
    id,
  } = data;
  const localId = id.split("-")[0] ?? id;
  const listHref = backHref || customerUrl(tenant, "/bond");
  const editHref = customerUrl(tenant, `/bond/form?id=${encodeURIComponent(localId)}`);
  const cashflowHref = customerUrl(tenant, "/reports/cashflow");
  const currency = currencyLabel || values?.p_currency || values?.currency;

  return (
    <RecordViewShell>
      <RecordViewHeader
        tone="sky"
        badgeLabel="Bond"
        title={displayValue(displayName, `Bond #${localId}`)}
        refId={displayValue(refId, localId)}
        isin={values?.isin}
        actions={
          <RecordViewMutationActions
            localId={localId}
            refId={displayValue(refId, localId)}
            listHref={listHref}
            cashflowHref={cashflowHref}
            editHref={editHref}
            deleteLabel="bond"
            deleteHref={FRONTEND_ROUTES.customerPortal.bond.delete(tenant)}
            successTitle="Bond deleted"
          />
        }
      />

      <ErrorBanner message={errorMessage} />

      {!errorMessage && values ? (
        <>
          <RecordViewHero
            tone="sky"
            amount={formatRecordMoney(values.amount, currency)}
            subtitle={`Qty ${displayValue(values.quantity)} · Price ${displayValue(values.price)}`}
            leftDate={values.t_date}
            rightDateLabel="Maturity"
            rightDate={values.m_date}
          />

          <div className="grid gap-4 lg:grid-cols-2">
            <RecordViewSection title="Bond details" icon={<Layers3 className="size-4" />}>
              <RecordDetailRow label="Ticker" value={displayValue(values.ticker)} />
              <RecordDetailRow label="ISIN" value={displayValue(values.isin)} mono />
              <RecordDetailRow label="Name" value={displayValue(displayName)} />
              <RecordDetailRow
                label="Transaction"
                value={displayValue(transactionLabel || values.transaction)}
              />
              <RecordDetailRow
                label="Execution"
                value={displayValue(executionLabel || values.execution_type)}
              />
              <RecordDetailRow
                label="Asset type"
                value={displayValue(assetTypeLabel || values.a_type)}
              />
            </RecordViewSection>

            <RecordViewSection title="Dates" icon={<CalendarDays className="size-4" />}>
              <RecordDetailRow
                label="Trade date"
                value={formatApiDate(values.t_date, "dd MMM yyyy", values.t_date) || "—"}
              />
              <RecordDetailRow
                label="Value date"
                value={formatApiDate(values.p_date, "dd MMM yyyy", values.p_date) || "—"}
              />
              <RecordDetailRow
                label="Maturity"
                value={formatApiDate(values.m_date, "dd MMM yyyy", values.m_date) || "—"}
              />
            </RecordViewSection>

            <RecordViewSection title="Pricing" icon={<Percent className="size-4" />}>
              <RecordDetailRow label="Currency" value={displayValue(currencyLabel || currency)} />
              <RecordDetailRow label="Quantity" value={displayValue(values.quantity)} />
              <RecordDetailRow label="Price" value={displayValue(values.price)} />
              <RecordDetailRow label="Amount" value={formatRecordMoney(values.amount, currency)} />
              <RecordDetailRow label="Commission" value={displayValue(values.commission)} />
              <RecordDetailRow label="Exchange rate" value={displayValue(values.exchange_rate)} />
            </RecordViewSection>

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