/* global React, I, StepHead, Field, Select, Opt, CheckRow, NavFooter */
const { useState: useQF } = React;

const qDigits = s => (s || '').replace(/[^\d]/g, '');
const qMoney = s => { const d = qDigits(s); return d ? Number(d).toLocaleString('en-US') : ''; };
const qNum = s => Number(qDigits(s)) || 0;

const PRIOR_TYPE = ['Primary Residence', 'Second Home', 'Investment Property'];
const PRIOR_TITLE = ['By Yourself', 'Jointly with Your Spouse', 'Jointly with Another Person'];
const BK_TYPE = ['Chapter 7', 'Chapter 11', 'Chapter 12', 'Chapter 13'];
const ASIAN_SUB = ['Asian Indian', 'Chinese', 'Filipino', 'Japanese', 'Korean', 'Vietnamese', 'Other Asian'];
const NHPI_SUB = ['Native Hawaiian', 'Samoan', 'Chamorro', 'Other Pacific Islander'];
const HISPANIC_SUB = ['Cuban', 'Mexican', 'Puerto Rican', 'Other Hispanic or Latino'];

const QF_DEFAULT = {
  // declarations — property & money
  occupyPrimary: null, priorOwnership: null, priorType: '', priorTitle: '',
  sellerRel: null, undisclosed: null, undisclosedAmt: '',
  otherMortgage: null, newCredit: null, priorityLien: null,
  // declarations — finances
  coSigner: null, coSignerDesc: '',
  judgments: null, judgmentDesc: '', judgmentAmt: '',
  fedDebt: null, fedDebtDesc: '', fedDebtAmt: '',
  lawsuit: null, lawsuitDesc: '', lawsuitAmt: '',
  deedInLieu: null, shortSale: null, foreclosure: null,
  bankruptcy: null, bkType: '', dischargeDate: '', notDischarged: false,
  // demographics
  race: { ai: false, aiTribe: '', asian: false, asianSub: {}, asianOther: '', black: false, nhpi: false, nhpiSub: {}, nhpiOther: '', white: false, decline: false },
  ethnicity: { hispanic: false, hispanicSub: {}, hispanicOther: '', notHispanic: false, decline: false },
  sex: null,
  touched: false,
};

const QF_STEPS = ['decl-property', 'decl-finances', 'demo-race', 'demo-ethnicity', 'demo-sex'];

/* ---- Yes/No question block ---- */
function YesNo({ q, helper, value, onChange, error, children }) {
  return (
    <div className="decl-q">
      <p className="decl-label">{q}</p>
      {helper && <p className="bi-helper-text" style={{ marginTop: -4 }}>{helper}</p>}
      <div className="bi-yesno">
        <Opt icon={I.yes(20)} title="Yes" twoUp selected={value === 'yes'} onClick={() => onChange('yes')} />
        <Opt icon={I.no(18)} title="No" twoUp selected={value === 'no'} onClick={() => onChange('no')} />
      </div>
      {error && <div className="field-err" style={{ marginTop: -6, marginBottom: 12 }}>{error}</div>}
      {value === 'yes' && children && <div className="decl-reveal">{children}</div>}
    </div>
  );
}

/* ---- multi-select checkbox row for demographics ---- */
function MultiCheck({ label, checked, onToggle, disabled, children }) {
  return (
    <div className={'demo-check' + (checked ? ' on' : '') + (disabled ? ' disabled' : '')}>
      <CheckRow checked={checked} onToggle={() => { if (!disabled) onToggle(); }}>{label}</CheckRow>
      {checked && children && <div className="demo-sub">{children}</div>}
    </div>
  );
}

