/* Onboarding: light, calm, one thing at a time */
const OnbStepper = ({ step }) => {
  const steps = ["Business", "Number", "Receptionist", "Connections", "Review"];
  return (
    <div className="onb-progress">
      {steps.map((s, i) => {
        const state = i < step ? "done" : i === step ? "on" : "";
        return (
          <React.Fragment key={i}>
            <div className={`onb-step ${state}`}>
              <div className="dot">{i < step ? <Icon name="check" size={12}/> : i + 1}</div>
              <span>{s}</span>
            </div>
            {i < steps.length - 1 && <div style={{ width: 20, height: 1, background: "var(--border)" }}/>}
          </React.Fragment>
        );
      })}
    </div>
  );
};

const TenantOnboarding = ({ onGo }) => {
  const store = MK_USE();
  const toast = useToast();
  const [step, setStep] = useState(1);
  const [selectedNumberId, setSelectedNumberId] = useState(null);
  const [submitting, setSubmitting] = useState(false);
  useEffect(() => {
    api.numbers.available(20).catch(() => {});
    api.connections.list().catch(() => {});
    api.health.check().catch(() => {});
  }, []);
  const next = async () => {
    if (step < 4) {
      setStep(step + 1);
      return;
    }
    setSubmitting(true);
    try {
      if (selectedNumberId) await api.numbers.select([selectedNumberId]);
      await api.receptionist.publish();
      toast({ title: "Onboarding complete", body: "Your number is now live." });
      onGo("tenant-dashboard");
    } catch (err) {
      toast({ title: "Could not go live", body: err?.message || "Please retry.", kind: "danger" });
    } finally {
      setSubmitting(false);
    }
  };
  const prev = () => step > 0 ? setStep(step - 1) : onGo("login");

  return (
    <div className="onb-wrap">
      <div className="onb-top">
        <div className="row gap-2">
          <MikakaMark size={24}/>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "-0.02em", fontSize: 16 }}>mikaka<span style={{ color: "var(--mk-orange)" }}>voice</span></span>
        </div>
        <OnbStepper step={step}/>
        <button className="btn btn-ghost btn-sm" onClick={() => onGo("login")}>Save & exit</button>
      </div>

      <div className="onb-body page-mount" key={step}>
        <div className="onb-inner">
          {step === 0 && <StepBusiness/>}
          {step === 1 && <StepNumber selectedNumberId={selectedNumberId} onSelectNumber={setSelectedNumberId} numbers={store.onboardingNumbers || []}/>}
          {step === 2 && <StepReceptionist/>}
          {step === 3 && <StepConnections connections={store.connections || []}/>}
          {step === 4 && <StepReview selectedNumberId={selectedNumberId} numbers={store.onboardingNumbers || []} status={store.onboardingStatus} connections={store.connections || []}/>}
        </div>
      </div>

      <div className="onb-foot">
        <button className="btn btn-ghost" onClick={prev}><Icon name="chevron-left"/> Back</button>
        <div className="row gap-2">
          <button className="btn btn-outline" onClick={next}>Skip</button>
          <button className="btn btn-accent" onClick={next}>
            {step === 4 ? (submitting ? "Going live…" : "Go live") : "Continue"} <Icon name="arrow-right"/>
          </button>
        </div>
      </div>
    </div>
  );
};

