/* Willow Creek — Admissions: interactive multi-step intake application. */
const { Icon: AIcon, useParallax: AuseParallax, Reveal: AReveal, Container: AContainer, Eyebrow: AEyebrow } = window.WC;
const { useState: aUseState } = React;

function AdmissionsScreen({ go }) {
  const { Stepper, Input, Select, Textarea, RadioGroup, Checkbox, Button, ProgressBar, Card, Badge, Alert } = window.WillowCreekDesignSystem_90378c;
  const steps = ["About you", "Your recovery", "Payment", "Review & send"];
  const [step, setStep] = aUseState(0);
  const [done, setDone] = aUseState(false);
  const [data, setData] = aUseState({ who: "self", insurance: "yes", consent: false });
  const set = (k) => (e) => setData((d) => ({ ...d, [k]: e && e.target ? e.target.value : e }));

  const next = () => setStep((s) => Math.min(s + 1, steps.length - 1));
  const back = () => setStep((s) => Math.max(s - 1, 0));
  const pct = Math.round(((step + 1) / steps.length) * 100);

  const Field = ({ children }) => <div style={{ marginBottom: 20 }}>{children}</div>;
  const Grid = ({ children }) => <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, marginBottom: 20 }} className="wc-form-grid">{children}</div>;
  const StepTitle = ({ t, s }) => (
    <div style={{ marginBottom: 24 }}>
      <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d3)", color: "var(--text-heading)", margin: "0 0 6px" }}>{t}</h2>
      <p style={{ color: "var(--text-muted)", margin: 0 }}>{s}</p>
    </div>
  );

  if (done) {
    return (
      <>
        <div style={{ height: 76 }} />
        <section style={{ padding: "var(--section-y) 0", background: "var(--surface-page)", minHeight: "70vh" }}>
          <AContainer narrow>
            <AReveal>
              <Card elevation="xl" padding="xl" style={{ textAlign: "center" }}>
                <span style={{ width: 76, height: 76, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center",
                  background: "var(--success-soft)", color: "var(--success)", margin: "0 auto 20px" }}><AIcon name="check" size={40} strokeWidth={2.5} /></span>
                <h2 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d2)", color: "var(--text-heading)", margin: "0 0 12px" }}>Your application is in.</h2>
                <p style={{ fontSize: "var(--text-lg)", color: "var(--text-body)", maxWidth: "42ch", margin: "0 auto 8px", lineHeight: 1.6 }}>
                  Thank you for trusting us with this{data.firstName ? `, ${data.firstName}` : ""}. A member of our team will call you within <strong>one business day</strong>.
                </p>
                <p style={{ color: "var(--text-muted)", marginBottom: 28 }}>Need to talk sooner? Call us any time at <strong>(940) 555-0142</strong>.</p>
                <Alert variant="info" icon={<AIcon name="life-buoy" size={18} />} style={{ textAlign: "left", marginBottom: 28 }}>
                  If you're in crisis, don't wait for our call — dial or text <strong>988</strong> now.
                </Alert>
                <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
                  <Button variant="primary" onClick={() => go("home")}>Back to home</Button>
                  <Button variant="secondary" onClick={() => go("home-tour")}>Tour the home while you wait</Button>
                </div>
              </Card>
            </AReveal>
          </AContainer>
        </section>
      </>
    );
  }

  return (
    <>
      <div style={{ height: 76 }} />
      <section style={{ padding: "var(--space-9) 0 var(--section-y)", background: "var(--surface-sunken)", minHeight: "80vh" }}>
        <AContainer style={{ maxWidth: 900 }}>
          <div style={{ textAlign: "center", marginBottom: 32 }}>
            <AEyebrow style={{ justifyContent: "center" }}>Admissions</AEyebrow>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "var(--text-d1)", color: "var(--text-heading)", letterSpacing: "0.01em", textTransform: "uppercase", margin: "12px 0 8px" }}>Start your application</h1>
            <p style={{ color: "var(--text-body)", fontSize: "var(--text-lg)", maxWidth: "46ch", margin: "0 auto" }}>
              It takes about five minutes. Everything you share is confidential — there are no wrong answers here.
            </p>
          </div>

          <Card elevation="lg" padding="xl">
            <div style={{ marginBottom: 32 }}><Stepper steps={steps} current={step} /></div>

            {step === 0 && (
              <div>
                <StepTitle t="First, a little about you" s="So we know who we're talking to and how to reach you." />
                <Field>
                  <label style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-heading)", display: "block", marginBottom: 10 }}>Who is this application for?</label>
                  <RadioGroup name="who" columns={2} value={data.who} onChange={set("who")} options={[
                    { value: "self", label: "For myself", description: "I'm looking for a place in my recovery." },
                    { value: "loved", label: "For a loved one", description: "I'm helping a family member or friend." },
                  ]} />
                </Field>
                <Grid>
                  <Input label="First name" required value={data.firstName || ""} onChange={set("firstName")} placeholder="Jordan" />
                  <Input label="Last name" required value={data.lastName || ""} onChange={set("lastName")} placeholder="Rivera" />
                </Grid>
                <Grid>
                  <Input label="Phone" type="tel" required value={data.phone || ""} onChange={set("phone")} placeholder="(940) 555-0142" leftIcon={<AIcon name="phone" size={18} />} />
                  <Input label="Email" type="email" required value={data.email || ""} onChange={set("email")} placeholder="you@email.com" leftIcon={<AIcon name="mail" size={18} />} />
                </Grid>
                <Field>
                  <Select label="How did you hear about Willow Creek?" placeholder="Choose one" value={data.referral || ""} onChange={set("referral")}
                    options={["A treatment center", "A doctor or clinician", "Family or friend", "Court or probation", "Online search", "Other"]} />
                </Field>
              </div>
            )}

            {step === 1 && (
              <div>
                <StepTitle t="Where you are in recovery" s="This helps us understand fit and support you well. Answer honestly — we've heard it all with compassion." />
                <Field>
                  <Select label="What best describes your situation right now?" placeholder="Choose one" value={data.situation || ""} onChange={set("situation")}
                    options={["Just completed detox", "Leaving residential treatment", "In outpatient treatment", "Currently using, seeking help", "Sober but need structure", "Re-entering after incarceration"]} />
                </Field>
                <Grid>
                  <Select label="Primary substance" placeholder="Choose one" value={data.substance || ""} onChange={set("substance")}
                    options={["Alcohol", "Opioids", "Stimulants", "Benzodiazepines", "Multiple", "Prefer not to say"]} />
                  <Select label="Time since last use" placeholder="Choose one" value={data.timeSober || ""} onChange={set("timeSober")}
                    options={["Still using", "Under 1 week", "1–4 weeks", "1–3 months", "3+ months"]} />
                </Grid>
                <Field>
                  <Textarea label="Anything you'd like us to know?" rows={4} value={data.notes || ""} onChange={set("notes")}
                    hint="Optional — goals, worries, needs. This is a judgment-free space." />
                </Field>
              </div>
            )}

            {step === 2 && (
              <div>
                <StepTitle t="Paying for your stay" s="One transparent weekly rate. Tell us your situation and we'll walk you through options and any assistance you may qualify for." />
                <Field>
                  <label style={{ fontSize: "var(--text-sm)", fontWeight: 600, color: "var(--text-heading)", display: "block", marginBottom: 10 }}>Do you have health insurance?</label>
                  <RadioGroup name="ins" columns={3} value={data.insurance} onChange={set("insurance")} options={[
                    { value: "yes", label: "Yes" }, { value: "no", label: "No / not sure" }, { value: "self", label: "Self-pay" },
                  ]} />
                </Field>
                {data.insurance === "yes" && (
                  <Grid>
                    <Select label="Insurance provider" placeholder="Choose one" value={data.provider || ""} onChange={set("provider")}
                      options={["Aetna", "Blue Cross Blue Shield", "Cigna", "UnitedHealthcare", "Humana", "Magellan", "Other"]} />
                    <Input label="Member ID" value={data.memberId || ""} onChange={set("memberId")} placeholder="Optional — we can verify by phone" />
                  </Grid>
                )}
                <div style={{ display: "flex", gap: 12, alignItems: "flex-start", background: "var(--surface-water-soft)", padding: "16px 18px", borderRadius: "var(--radius-md)" }}>
                  <span style={{ color: "var(--water-700)", flexShrink: 0, marginTop: 1 }}><AIcon name="shield-check" size={20} /></span>
                  <p style={{ margin: 0, fontSize: "var(--text-sm)", color: "var(--water-700)", lineHeight: 1.6 }}>
                    Sharing this never obligates you to anything — it just helps us prepare the right options before we call.
                  </p>
                </div>
              </div>
            )}

            {step === 3 && (
              <div>
                <StepTitle t="Review & send" s="Take a look, add an emergency contact, and you're done." />
                <div style={{ background: "var(--surface-sunken)", borderRadius: "var(--radius-md)", padding: "18px 20px", marginBottom: 22 }}>
                  {[["For", data.who === "self" ? "Myself" : "A loved one"],
                    ["Name", [data.firstName, data.lastName].filter(Boolean).join(" ") || "—"],
                    ["Contact", [data.phone, data.email].filter(Boolean).join(" · ") || "—"],
                    ["Situation", data.situation || "—"],
                    ["Payment", data.insurance === "yes" ? (data.provider || "Has insurance") : data.insurance === "self" ? "Self-pay" : "None / unsure"]
                  ].map(([k, v], i) => (
                    <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "8px 0", borderBottom: i < 4 ? "1px solid var(--border-subtle)" : "none" }}>
                      <span style={{ color: "var(--text-muted)", fontSize: "var(--text-sm)" }}>{k}</span>
                      <span style={{ color: "var(--text-heading)", fontWeight: 600, fontSize: "var(--text-sm)", textAlign: "right" }}>{v}</span>
                    </div>
                  ))}
                </div>
                <Grid>
                  <Input label="Emergency contact name" value={data.ecName || ""} onChange={set("ecName")} placeholder="Optional" />
                  <Input label="Emergency contact phone" type="tel" value={data.ecPhone || ""} onChange={set("ecPhone")} placeholder="Optional" />
                </Grid>
                <div style={{ marginBottom: 8 }}>
                  <Checkbox label="I consent to a confidential follow-up call or text from Willow Creek."
                    description="We'll never share your information. Standard message rates may apply."
                    checked={data.consent} onChange={set("consent")} />
                </div>
              </div>
            )}

            <div style={{ marginTop: 32, paddingTop: 22, borderTop: "1px solid var(--border-subtle)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
              <div style={{ flex: "1 1 200px", minWidth: 160 }}>
                <ProgressBar value={pct} label={`Step ${step + 1} of ${steps.length}`} showValue />
              </div>
              <div style={{ display: "flex", gap: 12 }}>
                {step > 0 && <Button variant="ghost" onClick={back} leftIcon={<AIcon name="arrow-left" size={18} />}>Back</Button>}
                {step < steps.length - 1
                  ? <Button variant="primary" onClick={next} rightIcon={<AIcon name="arrow-right" size={18} />}>Continue</Button>
                  : <Button variant="accent" disabled={!data.consent} onClick={() => setDone(true)} rightIcon={<AIcon name="send" size={18} />}>Send application</Button>}
              </div>
            </div>
          </Card>

          <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: "var(--text-sm)", marginTop: 20, display: "flex", alignItems: "center", justifyContent: "center", gap: 8 }}>
            <AIcon name="lock" size={14} /> Your information is private and secure. This is a demo form — no data is stored.
          </p>
        </AContainer>
      </section>
    </>
  );
}
window.WC.AdmissionsScreen = AdmissionsScreen;