// IntakeForm — top-level multi-step POC intake container.

function IntakeForm() {
  const { React } = window;
  const { useState } = React;

  const TOTAL_STEPS = 6;

  const EMPTY_FORM = {
    // step 1
    fullName: '',
    workEmail: '',
    company: '',
    companyDomain: '',
    role: '',
    companySize: '',
    industry: '',
    // step 2
    targetTypes: [],
    publiclyReachable: '',
    targetUrl: '',
    approxEndpoints: '',
    techStack: [],
    environment: '',
    hasExistingReports: '',
    existingReportsDetail: '',
    // step 3
    deployMode: '',
    llmRequirement: '',
    containerRuntime: [],
    dataResidency: [],
    dataResidencyDetail: '',
    networkConstraints: [],
    // step 4
    complianceFrameworks: [],
    complianceOther: '',
    reportFormats: [],
    integrations: [],
    ssoRequirement: '',
    hasAiInProduction: false,
    // step 5
    successCriteria: '',
    timeline: '',
    decisionProcess: '',
    budgetStatus: '',
    existingTools: [],
    // step 6
    authorizationConfirmed: false,
    termsAccepted: false,
    designPartnerOptIn: false,
  };

  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState(EMPTY_FORM);
  const [submitted, setSubmitted] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState(null);
  const [priorityTier, setPriorityTier] = useState(null);

  function update(patch) {
    setFormData(prev => ({ ...prev, ...patch }));
  }

  function handleNext() {
    setStep(s => Math.min(s + 1, TOTAL_STEPS));
    window.scrollTo(0, 0);
  }

  function handleBack() {
    setStep(s => Math.max(s - 1, 1));
    window.scrollTo(0, 0);
  }

  async function handleSubmit() {
    setSubmitting(true);
    setSubmitError(null);

    try {
      const res = await fetch('/api/intake', {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        body: JSON.stringify(formData),
      });

      const json = await res.json().catch(() => ({}));

      if (!res.ok && res.status !== 200) {
        setSubmitError('something went wrong — please try again or email hello@sekura.ai');
        setSubmitting(false);
        return;
      }

      if (json.priorityTier) setPriorityTier(json.priorityTier);
      setSubmitted(true);
    } catch (err) {
      setSubmitError('network error — please check your connection and try again');
    } finally {
      setSubmitting(false);
    }
  }

  function renderStep() {
    switch (step) {
      case 1:
        return <window.Step1Identity data={formData} update={update} onNext={handleNext} />;
      case 2:
        return <window.Step2Target data={formData} update={update} onNext={handleNext} onBack={handleBack} />;
      case 3:
        return <window.Step3Deploy data={formData} update={update} onNext={handleNext} onBack={handleBack} />;
      case 4:
        return <window.Step4Compliance data={formData} update={update} onNext={handleNext} onBack={handleBack} />;
      case 5:
        return <window.Step5Poc data={formData} update={update} onNext={handleNext} onBack={handleBack} />;
      case 6:
        return (
          <window.Step6Consent
            data={formData}
            update={update}
            onBack={handleBack}
            onSubmit={handleSubmit}
            submitting={submitting}
            error={submitError}
          />
        );
      default:
        return null;
    }
  }

  return (
    <React.Fragment>
      <header className="hero-nav">
        <div className="nav-brand">
          <a href="#">
            <img src="branding/sekura-logo.svg" alt="sekura" height="28" />
          </a>
        </div>
        <nav className="nav-links">
          <a href="#">the story</a>
          <a href="#product">product</a>
          <a href="#team">team</a>
          <a href="#login" className="nav-login">log in</a>
        </nav>
      </header>

      <div className="intake-page">
        <div className="intake-inner">
          {submitted ? (
            <window.SuccessScreen data={formData} priorityTier={priorityTier} />
          ) : (
            <React.Fragment>
              <h1 className="intake-title">start your POC</h1>
              <p className="intake-sub">
                tell us about your environment and goals. we'll be in touch within 1 business day.
              </p>

              <window.StepIndicator current={step} total={TOTAL_STEPS} />

              {renderStep()}
            </React.Fragment>
          )}
        </div>
      </div>
    </React.Fragment>
  );
}

window.IntakeForm = IntakeForm;