const StepBusiness = () => (
  <>
    <Chip kind="accent">Step 1 of 5</Chip>
    <h1 className="onb-h" style={{ marginTop: 16 }}>Tell us about your business.</h1>
    <p className="onb-sub">This shapes how your receptionist answers. You can edit everything later.</p>
    <div className="stack gap-4">
      <div className="field"><label>Business name</label><input className="input" defaultValue=""/></div>
      <div className="grid grid-2">
        <div className="field">
          <label>Industry</label>
          <select className="input">
            <option>Healthcare — dental</option>
            <option>Restaurant / hospitality</option>
            <option>Retail & e-commerce</option>
            <option>Financial services</option>
            <option>Professional services</option>
          </select>
        </div>
        <div className="field">
          <label>Team size</label>
          <select className="input"><option>1–5</option><option>6–20</option><option>21–50</option><option>50+</option></select>
        </div>
      </div>
      <div className="field">
        <label>In one sentence, what do you do?</label>
        <textarea className="input" rows="3" defaultValue="We run a family dental clinic in Westlands, Nairobi. We do general dentistry, cleanings and emergency care."/>
        <span className="hint">Mikaka uses this as the opening elevator pitch.</span>
      </div>
      <div className="field">
        <label>Escalation phone (when AI should hand off)</label>
        <input className="input" defaultValue="+254 722 444 001"/>
      </div>
    </div>
  </>
);

