/* global React, BrainMark, I, StepHead, NavFooter, AssetFlow, assetSummary */
const { useState: useAS, useEffect: useASE } = React;

const AS_LS = 'bevri_assets_v1';
const BI_LS_REF2 = 'bevri_borrower_v1';

function readBorrowers2() {
  try {
    const bi = JSON.parse(localStorage.getItem(BI_LS_REF2))?.data;
    if (!bi) return [{ key: 'primary', first: 'You', name: 'You', role: 'Primary Borrower' }];
    const list = [{ key: 'primary', first: bi.name.first || 'Primary', name: `${bi.name.first} ${bi.name.last}`.trim(), role: 'Primary Borrower' }];
    (bi.coBorrowers || []).forEach((c, i) => list.push({ key: 'co-' + i, first: c.name.first || 'Co-borrower', name: `${c.name.first} ${c.name.last}`.trim(), role: 'Co-Borrower' }));
    return list;
  } catch { return [{ key: 'primary', first: 'You', name: 'You', role: 'Primary Borrower' }]; }
}

function normalizeIdpAssetRecord(r) {
  // Inject the type/acctType/method discriminators that AssetFlow needs to render a valid card.
  // Also format balance as a money string if it came in as a raw number from the backend.
  const toMoney = v => {
    const n = typeof v === 'number' ? v : Number(String(v || '').replace(/[$,\s]/g, ''));
    return Number.isFinite(n) && n > 0 ? n.toLocaleString('en-US') : '';
  };
  const out = { type: 'financial', acctType: 'Checking', method: 'manual', ...r };
  if (out.balance && typeof out.balance === 'number') out.balance = toMoney(out.balance);
  return out;
}

function normalizeAssets(assets) {
  if (!assets || typeof assets !== 'object') return {};
  const result = {};
  for (const [key, val] of Object.entries(assets)) {
    if (Array.isArray(val)) {
      result[key] = val.map(r => normalizeIdpAssetRecord(r));
    } else if (val && typeof val === 'object') {
      // setNestedPath writes numeric-keyed objects (e.g. {"0": {balance:...}}) — convert to array
      result[key] = Object.keys(val)
        .sort((a, b) => Number(a) - Number(b))
        .map(k => normalizeIdpAssetRecord({ id: 'idp-' + key + '-' + k, ...val[k] }));
    } else {
      result[key] = [];
    }
  }
  return result;
}

