// Interactive "Diagnose Your Problem" tool
const { useState: useStateD } = React;

function Diagnose() {
  const [step, setStep] = useStateD(0);
  const [state, setState] = useStateD({});
  const steps = window.CB_DATA.diagnose;
  const done = step >= steps.length;

  const reset = () => { setStep(0); setState({}); };
  const pick = (key, id) => {
    const next = { ...state, [key]: id };
    setState(next);
    if (step + 1 >= steps.length) {
      window.dispatchEvent(new CustomEvent('cb-quest-step', { detail: { id: 'diagnose' } }));
    }
    setStep(step + 1);
  };

  const result = done ? window.CB_DATA.recommend(state) : null;

  return (
    <div className="diagnose">
      <div className="diagnose-head">
        <div className="diagnose-tag">
          <span className="dot" /> 24/7 DISPATCH
        </div>
        <h2 className="diagnose-title">DIAGNOSE THE PROBLEM</h2>
        <p className="diagnose-sub">Three taps and we'll tell you what crew you need and roughly how soon. <strong>To actually get on the schedule, call or book — we need your address.</strong></p>
      </div>

      <div className="diagnose-body">
        <div className="diagnose-progress">
          {[0,1,2].map(i => (
            <div key={i} className={`prog-cell ${i < step ? 'done' : ''} ${i === step ? 'active' : ''}`}>
              <div className="prog-num">{String(i+1).padStart(2,'0')}</div>
              <div className="prog-label">{steps[i]?.q || 'DISPATCH'}</div>
            </div>
          ))}
          <div className={`prog-cell ${done ? 'active' : ''}`}>
            <div className="prog-num">04</div>
            <div className="prog-label">GET A CREW</div>
          </div>
        </div>

        {!done && (
          <div className="diagnose-question">
            <div className="diagnose-q-label">QUESTION {step + 1} / 3</div>
            <h3 className="diagnose-q">{steps[step].q}</h3>
            <div className="diagnose-options">
              {steps[step].options.map(o => (
                <button
                  key={o.id}
                  className="diag-opt"
                  onClick={() => pick(steps[step].key, o.id)}
                >
                  {o.icon && <span className="diag-icon">{o.icon}</span>}
                  <span className="diag-label">{o.label}</span>
                  <span className="diag-arrow">→</span>
                </button>
              ))}
            </div>
          </div>
        )}

        {done && result && (
          <div className="diagnose-result">
            <div className="result-receipt">
              <div className="receipt-head">
                <span>DIAGNOSIS</span>
                <span>{new Date().toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}</span>
              </div>
              <div className="receipt-row">
                <span className="rk">PROBLEM</span>
                <span className="rv">{state.problem?.toUpperCase()}</span>
              </div>
              <div className="receipt-row">
                <span className="rk">LOCATION</span>
                <span className="rv">{state.where?.toUpperCase()}</span>
              </div>
              <div className="receipt-row">
                <span className="rk">URGENCY</span>
                <span className="rv">{state.urgency?.toUpperCase()}</span>
              </div>
              <div className="receipt-divider" />
              <div className="receipt-row big">
                <span className="rk">LIKELY NEED</span>
                <span className="rv accent">{result.service}</span>
              </div>
              <div className="receipt-row big">
                <span className="rk">SERVICE CODE</span>
                <span className="rv">{result.code}</span>
              </div>
              <div className="receipt-row big">
                <span className="rk">EST. ETA</span>
                <span className="rv accent eta">{result.eta}</span>
              </div>
              {result.flood && (
                <>
                  <div className="receipt-divider" />
                  <div className="receipt-row big" style={{background: '#0a2540', color: '#fff', margin: '8px -20px 0', padding: '14px 20px'}}>
                    <span className="rk" style={{color: '#1ba3ff'}}>+ FLOODBUSTERZ</span>
                    <span className="rv" style={{color: '#1ba3ff'}}>RESTORATION</span>
                  </div>
                </>
              )}
            </div>

            <div className="result-actions">
              <div className="result-actions-note">To actually dispatch a truck, we need your name, phone, and address. Pick one:</div>
              <a href={`tel:${window.CB_DATA.brand.phoneRaw}`} className="btn btn-primary big-btn">
                <span className="btn-line">CALL DISPATCH</span>
                <span className="btn-line big">{window.CB_DATA.brand.phone}</span>
              </a>
              {result.flood && (
                <a href={`tel:${window.CB_DATA.floodbusterz.phoneRaw}`} className="btn btn-primary big-btn" style={{background: '#0a2540', borderColor: '#0a2540'}}>
                  <span className="btn-line">CALL FLOODBUSTERZ</span>
                  <span className="btn-line big">{window.CB_DATA.floodbusterz.phone}</span>
                </a>
              )}
              <button className="btn btn-ghost" onClick={() => window.dispatchEvent(new CustomEvent('cb-open-book', {
                detail: {
                  ...state,
                  presetService: result.service,
                  serviceCode: result.code,
                  notes: `Diagnose tool result: ${state.problem || 'problem'} / ${state.where || 'location'} / ${state.urgency || 'urgency'} routed to ${result.service} (${result.code}).`,
                }
              }))}>
                BOOK ONLINE · SEND TO DISPATCH →
              </button>
              <button className="btn btn-text" onClick={reset}>Start over</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.Diagnose = Diagnose;