import { Building2, CalendarDays, CircleDollarSign, PhoneCall } 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 { CallDepositViewPageData } from "../_lib/fetch-call-deposit-view-page";

type CallDepositViewPageProps = {
  tenant: string;
  data: CallDepositViewPageData;
  backHref?: string;
};

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

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

      <ErrorBanner message={errorMessage} />

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

          <div className="grid gap-4 lg:grid-cols-2">
            <RecordViewSection title="Deposit details" icon={<PhoneCall className="size-4" />}>
              <RecordDetailRow label="Currency" value={displayValue(currency)} />
              <RecordDetailRow
                label="Amount"
                value={formatRecordMoney(values.price || values.amount, currency)}
              />
              <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) || "—"}
              />
            </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>
  );
}