/* ===================================================================== */
function AssetsSection({ loanType = 'purchase', onBack, onContinue, onProgress }) {
  const saved = (() => { try { return JSON.parse(localStorage.getItem(AS_LS)); } catch { return null; } })();
  const [assets, setAssets] = useAS(normalizeAssets(saved?.assets));  // { borrowerKey: [asset,...] }
  const [flow, setFlow] = useAS(null);     // { borrowerKey, first, initial }
  const [confirmRemove, setConfirmRemove] = useAS(null); // { key, id }
  const borrowers = readBorrowers2();

  useASE(() => { try { localStorage.setItem(AS_LS, JSON.stringify({ assets })); } catch {} }, [assets]);
  useASE(() => {
    function onAutoFill(e) {
      if (!(e.detail?.posKeys || []).includes(AS_LS)) return;
      const updated = (() => { try { return JSON.parse(localStorage.getItem(AS_LS)); } catch { return null; } })();
      if (!updated?.assets) return;
      setAssets(prev => {
        const next = { ...prev };
        for (const [bKey, items] of Object.entries(updated.assets)) {
          if (Array.isArray(items)) { next[bKey] = items.map(r => normalizeIdpAssetRecord(r)); continue; }
          // setNestedPath created object-keyed format; convert to array only if no assets exist yet
          if (items && typeof items === 'object' && !(prev[bKey] || []).length) {
            next[bKey] = Object.keys(items)
              .sort((a, b) => Number(a) - Number(b))
              .map(k => normalizeIdpAssetRecord({ id: 'idp-' + bKey + '-' + k, ...items[k] }));
          }
        }
        return next;
      });
    }
    window.addEventListener('bevri:fields-autofilled', onAutoFill);
    return () => window.removeEventListener('bevri:fields-autofilled', onAutoFill);
  }, []);
  useASE(() => { onProgress && onProgress({ fill: flow ? 50 : 15, stepTitle: 'assets' }); }, [flow]);

  function openAdd(b) { setFlow({ borrowerKey: b.key, first: b.first, initial: null }); }
  function openEdit(b, a) { setFlow({ borrowerKey: b.key, first: b.first, initial: a }); }
  function saveAsset(a) {
    setAssets(prev => {
      const list = [...(prev[flow.borrowerKey] || [])];
      const i = list.findIndex(s => s.id === a.id);
      if (i >= 0) list[i] = a; else list.push(a);
      return { ...prev, [flow.borrowerKey]: list };
    });
    setFlow(null);
    const el = document.querySelector('.flow'); if (el) el.scrollTop = 0;
  }
  function removeAsset(key, id) {
    setAssets(prev => ({ ...prev, [key]: (prev[key] || []).filter(a => a.id !== id) }));
    setConfirmRemove(null);
  }

  if (flow) {
    return (
      <AssetFlow borrowerName={flow.first} initial={flow.initial}
        onCancel={() => { setFlow(null); const el = document.querySelector('.flow'); if (el) el.scrollTop = 0; }}
        onSave={saveAsset} onProgress={onProgress} />
    );
  }

  return (
    <main className="flow">
      <div className="flow-col">
        <div className="step">
          <StepHead title="Assets & accounts"
            sub="Add financial accounts that show your available funds. Upload a recent bank statement below to auto-fill." />

          <div className="ei-list">
            {borrowers.map(b => {
              const list = assets[b.key] || [];
              return (
                <div className="ei-borrower" key={b.key}>
                  <div className="ei-bhead">
                    <span className="co-card-ava">{(b.name[0] || '') + (b.name.split(' ')[1]?.[0] || '')}</span>
                    <div className="ei-bmeta">
                      <div className="co-card-name">{b.name}</div>
                      <div className="person-bar-tag">{b.role}</div>
                    </div>
                  </div>

                  {list.length === 0
                    ? <div className="ei-empty-state">
                        <div className="ei-empty">No assets added yet</div>
                        <button className="ei-upload-cta" onClick={() => window.dispatchEvent(new CustomEvent('bevri:open-upload'))}>
                          {I.doc(15)} Upload a bank statement to auto-fill
                        </button>
                      </div>
                    : <div className="ei-sources">
                        {list.map(a => {
                          const sm = assetSummary(a);
                          return (
                            <div className="ei-source" key={a.id}>
                              <span className="ei-source-icon">{I.cash(18)}</span>
                              <div className="ei-source-body">
                                <div className="ei-source-title">
                                  {sm.title}
                                  {sm.verified && <span className="ei-verified">{I.check(11)} Verified</span>}
                                  {!sm.verified && a.id?.startsWith('idp-') && <span className="ei-autofill-badge">{I.doc(11)} Auto-filled</span>}
                                </div>
                                <div className="ei-source-detail">{sm.detail}</div>
                              </div>
                              <div className="ei-source-actions">
                                <button className="co-act" onClick={() => openEdit(b, a)}>{I.pencil(13)}Edit</button>
                                <button className="co-act danger" onClick={() => setConfirmRemove({ key: b.key, id: a.id })}>{I.trash(13)}Remove</button>
                              </div>
                            </div>
                          );
                        })}
                      </div>}

                  <button className="ei-add" onClick={() => openAdd(b)}>
                    <span className="co-add-icon">{I.plus(18)}</span>
                    Add an Asset
                  </button>
                </div>
              );
            })}
          </div>

          <div className="step-nav">
            <button className="btn btn-secondary" onClick={onBack}>{I.back(16)}Back</button>
            <button className="btn btn-primary" onClick={() => onContinue && onContinue()}>Confirm & Continue{I.arrow(16)}</button>
          </div>
        </div>
      </div>

      {confirmRemove && (
        <div className="modal-scrim" onClick={() => setConfirmRemove(null)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-title">Remove this asset?</div>
            <div className="modal-body">This will remove this asset from the loan application.</div>
            <div className="modal-actions">
              <button className="btn btn-secondary" onClick={() => setConfirmRemove(null)}>Cancel</button>
              <button className="btn btn-danger" onClick={() => removeAsset(confirmRemove.key, confirmRemove.id)}>Remove Asset</button>
            </div>
          </div>
        </div>
      )}
    </main>
  );
}

window.AssetsSection = AssetsSection;