/* AI Receptionist configuration — the core tenant workflow */
const AIReceptionist = () => {
  const [tab, setTab] = useState("identity");
  const tabs = [
    { id: "identity", t: "Identity & voice", i: "bot" },
    { id: "playbook", t: "Playbook", i: "book" },
    { id: "skills", t: "Skills", i: "zap" },
    { id: "guardrails", t: "Guardrails", i: "shield" },
    { id: "knowledge", t: "Knowledge base", i: "file" },
    { id: "handoff", t: "Handoff rules", i: "phone" },
  ];

  return (
    <div className="panel">
      <aside className="panel-nav">
        <div style={{ padding: "0 8px 16px" }}>
          <div style={{ fontSize: 12, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 600, marginBottom: 10 }}>Receptionist</div>
          <div className="row gap-3" style={{ padding: 10, background: "var(--bg-sunken)", borderRadius: 10 }}>
            <div style={{ width: 40, height: 40, borderRadius: 10, background: "var(--mk-ink)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontWeight: 600 }}>M</div>
            <div><div style={{ fontWeight: 500, fontSize: 14 }}>Mikaka</div><div style={{ fontSize: 12, color: "var(--fg-muted)" }}>Acme Dentistry · EN</div></div>
          </div>
        </div>
        <div className="stack gap-1">
          {tabs.map(t => (
            <div key={t.id} className={`ni ${tab === t.id ? "on" : ""}`} onClick={() => setTab(t.id)}>
              <Icon name={t.i} size={15}/> {t.t}
            </div>
          ))}
        </div>
      </aside>

      <div className="panel-main page-mount" key={tab}>
        <div className="row between" style={{ marginBottom: 24 }}>
          <div>
            <Chip kind="live" dot>Published · v14</Chip>
            <h1 className="page-title" style={{ marginTop: 10 }}>{tabs.find(t => t.id === tab).t}</h1>
          </div>
          <div className="row gap-2">
            <button className="btn btn-outline"><Icon name="play"/> Test call</button>
            <button className="btn btn-accent"><Icon name="check"/> Publish changes</button>
          </div>
        </div>

        {tab === "identity" && (
          <div className="stack gap-5">
            <div className="card card-pad">
              <h3 style={{ margin: "0 0 16px", fontSize: 15, fontWeight: 500 }}>Persona</h3>
              <div className="grid grid-2" style={{ gap: 20 }}>
                <div className="field"><label>Name</label><input className="input" defaultValue="Mikaka"/></div>
                <div className="field"><label>Voice</label>
                  <select className="input"><option>Amani — warm, East African English</option><option>Zuri — Swahili/English bilingual</option><option>Ade — Nigerian English</option></select>
                </div>
                <div className="field"><label>Speaking pace</label>
                  <div className="row gap-3"><input type="range" min="0" max="100" defaultValue="55" style={{ flex: 1 }}/><span className="mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>medium</span></div>
                </div>
                <div className="field"><label>Formality</label>
                  <div className="seg"><button>Casual</button><button className="on">Professional</button><button>Formal</button></div>
                </div>
              </div>
            </div>
            <div className="card card-pad">
              <h3 style={{ margin: "0 0 16px", fontSize: 15, fontWeight: 500 }}>Greeting & sign-off</h3>
              <div className="stack gap-4">
                <div className="field"><label>Opening line</label><textarea className="input" rows="2" defaultValue="Hello, thanks for calling Acme Dentistry — this is Mikaka, how can I help?"/></div>
                <div className="field"><label>Closing line</label><input className="input" defaultValue="Thanks for calling Acme — take care!"/></div>
              </div>
            </div>
          </div>
        )}

        {tab === "playbook" && (
          <div className="stack gap-5">
            {[
              { title: "Elevator pitch", body: "We run a family dental clinic in Westlands, Nairobi. General dentistry, cleanings, implants and emergency care. Serving families for 12+ years." },
              { title: "Top 5 FAQs", body: "• What are your hours?\n• How much is a cleaning?\n• Do you take NHIF?\n• Do you have weekend slots?\n• Where do I park?" },
              { title: "Services & pricing", body: "Cleaning KSh 3,500 · Filling KSh 5,500 · Root canal KSh 22,000 · Crown KSh 30,000. Mention we accept NHIF and AAR for check-ups." },
              { title: "Do's & don'ts", body: "DO: confirm NHIF cards at booking. DON'T: quote prices for surgery without a consult. DON'T: accept emergency bookings outside 8am–6pm — escalate to Dr. Owino instead." },
            ].map((s, i) => (
              <div key={i} className="card card-pad">
                <div className="row between" style={{ marginBottom: 10 }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>{s.title}</div>
                  <button className="btn btn-ghost btn-sm"><Icon name="sparkles" size={13} style={{ color: "var(--mk-orange)" }}/> Improve with AI</button>
                </div>
                <textarea className="input" rows="3" defaultValue={s.body} style={{ fontFamily: "inherit" }}/>
              </div>
            ))}
          </div>
        )}

        {tab === "skills" && (
          <div className="grid grid-2 stagger">
            {[
              { i: "calendar", t: "Book appointments", d: "Into Google Calendar · Mon–Sat", on: true },
              { i: "card", t: "Take M-Pesa payment", d: "For deposits only · max KSh 5,000", on: true },
              { i: "phone", t: "Transfer to human", d: "Escalation line +254 722 444 001", on: true },
              { i: "inbox", t: "Take messages", d: "Summarised & emailed to you", on: true },
              { i: "globe", t: "Check order status", d: "Needs CRM connection", on: false },
              { i: "file", t: "Send documents", d: "Price list or consent form", on: false },
            ].map((s, i) => (
              <div key={i} className="card card-pad">
                <div className="row between">
                  <div className="row gap-3">
                    <div style={{ width: 40, height: 40, borderRadius: 10, background: s.on ? "var(--accent-soft)" : "var(--bg-sunken)", color: s.on ? "var(--mk-orange-600)" : "var(--fg-muted)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={s.i}/></div>
                    <div><div style={{ fontWeight: 500 }}>{s.t}</div><div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>{s.d}</div></div>
                  </div>
                  <div className={`switch ${s.on ? "on" : ""}`}/>
                </div>
              </div>
            ))}
          </div>
        )}

        {tab === "guardrails" && (
          <div className="stack gap-4">
            <div className="card card-pad" style={{ borderColor: "rgba(208,69,58,.3)", background: "rgba(208,69,58,.04)" }}>
              <div className="row gap-3" style={{ marginBottom: 12 }}>
                <Icon name="shield" style={{ color: "var(--mk-danger)", marginTop: 2 }}/>
                <div><div style={{ fontWeight: 500 }}>Critical "DO NOT ask" rules</div><div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>PCI DSS · these cannot be disabled</div></div>
              </div>
              <div className="stack gap-2" style={{ fontSize: 13.5 }}>
                {["Never ask for CVV / card security codes","Never ask for full card numbers","Never ask for PINs or passwords","Never record or store any of the above"].map((r, i) => (
                  <div key={i} className="row gap-2"><Icon name="x" size={14} style={{ color: "var(--mk-danger)" }}/> {r}</div>
                ))}
              </div>
            </div>
            <div className="card card-pad">
              <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 12 }}>Identity verification required for</div>
              <div className="stack gap-2">
                {[["Reschedule appointments", true], ["Discuss medical history", true], ["Cancel bookings", true], ["Request a refund", false]].map((r, i) => (
                  <div key={i} className="row between" style={{ padding: 10, background: "var(--bg-sunken)", borderRadius: 8 }}>
                    <span style={{ fontSize: 13.5 }}>{r[0]}</span><div className={`switch ${r[1] ? "on" : ""}`}/>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {tab === "knowledge" && (
          <div className="stack gap-5">
            <div className="empty">
              <div className="illus"><Icon name="file" size={28}/></div>
              <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 6 }}>Drop in docs, menus or your website</div>
              <div style={{ fontSize: 13.5, color: "var(--fg-muted)", marginBottom: 16, maxWidth: 440, margin: "0 auto 16px" }}>Mikaka reads them and builds FAQ answers automatically. PDFs, Google Docs, URLs and plain text all work.</div>
              <div className="row gap-2" style={{ justifyContent: "center" }}>
                <button className="btn btn-accent"><Icon name="plus"/> Upload file</button>
                <button className="btn btn-outline"><Icon name="link"/> Add URL</button>
              </div>
            </div>
            <Section title="Ingested sources">
              <div className="card">
                <table className="tbl">
                  <thead><tr><th>Source</th><th>Type</th><th>Status</th><th>Added</th></tr></thead>
                  <tbody>
                    {[["Price list — 2026.pdf","PDF","indexed","2d ago"],["acme-dentistry.co.ke/faq","URL","indexed","1w ago"],["Insurance list.docx","Doc","processing","just now"]].map((r,i) => (
                      <tr key={i}><td className="cell-strong">{r[0]}</td><td>{r[1]}</td><td><Chip kind={r[2]==="indexed"?"live":"warn"} dot>{r[2]}</Chip></td><td style={{ color: "var(--fg-muted)" }}>{r[3]}</td></tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </Section>
          </div>
        )}

        {tab === "handoff" && (
          <div className="stack gap-5">
            <div className="card card-pad">
              <h3 style={{ margin: "0 0 16px", fontSize: 15, fontWeight: 500 }}>Escalation contacts</h3>
              <div className="stack gap-3">
                {[["Dr. Owino","+254 722 444 001","Emergencies, complex bookings"],["Joyce (Reception)","+254 722 444 002","Overflow, general"]].map((r,i) => (
                  <div key={i} className="row gap-3" style={{ padding: 12, background: "var(--bg-sunken)", borderRadius: 10 }}>
                    <div className="avatar" style={{ width: 36, height: 36, fontSize: 12 }}>{r[0].split(" ").map(s=>s[0]).join("")}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 500, fontSize: 14 }}>{r[0]}</div>
                      <div className="mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>{r[1]} · {r[2]}</div>
                    </div>
                    <button className="btn btn-ghost btn-icon btn-sm"><Icon name="chevron-right"/></button>
                  </div>
                ))}
                <button className="btn btn-outline btn-sm" style={{ alignSelf: "flex-start" }}><Icon name="plus"/> Add contact</button>
              </div>
            </div>
          </div>
        )}
      </div>

      <aside className="panel-aside">
        <div className="row between" style={{ marginBottom: 14 }}>
          <div style={{ fontSize: 12, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 600 }}>Live preview</div>
          <Chip kind="live" dot>simulating</Chip>
        </div>
        <div style={{ background: "var(--bg-sunken)", borderRadius: 14, padding: 16, minHeight: 420 }}>
          <div className="row gap-2" style={{ marginBottom: 14 }}>
            <span className="live-dot"/><span className="mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>Call · 00:38</span>
          </div>
          <div className="stack gap-3">
            <div style={{ padding: "10px 12px", background: "var(--bg-elev)", border: "1px solid var(--border)", borderRadius: 10, fontSize: 13 }}>
              <b style={{ color: "var(--mk-orange-600)" }}>Mikaka:</b> Hello, thanks for calling Acme Dentistry — this is Mikaka, how can I help?
            </div>
            <div style={{ padding: "10px 12px", background: "var(--mk-ink)", color: "#fff", borderRadius: 10, fontSize: 13, alignSelf: "flex-end", maxWidth: "85%" }}>
              I need a cleaning sometime next week.
            </div>
            <div style={{ padding: "10px 12px", background: "var(--bg-elev)", border: "1px solid var(--border)", borderRadius: 10, fontSize: 13 }}>
              <b style={{ color: "var(--mk-orange-600)" }}>Mikaka:</b> Happy to help. We have Tuesday at 10am or Thursday at 2pm — which works?
            </div>
          </div>
          <div className="row gap-2" style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
            <button className="btn btn-ghost btn-icon btn-sm"><Icon name="mic" size={14}/></button>
            <input className="input" placeholder="Try saying something…" style={{ fontSize: 13 }}/>
          </div>
        </div>
        <div style={{ marginTop: 16, fontSize: 12.5, color: "var(--fg-muted)" }}>
          Changes preview live. Publish to send them to real calls.
        </div>
      </aside>
    </div>
  );
};

window.AIReceptionist = AIReceptionist;