"use client";

import { formatProfileValue } from "@/lib/mortgage/profileDisplay";
import type { ApplicantProfile } from "@/lib/mortgage/schema";
import type { ProcessStep } from "@/lib/mortgage/gates";

function Badge({ filled, required }: { filled: boolean; required: boolean }) {
  if (filled) return <span className="text-[10px] text-emerald-400">S</span>;
  if (required) return <span className="text-[10px] text-amber-400">R</span>;
  return <span className="text-[10px] text-slate-500">O</span>;
}

function Row({
  label,
  value,
  required,
}: {
  label: string;
  value: unknown;
  required?: boolean;
}) {
  const filled = value !== undefined && value !== null && value !== "" && !(Array.isArray(value) && value.length === 0);
  return (
    <div className="flex justify-between gap-2 border-b border-slate-800 py-1 text-xs">
      <span className="text-slate-400">
        <Badge filled={filled} required={!!required} /> {label}
      </span>
      <span className="text-right text-slate-100">
        {filled ? formatProfileValue(value) : required ? "We’ll ask this next." : "—"}
      </span>
    </div>
  );
}

export function ProfilePane({ profile, step }: { profile: ApplicantProfile; step: ProcessStep }) {
  return (
    <aside className="h-full overflow-y-auto border-l border-slate-700 bg-[#152033] p-4 text-slate-200">
      <h2 className="mb-3 text-sm font-semibold text-sky-300">Applicant profile</h2>
      <section className="mb-4">
        <h3 className="text-xs uppercase tracking-wide text-slate-500">Mortgage</h3>
        <Row label="loan_balance" value={profile.loan_balance} required={step >= 2} />
        <Row label="loan_term_years" value={profile.loan_term_years} />
        <Row label="coverage_on_whom" value={profile.coverage_on_whom} required={step >= 1} />
        <Row label="co_borrower_flag" value={profile.co_borrower_flag} />
        <Row label="property_state" value={profile.property_state || profile.state} />
      </section>
      <section className="mb-4">
        <h3 className="text-xs uppercase tracking-wide text-slate-500">Demographics</h3>
        <Row label="name" value={profile.name} required />
        <Row label="phone" value={profile.phone} />
        <Row label="age / DOB" value={profile.age ?? profile.date_of_birth} required={step >= 2} />
        <Row label="sex" value={profile.sex} />
        <Row label="state" value={profile.state} required />
      </section>
      <section className="mb-4">
        <h3 className="text-xs uppercase tracking-wide text-slate-500">BMI</h3>
        <Row label="height_ft_in" value={profile.height_ft_in} required={step >= 3} />
        <Row label="weight_lb" value={profile.weight_lb} required={step >= 3} />
        <Row label="bmi_computed" value={profile.bmi_computed} required={step >= 3} />
      </section>
      <section className="mb-4">
        <h3 className="text-xs uppercase tracking-wide text-slate-500">Tobacco</h3>
        <Row label="tobacco_products" value={profile.tobacco_products} required={step >= 3} />
      </section>
      <section className="mb-4">
        <h3 className="text-xs uppercase tracking-wide text-slate-500">Diseases</h3>
        <Row label="none / complete" value={profile.diseases_none_reported || profile.diseases_complete} required={step >= 4} />
        <Row label="heart" value={profile.disease_screens?.heart} required={step >= 4} />
        <Row label="diabetes" value={profile.disease_screens?.diabetes} required={step >= 4} />
        <Row label="cancer" value={profile.disease_screens?.cancer} required={step >= 4} />
        <Row label="kidney" value={profile.disease_screens?.kidney} required={step >= 4} />
        <Row label="lung" value={profile.disease_screens?.lung} />
        <Row label="disabled" value={profile.disease_screens?.disabled} required={step >= 4} />
        <Row label="impairments" value={profile.impairments} />
      </section>
      <section className="mb-4">
        <h3 className="text-xs uppercase tracking-wide text-slate-500">Household</h3>
        <Row label="spouse_age_sex" value={profile.spouse_age_sex} required={!!profile.co_borrower_flag && step >= 5} />
        <Row label="spouse_annual_income" value={profile.spouse_annual_income} required={!!profile.co_borrower_flag && step >= 5} />
        <Row label="beneficiary" value={profile.beneficiary_relationship} required={step >= 5} />
      </section>
      <section>
        <h3 className="text-xs uppercase tracking-wide text-slate-500">Income</h3>
        <Row label="annual_income" value={profile.annual_income} required={step >= 5} />
        <Row label="decision" value={profile.decision_result?.offer_family} />
        <Row label="carriers" value={profile.carrier_shortlist} />
      </section>
    </aside>
  );
}
