/* global React, I, StepHead */
const { useState: useTV, useEffect: useTVE } = React;

/**
 * "Where is my loan?" tracker — the submitted application's home.
 *
 * Renders the borrower-facing stage rail from /api/pos/intake/status (five
 * stages, current highlighted), the readiness receipt recorded at submission,
 * and the two actions that stay live after submit: upload documents and ask
 * the operator. Read-only: status only moves when the loan team moves it.
 *
 * Adverse loan states never reach this view; the status route masks them into
 * a neutral "talk to your loan team" banner by design.
 */
function TrackerView({ onViewApplication }) {
  const [data, setData] = useTV(window.__bevriLoanStatus && window.__bevriLoanStatus.submitted ? window.__bevriLoanStatus : null);
  const [state, setState] = useTV(data ? 'ready' : 'loading');

  function load() {
    setState(data ? 'ready' : 'loading');
    var fetcher = window.fetchPosLoanStatus ? window.fetchPosLoanStatus() : Promise.resolve(null);
    fetcher
      .then(function(d) {
        if (d && d.success && d.submitted) { setData(d); setState('ready'); }
        else if (!data) { setState('error'); }
      })
      .catch(function() { if (!data) setState('error'); });
  }

  useTVE(function() { load(); /* eslint-disable-next-line */ }, []);

  if (state === 'loading') {
    return (
      <main className="flow"><div className="flow-col">
        <div className="step">
          <div className="skel skel-row w-60" />
          <div className="skel skel-row w-80" />
          <div className="skel skel-row w-40" />
        </div>
      </div></main>
    );
  }

  if (state === 'error' || !data) {
    return (
      <main className="flow"><div className="flow-col">
        <div className="step">
          <StepHead title="Your application" sub="We couldn't load your loan status right now. Your application is safe. Try refreshing in a moment." />
          <button className="btn btn-secondary" onClick={load}>Refresh</button>
        </div>
      </div></main>
    );
  }

  const tracker = data.tracker || { stages: [], current: null, attention: false };
  const submittedDate = data.submittedAt ? new Date(data.submittedAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : null;

  return (
    <main className="flow">
      <div className="flow-col">
        <div className="step">
          <StepHead title="Where is my loan?"
            sub={submittedDate ? `Submitted ${submittedDate}${data.loanCode ? ' · Reference ' + data.loanCode : ''}` : 'Your application status'} />

          {tracker.attention && (
            <div className="trk-attention">{tracker.attention.message}</div>
          )}

          {/* stage rail */}
          <div className="trk-stages">
            {tracker.stages.map(function(stage, i) {
              return (
                <div key={stage.id} className={'trk-stage ' + stage.state}>
                  <span className="trk-marker-wrap">
                    <span className="trk-marker">{stage.state === 'done' ? I.check(13) : i + 1}</span>
                    {i < tracker.stages.length - 1 && <span className="trk-line" />}
                  </span>
                  <span className="trk-body">
                    <span className="trk-label">{stage.label}</span>
                    {stage.state === 'current' && tracker.current && !tracker.attention && (
                      <span className="trk-desc">{tracker.current.description}</span>
                    )}
                  </span>
                </div>
              );
            })}
          </div>

          {data.loanTeam && data.loanTeam.displayName && (
            <div className="trk-receipt">
              Your loan officer: <b>{data.loanTeam.displayName}</b>
              {data.loanTeam.nmls ? ' · NMLS ' + data.loanTeam.nmls : ''}
              {data.loanTeam.phone ? ' · ' + data.loanTeam.phone : ''}
            </div>
          )}

          {data.readiness && data.readiness.grade && (
            <div className="trk-receipt">
              Submitted with readiness grade <b>{data.readiness.grade}</b>
              {typeof data.readiness.score === 'number' ? ' (' + data.readiness.score + '/100)' : ''}
            </div>
          )}

          {/* live actions */}
          <div className="trk-actions">
            <button className="btn btn-primary" onClick={function() { window.dispatchEvent(new CustomEvent('bevri:open-upload')); }}>
              Upload documents
            </button>
            <button className="btn btn-secondary" onClick={function() { window.dispatchEvent(new CustomEvent('bevri:open-chat')); }}>
              Ask Bevri Operator
            </button>
            <button className="btn btn-secondary" onClick={onViewApplication}>View my application</button>
            <button className="btn btn-secondary" onClick={load} title="Refresh status">Refresh</button>
          </div>
        </div>
      </div>
    </main>
  );
}
window.TrackerView = TrackerView;