/* BioReveal — Main funnel app. (v0.9 — body removed, vitals hidden, voice transcript)
 *
 * Flow: Goals → Full BioScan (vitals+skin+voice+transcript) → Feel/Training/Vices
 *       → Basics → Medical → Email → AI Reveal
 */

const {
  StepIntro, StepGoals, StepBioscan,
  StepFeel, StepTraining, StepVices, StepBasics, StepMedical, StepEmail,
} = window.BR_STEPS;

function App() {
  const [stage, setStage] = React.useState("intro");
  const [step, setStep] = React.useState(0);
  const [aiStatus, setAiStatus] = React.useState({ checked: false, mode: "rules" });
  const [state, setState] = React.useState({
    bioScan: null,
    goals: [], feel: {}, training: null, vices: [],
    basics: { age: 32, sex: null }, medical: {}, email: "",
  });
  const [profile, setProfile] = React.useState(null);
  const [synthError, setSynthError] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/health").then(r => r.json()).then(d => setAiStatus({ checked: true, mode: d.auth_mode || "rules" })).catch(() => setAiStatus({ checked: true, mode: "rules" }));
  }, []);

  const update = (key, val) => setState(s => ({ ...s, [key]: val }));

  const stepDef = [
    { key: "goals",    render: () => <StepGoals    value={state.goals}    onChange={v => update("goals", v)} />,    ready: () => state.goals.length > 0 },
    { key: "bioscan",  render: () => <StepBioscan  value={state.bioScan}  onChange={v => update("bioScan", v)} />,  ready: () => true },
    { key: "feel",     render: () => <StepFeel     value={state.feel}     onChange={v => update("feel", v)} />,     ready: () => true },
    { key: "training", render: () => <StepTraining value={state.training} onChange={v => update("training", v)} />, ready: () => !!state.training },
    { key: "vices",    render: () => <StepVices    value={state.vices}    onChange={v => update("vices", v)} />,    ready: () => true },
    { key: "basics",   render: () => <StepBasics   value={state.basics}   onChange={v => update("basics", v)} />,   ready: () => !!state.basics?.sex },
    { key: "medical",  render: () => <StepMedical  value={state.medical}  onChange={v => update("medical", v)} />,  ready: () => state.medical?.pregnant !== null && state.medical?.pregnant !== undefined },
    { key: "email",    render: () => <StepEmail    value={state.email}    onChange={v => update("email", v)} />,    ready: () => /\S+@\S+\.\S+/.test(state.email || "") },
  ];

  const cur = stepDef[step];
  const totalSteps = stepDef.length;
  const progress = Math.round(((step + 1) / totalSteps) * 100);

  const next = () => {
    if (step >= totalSteps - 1) { setStage("analysis"); }
    else setStep(step + 1);
  };
  const back = () => {
    if (step === 0) setStage("intro");
    else setStep(step - 1);
  };

  const startSynthesis = async () => {
    setSynthError(null);
    const intake = {
      goals: state.goals,
      feel: state.feel,
      training: state.training,
      vices: state.vices,
      basics: state.basics,
      medical: state.medical,
      vitals: state.bioScan?.vitals || {},
      skin: state.bioScan?.skin || {},
      voice: state.bioScan?.voice || {},
      wearable: {},
      email: state.email,
    };
    try {
      const res = await fetch("/api/synthesize", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(intake),
      });
      const data = await res.json();
      if (data.error) {
        setSynthError(data.message || data.error);
        return;
      }
      setProfile({ protocol: data, intake });
      setStage("reveal");
      window.scrollTo(0, 0);
    } catch (e) {
      setSynthError(e.message);
    }
  };

  const AIBanner = () => (
    aiStatus.checked && aiStatus.mode === "rules" && (
      <div style={{ background: "#fef3c7", borderBottom: "1px solid #fcd34d", padding: "8px 16px", fontSize: 12, fontFamily: "var(--font-mono)", letterSpacing: "0.05em", textAlign: "center", color: "#78350f" }}>
        <strong>⚙ AI MODE: RULES ENGINE</strong> · Set ANTHROPIC_API_KEY to enable Claude Opus 4.7 reasoning.
      </div>
    )
  );

  if (stage === "reveal" && profile) {
    return <Reveal profile={profile} onRestart={() => { setStage("intro"); setStep(0); setProfile(null); window.scrollTo(0, 0); }} />;
  }

  return (
    <div className="br-page">
      <AIBanner/>
      <Header active="bioreveal"/>

      {stage === "intro" && <StepIntro onNext={() => { setStage("quiz"); setStep(0); window.scrollTo(0, 0); }}/>}

      {stage === "quiz" && (
        <section className="br-quiz-section">
          <div className="container">
            <div className="br-card">
              <div className="br-card-head">
                <span className="live">BIOREVEAL · LIVE</span>
                <span>STEP {step + 1} / {totalSteps}</span>
              </div>
              <div className="br-progress"><div className="br-progress-fill" style={{ width: progress + "%" }}/></div>
              <div className="br-body">{cur.render()}</div>
              <div className="br-foot">
                <button className="br-back" onClick={back}>← Back</button>
                <button className="btn btn-dark" disabled={!cur.ready()} onClick={next}
                  style={{ opacity: cur.ready() ? 1 : 0.4, pointerEvents: cur.ready() ? "auto" : "none" }}>
                  {step === totalSteps - 1 ? "Reveal my analysis" : "Continue"} →
                </button>
              </div>
            </div>
          </div>
        </section>
      )}

      {stage === "analysis" && (
        <section className="br-quiz-section">
          <div className="container">
            <div className="br-card">
              <StepAnalysis onStart={startSynthesis} error={synthError} onRetry={startSynthesis}/>
            </div>
          </div>
        </section>
      )}

      <Footer/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);