/* ===================================================================== */
function QuestionsFlow({ borrowerName, initial, onCancel, onSave, onProgress }) {
  const [data, setData] = useQF(initial ? { ...QF_DEFAULT, ...initial, touched: false } : QF_DEFAULT);
  const [step, setStep] = useQF('decl-property');
  const set = patch => setData(d => ({ ...d, ...patch }));
  const setRace = patch => setData(d => ({ ...d, race: { ...d.race, ...patch } }));
  const setEth = patch => setData(d => ({ ...d, ethnicity: { ...d.ethnicity, ...patch } }));
  const t = data.touched;
  const who = borrowerName || 'you';
  const whoCap = borrowerName || 'You';

  const flowTop = () => { const el = document.querySelector('.flow'); if (el) el.scrollTop = 0; };
  function goTo(key) { setData(d => ({ ...d, touched: false })); setStep(key); flowTop(); }

  function validStep(s) {
    const d = data;
    if (s === 'decl-property') {
      if (!d.occupyPrimary) return false;
      if (d.occupyPrimary === 'yes' && !d.priorOwnership) return false;
      if (d.occupyPrimary === 'yes' && d.priorOwnership === 'yes' && (!d.priorType || !d.priorTitle)) return false;
      if (!d.sellerRel || !d.undisclosed || !d.otherMortgage || !d.newCredit || !d.priorityLien) return false;
      if (d.undisclosed === 'yes' && !qNum(d.undisclosedAmt)) return false;
      return true;
    }
    if (s === 'decl-finances') {
      if (!d.coSigner || !d.judgments || !d.fedDebt || !d.lawsuit || !d.deedInLieu || !d.shortSale || !d.foreclosure || !d.bankruptcy) return false;
      if (d.coSigner === 'yes' && !d.coSignerDesc.trim()) return false;
      if (d.judgments === 'yes' && (!d.judgmentDesc.trim() || !qNum(d.judgmentAmt))) return false;
      if (d.fedDebt === 'yes' && (!d.fedDebtDesc.trim() || !qNum(d.fedDebtAmt))) return false;
      if (d.lawsuit === 'yes' && !d.lawsuitDesc.trim()) return false;
      if (d.bankruptcy === 'yes' && (!d.bkType || (!d.notDischarged && !d.dischargeDate))) return false;
      return true;
    }
    if (s === 'demo-race') {
      const r = d.race;
      return r.decline || r.ai || r.asian || r.black || r.nhpi || r.white;
    }
    if (s === 'demo-ethnicity') {
      const e = d.ethnicity;
      return e.decline || e.hispanic || e.notHispanic;
    }
    if (s === 'demo-sex') return !!d.sex;
    return true;
  }

  function next() {
    if (!validStep(step)) { set({ touched: true }); return; }
    const i = QF_STEPS.indexOf(step);
    if (i === QF_STEPS.length - 1) return onSave({ ...data, complete: true });
    goTo(QF_STEPS[i + 1]);
  }
  function back() {
    const i = QF_STEPS.indexOf(step);
    if (i <= 0) return onCancel();
    goTo(QF_STEPS[i - 1]);
  }

  const di = QF_STEPS.indexOf(step);
  React.useEffect(() => { onProgress && onProgress({ fill: Math.round((di / (QF_STEPS.length - 1)) * 100), stepTitle: 'q-' + step }); }, [step]);

  const eyebrow = 'QUESTIONS ABOUT YOU';
  const ynErr = v => t && !v ? 'Please select an option' : '';
  const isLast = step === 'demo-sex';
  const nextLabel = step === 'decl-finances' ? 'Continue to Demographics' : (isLast ? 'Save & Continue' : (step === 'demo-ethnicity' ? 'Next' : 'Next'));

  let body = null;

  /* ---------- DECLARATIONS: PROPERTY & MONEY ---------- */
  if (step === 'decl-property') {
    body = <>
      <StepHead eyebrow={eyebrow} title="About the property and your money for this loan"
        sub={`A few required questions about how ${who === 'you' ? 'you' : who} will use the property and finance this loan.`} />
      <YesNo q="Will you occupy this property as your primary residence?" value={data.occupyPrimary} onChange={v => set({ occupyPrimary: v })} error={ynErr(data.occupyPrimary)}>
        <YesNo q="Have you had an ownership interest in another property in the last three years?" value={data.priorOwnership} onChange={v => set({ priorOwnership: v })} error={ynErr(data.occupyPrimary === 'yes' ? data.priorOwnership : 'x')}>
          <Select label="What type of property did you own?" value={data.priorType} onChange={v => set({ priorType: v })} options={PRIOR_TYPE} placeholder="Select property type" error={t && data.priorOwnership === 'yes' && !data.priorType ? 'Required' : ''} />
          <Select label="How did you hold title to the property?" value={data.priorTitle} onChange={v => set({ priorTitle: v })} options={PRIOR_TITLE} placeholder="Select how title was held" error={t && data.priorOwnership === 'yes' && !data.priorTitle ? 'Required' : ''} />
        </YesNo>
      </YesNo>
      <YesNo q="Do you have a family relationship or business affiliation with the seller of this property?" value={data.sellerRel} onChange={v => set({ sellerRel: v })} error={ynErr(data.sellerRel)} />
      <YesNo q="Are you borrowing any money for this transaction (including closing costs or down payment), or obtaining money from another party such as the seller or agent, that you have not disclosed on this application?" value={data.undisclosed} onChange={v => set({ undisclosed: v })} error={ynErr(data.undisclosed)}>
        <Field label="What is the amount of this money?" prefix="$" inputMode="numeric" value={data.undisclosedAmt} onChange={v => set({ undisclosedAmt: qMoney(v) })} placeholder="5,000" error={t && data.undisclosed === 'yes' && !qNum(data.undisclosedAmt) ? 'Required' : ''} />
      </YesNo>
      <YesNo q="Have you or will you be applying for a mortgage loan on another property on or before closing this transaction that is not disclosed on this application?" helper="This does not include the property securing this loan." value={data.otherMortgage} onChange={v => set({ otherMortgage: v })} error={ynErr(data.otherMortgage)} />
      <YesNo q="Have you or will you be applying for any new credit (such as an installment loan or credit card) on or before closing this loan that is not disclosed on this application?" value={data.newCredit} onChange={v => set({ newCredit: v })} error={ynErr(data.newCredit)} />
      <YesNo q="Will this property be subject to a lien that could take priority over the first mortgage lien, such as a clean energy lien paid through your property taxes?" value={data.priorityLien} onChange={v => set({ priorityLien: v })} error={ynErr(data.priorityLien)} />
      <NavFooter onBack={back} onNext={next} nextLabel="Next" backLabel="Cancel" />
    </>;
  }

  /* ---------- DECLARATIONS: FINANCES ---------- */
  else if (step === 'decl-finances') {
    body = <>
      <StepHead eyebrow={eyebrow} title="About your finances"
        sub="A few required questions about debts, judgments, and your credit history." />
      <YesNo q="Are you a co-signer or guarantor on any debt or loan that is not disclosed on this application?" value={data.coSigner} onChange={v => set({ coSigner: v })} error={ynErr(data.coSigner)}>
        <Field label="Please briefly describe the debt or loan." textarea value={data.coSignerDesc} onChange={v => set({ coSignerDesc: v })} placeholder="Example: Co-signed auto loan for a family member" error={t && data.coSigner === 'yes' && !data.coSignerDesc.trim() ? 'Required' : ''} />
      </YesNo>
      <YesNo q="Are there any outstanding judgments against you?" value={data.judgments} onChange={v => set({ judgments: v })} error={ynErr(data.judgments)}>
        <Field label="Please briefly describe the judgment." textarea value={data.judgmentDesc} onChange={v => set({ judgmentDesc: v })} placeholder="Describe the judgment" error={t && data.judgments === 'yes' && !data.judgmentDesc.trim() ? 'Required' : ''} />
        <Field label="Judgment amount" prefix="$" inputMode="numeric" value={data.judgmentAmt} onChange={v => set({ judgmentAmt: qMoney(v) })} placeholder="0" error={t && data.judgments === 'yes' && !qNum(data.judgmentAmt) ? 'Required' : ''} />
      </YesNo>
      <YesNo q="Are you currently delinquent or in default on any federal debt?" value={data.fedDebt} onChange={v => set({ fedDebt: v })} error={ynErr(data.fedDebt)}>
        <Field label="Please briefly describe the federal debt." textarea value={data.fedDebtDesc} onChange={v => set({ fedDebtDesc: v })} placeholder="Describe the federal debt" error={t && data.fedDebt === 'yes' && !data.fedDebtDesc.trim() ? 'Required' : ''} />
        <Field label="Debt amount" prefix="$" inputMode="numeric" value={data.fedDebtAmt} onChange={v => set({ fedDebtAmt: qMoney(v) })} placeholder="0" error={t && data.fedDebt === 'yes' && !qNum(data.fedDebtAmt) ? 'Required' : ''} />
      </YesNo>
      <YesNo q="Are you a party to a lawsuit in which you potentially have any personal financial liability?" value={data.lawsuit} onChange={v => set({ lawsuit: v })} error={ynErr(data.lawsuit)}>
        <Field label="Please briefly describe the lawsuit." textarea value={data.lawsuitDesc} onChange={v => set({ lawsuitDesc: v })} placeholder="Describe the lawsuit" error={t && data.lawsuit === 'yes' && !data.lawsuitDesc.trim() ? 'Required' : ''} />
        <Field label="Potential liability amount" optional prefix="$" inputMode="numeric" value={data.lawsuitAmt} onChange={v => set({ lawsuitAmt: qMoney(v) })} placeholder="Best estimate, or leave blank if unknown" />
      </YesNo>
      <YesNo q="Have you conveyed title to any property in lieu of foreclosure in the past seven years?" value={data.deedInLieu} onChange={v => set({ deedInLieu: v })} error={ynErr(data.deedInLieu)} />
      <YesNo q="Within the past seven years, have you completed a pre-foreclosure sale or short sale where the lender agreed to accept less than the outstanding mortgage balance?" value={data.shortSale} onChange={v => set({ shortSale: v })} error={ynErr(data.shortSale)} />
      <YesNo q="Have you had a property foreclosed upon in the last seven years?" value={data.foreclosure} onChange={v => set({ foreclosure: v })} error={ynErr(data.foreclosure)} />
      <YesNo q="Have you declared bankruptcy within the past seven years?" value={data.bankruptcy} onChange={v => set({ bankruptcy: v })} error={ynErr(data.bankruptcy)}>
        <Select label="Bankruptcy type" value={data.bkType} onChange={v => set({ bkType: v })} options={BK_TYPE} placeholder="Select bankruptcy type" error={t && data.bankruptcy === 'yes' && !data.bkType ? 'Required' : ''} />
        {!data.notDischarged && <Field label="Discharge date" type="date" value={data.dischargeDate} onChange={v => set({ dischargeDate: v })} error={t && data.bankruptcy === 'yes' && !data.notDischarged && !data.dischargeDate ? 'Required' : ''} />}
        <div className="bi-inline-check">
          <CheckRow checked={data.notDischarged} onToggle={() => set({ notDischarged: !data.notDischarged, dischargeDate: !data.notDischarged ? '' : data.dischargeDate })}>This bankruptcy has not been discharged yet.</CheckRow>
        </div>
      </YesNo>
      <NavFooter onBack={back} onNext={next} nextLabel="Continue to Demographics" />
    </>;
  }

  /* ---------- DEMOGRAPHICS: RACE ---------- */
  else if (step === 'demo-race') {
    const r = data.race;
    const pickRace = patch => { const np = { ...patch }; if (Object.values(patch)[0] === true) np.decline = false; setRace(np); };
    const toggleSub = (group, key) => setRace({ [group]: { ...r[group], [key]: !r[group][key] } });
    body = <>
      <StepHead eyebrow={eyebrow} title="Race"
        sub="The federal government requests this information for certain mortgage loans. You are not required to provide it, but we are required to ask. Select all that apply." />
      <div className="demo-list">
        <MultiCheck label="American Indian or Alaska Native" checked={r.ai} disabled={r.decline} onToggle={() => pickRace({ ai: !r.ai })}>
          <Field label="Enrolled or principal tribe" optional value={r.aiTribe} onChange={v => setRace({ aiTribe: v })} placeholder="Tribe name" />
        </MultiCheck>
        <MultiCheck label="Asian" checked={r.asian} disabled={r.decline} onToggle={() => pickRace({ asian: !r.asian })}>
          <div className="demo-subgrid">
            {ASIAN_SUB.map(s => <CheckRow key={s} checked={!!r.asianSub[s]} onToggle={() => toggleSub('asianSub', s)}>{s}</CheckRow>)}
          </div>
          {r.asianSub['Other Asian'] && <Field label="Please describe" value={r.asianOther} onChange={v => setRace({ asianOther: v })} placeholder="Describe" error={t && r.asianSub['Other Asian'] && !r.asianOther.trim() ? 'Required' : ''} />}
        </MultiCheck>
        <MultiCheck label="Black or African American" checked={r.black} disabled={r.decline} onToggle={() => pickRace({ black: !r.black })} />
        <MultiCheck label="Native Hawaiian or Other Pacific Islander" checked={r.nhpi} disabled={r.decline} onToggle={() => pickRace({ nhpi: !r.nhpi })}>
          <div className="demo-subgrid">
            {NHPI_SUB.map(s => <CheckRow key={s} checked={!!r.nhpiSub[s]} onToggle={() => toggleSub('nhpiSub', s)}>{s}</CheckRow>)}
          </div>
          {r.nhpiSub['Other Pacific Islander'] && <Field label="Please describe" value={r.nhpiOther} onChange={v => setRace({ nhpiOther: v })} placeholder="Describe" error={t && r.nhpiSub['Other Pacific Islander'] && !r.nhpiOther.trim() ? 'Required' : ''} />}
        </MultiCheck>
        <MultiCheck label="White" checked={r.white} disabled={r.decline} onToggle={() => pickRace({ white: !r.white })} />
        <MultiCheck label="I do not wish to provide this information" checked={r.decline}
          onToggle={() => setRace(r.decline ? { decline: false } : { decline: true, ai: false, asian: false, black: false, nhpi: false, white: false })} />
      </div>
      {t && !validStep('demo-race') && <div className="field-err">Please select at least one option, or choose not to provide.</div>}
      <NavFooter onBack={back} onNext={next} nextLabel="Next" />
    </>;
  }

  /* ---------- DEMOGRAPHICS: ETHNICITY ---------- */
  else if (step === 'demo-ethnicity') {
    const e = data.ethnicity;
    const toggleSub = key => setEth({ hispanicSub: { ...e.hispanicSub, [key]: !e.hispanicSub[key] } });
    body = <>
      <StepHead eyebrow={eyebrow} title="Ethnicity"
        sub="You are not required to provide this information, but we are required to ask." />
      <div className="demo-list">
        <MultiCheck label="Hispanic or Latino" checked={e.hispanic} disabled={e.decline}
          onToggle={() => setEth(e.hispanic ? { hispanic: false } : { hispanic: true, notHispanic: false, decline: false })}>
          <div className="demo-subgrid">
            {HISPANIC_SUB.map(s => <CheckRow key={s} checked={!!e.hispanicSub[s]} onToggle={() => toggleSub(s)}>{s}</CheckRow>)}
          </div>
          {e.hispanicSub['Other Hispanic or Latino'] && <Field label="Please describe" value={e.hispanicOther} onChange={v => setEth({ hispanicOther: v })} placeholder="Describe" error={t && e.hispanicSub['Other Hispanic or Latino'] && !e.hispanicOther.trim() ? 'Required' : ''} />}
        </MultiCheck>
        <MultiCheck label="Not Hispanic or Latino" checked={e.notHispanic} disabled={e.decline}
          onToggle={() => setEth(e.notHispanic ? { notHispanic: false } : { notHispanic: true, hispanic: false, hispanicSub: {}, decline: false })} />
        <MultiCheck label="I do not wish to provide this information" checked={e.decline}
          onToggle={() => setEth(e.decline ? { decline: false } : { decline: true, hispanic: false, hispanicSub: {}, notHispanic: false })} />
      </div>
      {t && !validStep('demo-ethnicity') && <div className="field-err">Please select an option, or choose not to provide.</div>}
      <NavFooter onBack={back} onNext={next} nextLabel="Next" />
    </>;
  }

  /* ---------- DEMOGRAPHICS: SEX ---------- */
  else if (step === 'demo-sex') {
    body = <>
      <StepHead eyebrow={eyebrow} title="Sex"
        sub="You are not required to provide this information, but we are required to ask." />
      <div className="opt-list">
        {['Male', 'Female', 'I do not wish to provide this information'].map(o =>
          <Opt key={o} title={o} selected={data.sex === o} onClick={() => set({ sex: o })} />)}
      </div>
      {t && !data.sex && <div className="field-err">Please select an option.</div>}
      <NavFooter onBack={back} onNext={next} nextLabel="Save & Continue" />
    </>;
  }

  return (
    <main className="flow">
      <div className="flow-col">
        <div className="step step-anim" key={step}>{body}</div>
      </div>
    </main>
  );
}

window.QuestionsFlow = QuestionsFlow;