const StepNumber = ({ selectedNumberId, onSelectNumber, numbers }) => {
  const normalized = (numbers || []).map((n) => ({
    id: n.id,
    n: n.did_e164 || n.e164 || n.phone_number || "Unknown",
    city: `${n.city || n.area || "Unknown"} · ${n.country || n.country_code || "Unknown"}`,
    ready: n.status === "available" || n.is_ready || n.ready,
    label: n.status === "available" || n.is_ready || n.ready ? "Ready now" : (n.status || "Pending"),
  }));
  const rows = normalized;
  return (
    <>
      <Chip kind="accent">Step 2 of 5</Chip>
      <h1 className="onb-h" style={{ marginTop: 16 }}>Pick a number that rings today.</h1>
      <p className="onb-sub">Every "Ready now" number is pre-provisioned — as soon as you finish onboarding, it answers.</p>
      <div className="stack gap-3">
        {rows.length === 0 ? (
          <div className="card" style={{ padding: 16, color: "var(--fg-muted)" }}>No available numbers found yet.</div>
        ) : rows.map((n) => (
          <div key={n.id} onClick={() => onSelectNumber(n.id)} className="card" style={{ padding: 16, cursor: "pointer", borderColor: selectedNumberId === n.id ? "var(--mk-orange)" : "var(--border)", boxShadow: selectedNumberId === n.id ? "0 0 0 3px var(--ring)" : "none" }}>
            <div className="row between">
              <div className="row gap-3">
                <div style={{ width: 36, height: 36, borderRadius: 10, background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="phone" size={16}/>
                </div>
                <div>
                  <div className="mono" style={{ fontSize: 15, fontWeight: 500 }}>{n.n}</div>
                  <div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>{n.city}</div>
                </div>
              </div>
              <div className="row gap-3">
                <Chip kind={n.ready ? "live" : "warn"} dot>{n.label}</Chip>
                <div style={{ width: 18, height: 18, borderRadius: "50%", border: "1.5px solid " + (selectedNumberId === n.id ? "var(--mk-orange)" : "var(--border-strong)"), background: selectedNumberId === n.id ? "var(--mk-orange)" : "transparent" }}>
                  {selectedNumberId === n.id && <Icon name="check" size={14} style={{ color: "white", margin: "1px" }}/>}
                </div>
              </div>
            </div>
          </div>
        ))}
        <a className="dot-link" style={{ fontSize: 13.5, marginTop: 6 }}>Need a custom number or a short code? Request one →</a>
      </div>
    </>
  );
};

const StepReceptionist = () => (
  <>
    <Chip kind="accent">Step 3 of 5</Chip>
    <h1 className="onb-h" style={{ marginTop: 16 }}>Train your receptionist.</h1>
    <p className="onb-sub">Answer 3 questions and we'll draft the rest. You can fine-tune every line later.</p>
    <div className="stack gap-5">
      <div className="field">
        <label>How should she greet callers?</label>
        <input className="input" defaultValue="Hello, this is Mikaka. How can I help you today?"/>
      </div>
      <div className="field">
        <label>Top 3 things callers ask about</label>
        <div className="stack gap-2">
          <input className="input" defaultValue="Appointment booking"/>
          <input className="input" defaultValue="Pricing & insurance"/>
          <input className="input" defaultValue="Emergency / out-of-hours care"/>
        </div>
      </div>
      <div className="field">
        <label>Business hours</label>
        <div className="grid grid-2">
          <input className="input" defaultValue="Mon–Fri · 8am–6pm"/>
          <input className="input" defaultValue="Sat · 9am–1pm"/>
        </div>
      </div>
      <div style={{ padding: 16, background: "var(--bg-sunken)", borderRadius: 12, fontSize: 13.5, color: "var(--fg-muted)", display: "flex", gap: 12 }}>
        <Icon name="sparkles" style={{ color: "var(--mk-orange)", flexShrink: 0, marginTop: 2 }}/>
        <div>Drop a website, PDF, or menu later and Mikaka will automatically extend her FAQ. You can skip that step for now.</div>
      </div>
    </div>
  </>
);

const StepConnections = ({ connections }) => (
  <>
    <Chip kind="accent">Step 4 of 5 · optional</Chip>
    <h1 className="onb-h" style={{ marginTop: 16 }}>Connect your tools.</h1>
    <p className="onb-sub">Optional, but booking & payments only work when you plug these in.</p>
    <div className="stack gap-3">
      {(connections || []).slice(0, 6).map((c, i) => (
        <div key={c.id || i} className="card" style={{ padding: 16 }}>
          <div className="row between">
            <div className="row gap-3">
              <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--bg-sunken)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                <Icon name={c.icon || "link"}/>
              </div>
              <div>
                <div style={{ fontWeight: 500 }}>{c.name}</div>
                <div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>{c.desc}</div>
              </div>
            </div>
            <button className={`btn ${c.on ? "btn-outline" : "btn-primary"} btn-sm`} onClick={() => api.connections.toggle(c.id)}>
              {c.on ? <><Icon name="check" size={13}/> Connected</> : "Connect"}
            </button>
          </div>
        </div>
      ))}
    </div>
  </>
);

const StepReview = ({ selectedNumberId, numbers, status, connections }) => {
  const selected = (numbers || []).find((n) => n.id === selectedNumberId);
  const activeConnections = (connections || []).filter((c) => c.on).slice(0, 3);
  return (
  <>
    <Chip kind="accent">Final step</Chip>
    <h1 className="onb-h" style={{ marginTop: 16 }}>Ready to go live?</h1>
    <p className="onb-sub">Here's what we'll activate in the next 60 seconds.</p>
    <div className="card card-pad stack gap-4" style={{ marginBottom: 20 }}>
      {[
        ["Business", status?.tenant_name || "Configured from your workspace"],
        ["Number", selected ? `${selected.did_e164 || selected.e164 || selected.phone_number} · ${selected.city || selected.country || "—"}` : "No number selected"],
        ["Receptionist", status?.agent_name || "Primary receptionist configured"],
        ["Escalation", status?.escalation_phone || "Set in receptionist settings"],
        ["Connections", activeConnections.length ? activeConnections.map((c) => c.name).join(", ") : "None connected"],
      ].map(([k, v], i) => (
        <div key={i} className="row between" style={{ paddingBottom: i < 4 ? 12 : 0, borderBottom: i < 4 ? "1px solid var(--border)" : "none" }}>
          <div style={{ fontSize: 12.5, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 600 }}>{k}</div>
          <div style={{ fontSize: 14, fontWeight: 500, textAlign: "right" }}>{v}</div>
        </div>
      ))}
    </div>
    <div className="card card-pad" style={{ background: "var(--accent-soft)", borderColor: "rgba(242,118,33,.25)" }}>
      <div className="row gap-3">
        <Icon name="sparkles" style={{ color: "var(--mk-orange)" }}/>
        <div style={{ fontSize: 13.5 }}>
          <b>You're ready.</b> Pressing <b>Go live</b> activates your selected number immediately.
        </div>
      </div>
    </div>
  </>
  );
};

window.TenantOnboarding = TenantOnboarding;