// PassMark onboarding — School (enterprise) flow step definitions

function SchoolInfo({ data, update, errors }) {
  return (
    <div className="pm-section-stack">
      <div className="pm-subsection">
        <div className="pm-subhead"><Icon name="school" size={15} /> School details</div>
        <div className="pm-form-grid two">
          <Field label="School name" value={data.schoolName || ""} autoFocus wide
            onChange={(v) => update({ schoolName: v })} placeholder="Greenfield Secondary School" error={errors.schoolName} />
          <Field label="School email" value={data.schoolEmail || ""} type="email"
            onChange={(v) => update({ schoolEmail: v })} placeholder="admin@school.edu.ng" error={errors.schoolEmail} />
          <Field label="Phone number" value={data.schoolPhone || ""} type="tel"
            onChange={(v) => update({ schoolPhone: v })} placeholder="0801 234 5678" error={errors.schoolPhone} />
          <Field label="School address" value={data.address || ""} wide
            onChange={(v) => update({ address: v })} placeholder="12 Awolowo Road, Ikoyi, Lagos" error={errors.address} />
          <Select label="State" value={data.schoolState} options={NIGERIAN_STATES.filter((s) => s !== "Other")} searchable
            onChange={(v) => update({ schoolState: v })} placeholder="Select state" error={errors.schoolState} />
        </div>
      </div>
      <div className="pm-subsection">
        <div className="pm-subhead"><Icon name="user" size={15} /> Administrator login</div>
        <p className="pm-subnote">This is the account you'll use to sign in and manage your school.</p>
        <div className="pm-form-grid two">
          <Field label="Admin full name" value={data.adminName || ""}
            onChange={(v) => update({ adminName: v })} placeholder="Principal / IT lead" error={errors.adminName} />
          <Field label="Admin email (login)" value={data.adminEmail || ""} type="email"
            onChange={(v) => update({ adminEmail: v })} placeholder="you@school.edu.ng" error={errors.adminEmail} />
          <Field label="Password" value={data.password || ""} type="password"
            onChange={(v) => update({ password: v })} placeholder="Min. 8 characters"
            error={errors.password} hint="At least 8 characters" />
          <Field label="Confirm password" value={data.confirm || ""} type="password"
            onChange={(v) => update({ confirm: v })} placeholder="Re-enter password" error={errors.confirm} />
        </div>
      </div>
    </div>
  );
}

function SchoolCapacity({ data, update }) {
  return (
    <div className="pm-choice-grid two cap">
      {SCHOOL_CAPACITY.map((c) => (
        <ChoiceCard key={c.id} selected={data.capacity === c.id} title={`${c.label} students`} desc={c.desc}
          onClick={() => update({ capacity: c.id })} />
      ))}
    </div>
  );
}

function SchoolPlan({ data, update }) {
  const icons = { cbt: "target", learn: "spark", both: "book" };
  return (
    <div className="pm-choice-grid three">
      {SCHOOL_PLANS.map((p) => (
        <ChoiceCard key={p.id} selected={data.plan === p.id} icon={icons[p.id]}
          tag={p.best ? "RECOMMENDED" : null} accent={p.best} title={p.name} desc={p.desc}
          onClick={() => update({ plan: p.id })} />
      ))}
    </div>
  );
}

function SchoolReviewRow({ label, value }) {
  return (
    <div className="pm-review-row">
      <span className="pm-review-label">{label}</span>
      <span className="pm-review-value">{value || "—"}</span>
    </div>
  );
}

function SchoolReview({ data }) {
  const cap = SCHOOL_CAPACITY.find((c) => c.id === data.capacity);
  const plan = SCHOOL_PLANS.find((p) => p.id === data.plan);
  return (
    <div className="pm-review">
      <div className="pm-review-card">
        <div className="pm-review-head"><Icon name="school" size={16} /> Institution</div>
        <SchoolReviewRow label="School" value={data.schoolName} />
        <SchoolReviewRow label="Email" value={data.schoolEmail} />
        <SchoolReviewRow label="Phone" value={data.schoolPhone} />
        <SchoolReviewRow label="Location" value={[data.address, data.schoolState].filter(Boolean).join(", ")} />
      </div>
      <div className="pm-review-card">
        <div className="pm-review-head"><Icon name="user" size={16} /> Administrator</div>
        <SchoolReviewRow label="Contact" value={data.adminName} />
        <SchoolReviewRow label="Login email" value={data.adminEmail} />
        <SchoolReviewRow label="Student capacity" value={cap ? `${cap.label} students` : null} />
      </div>
      <div className="pm-review-card span">
        <div className="pm-review-head"><Icon name="spark" size={16} /> Plan</div>
        <SchoolReviewRow label="Selected" value={plan?.name} />
        <SchoolReviewRow label="Billing tier" value={cap ? `Based on ${cap.label} students` : null} />
      </div>
    </div>
  );
}

const SCHOOL_STEPS = [
  {
    key: "info", eyebrow: "Step 1", title: "Tell us about your school",
    subtitle: "We'll use this to set up your institution's enterprise workspace.",
    panel: "Register your school",
    validate: (d) => {
      const e = {};
      if (!d.schoolName?.trim()) e.schoolName = "Required";
      if (!d.schoolEmail?.trim()) e.schoolEmail = "Required";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d.schoolEmail)) e.schoolEmail = "Enter a valid email";
      if (!d.schoolPhone?.trim()) e.schoolPhone = "Required";
      if (!d.address?.trim()) e.address = "Required";
      if (!d.schoolState) e.schoolState = "Required";
      if (!d.adminName?.trim()) e.adminName = "Required";
      if (!d.adminEmail?.trim()) e.adminEmail = "Required";
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(d.adminEmail)) e.adminEmail = "Enter a valid email";
      if (!d.password) e.password = "Required";
      else if (d.password.length < 8) e.password = "At least 8 characters";
      if (!d.confirm) e.confirm = "Re-enter your password";
      else if (d.confirm !== d.password) e.confirm = "Passwords don't match";
      return e;
    },
    render: (ctx) => <SchoolInfo {...ctx} />,
  },
  {
    key: "capacity", eyebrow: "Step 2", title: "How many students will you onboard?",
    subtitle: "Pick a range — this determines your enterprise billing tier.",
    panel: "Student capacity",
    validate: (d) => (d.capacity ? {} : { _: "Select a capacity range" }),
    render: (ctx) => <SchoolCapacity {...ctx} />,
  },
  {
    key: "plan", eyebrow: "Step 3", title: "Choose your plan",
    subtitle: "Give your students CBT practice, the Learning Assistant, or both.",
    panel: "Pick your plan",
    validate: (d) => (d.plan ? {} : { _: "Choose a plan to continue" }),
    render: (ctx) => <SchoolPlan {...ctx} />,
  },
  {
    key: "review", eyebrow: "Almost done", title: "Review & confirm",
    subtitle: "Check the details, then create your enterprise account.",
    panel: "One last look",
    render: (ctx) => <SchoolReview {...ctx} />,
  },
];

Object.assign(window, { SCHOOL_STEPS });