/* Tenant-detail tab panels used by admin.jsx */

const TDNumbers = () => (
  <div className="card">
    <div className="row between" style={{ padding: "16px 20px", borderBottom: "1px solid var(--border)" }}>
      <div style={{ fontSize: 15, fontWeight: 500 }}>Numbers (2)</div>
      <button className="btn btn-outline btn-sm"><Icon name="plus" size={13}/> Assign number</button>
    </div>
    <table className="tbl">
      <thead><tr><th>Number</th><th>Region</th><th>Callback</th><th>Status</th><th>Minutes</th><th></th></tr></thead>
      <tbody>
        <tr><td className="mono cell-strong">+254 20 765 4110</td><td>Nairobi</td><td className="mono" style={{ fontSize: 12 }}>trunk:197.232.94.18</td><td><Chip kind="live" dot>healthy</Chip></td><td className="mono">462 / 500</td><td><Icon name="chevron-right" size={14}/></td></tr>
        <tr><td className="mono cell-strong">+254 20 765 4212</td><td>Mombasa</td><td className="mono" style={{ fontSize: 12 }}>trunk:197.232.94.18</td><td><Chip kind="live" dot>healthy</Chip></td><td className="mono">118 / 500</td><td><Icon name="chevron-right" size={14}/></td></tr>
      </tbody>
    </table>
  </div>
);

const TDRouting = () => (
  <div className="stack gap-4">
    <div className="card card-pad">
      <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 14 }}>Routing rules</div>
      <div className="stack gap-2">
        {[["Mon–Fri 8am–6pm", "AI receptionist", "active"], ["After hours", "Forward to +254 733 ••• 110", "active"], ["Holidays", "Voicemail greeting", "paused"]].map(([w, a, s], i) => (
          <div key={i} className="row between" style={{ padding: 12, background: "var(--bg-sunken)", borderRadius: 10 }}>
            <div><div style={{ fontSize: 13.5, fontWeight: 500 }}>{w}</div><div style={{ fontSize: 12, color: "var(--fg-muted)" }}>{a}</div></div>
            <Chip kind={s === "active" ? "live" : "neutral"} dot>{s}</Chip>
          </div>
        ))}
      </div>
    </div>
    <div className="card card-pad">
      <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 10 }}>Trunk & carrier</div>
      <div className="grid grid-2" style={{ fontSize: 13 }}>
        <div><div style={{ color: "var(--fg-muted)", fontSize: 12, marginBottom: 2 }}>Primary</div>Africa's Talking · SIP trunk</div>
        <div><div style={{ color: "var(--fg-muted)", fontSize: 12, marginBottom: 2 }}>Failover</div>Safaricom direct</div>
        <div><div style={{ color: "var(--fg-muted)", fontSize: 12, marginBottom: 2 }}>Codec</div>OPUS · G.711 ulaw</div>
        <div><div style={{ color: "var(--fg-muted)", fontSize: 12, marginBottom: 2 }}>p95 latency</div><span className="mono">142ms</span></div>
      </div>
    </div>
  </div>
);

const TDCalls = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr><th>Caller</th><th>Intent</th><th>Outcome</th><th>Duration</th><th>Time</th></tr></thead>
      <tbody>
        {[["+254 722 ••• 341","Book appointment","booked","2:14","8m ago"],
          ["+254 733 ••• 189","Pricing question","handled","1:07","24m ago"],
          ["+254 711 ••• 602","Emergency","escalated","0:42","1h 12m"],
          ["+254 710 ••• 885","Hours","handled","0:58","2h 40m"]].map((r,i) => (
          <tr key={i}><td className="mono cell-strong">{r[0]}</td><td>{r[1]}</td><td><Chip kind={r[2]==="booked"?"live":r[2]==="escalated"?"warn":"accent"} dot>{r[2]}</Chip></td><td className="mono">{r[3]}</td><td style={{ color: "var(--fg-muted)" }}>{r[4]}</td></tr>
        ))}
      </tbody>
    </table>
  </div>
);

const TDBilling = () => (
  <div className="grid" style={{ gridTemplateColumns: "2fr 1fr", gap: 20 }}>
    <div className="card card-pad">
      <div className="row between" style={{ marginBottom: 14 }}>
        <div><div style={{ fontSize: 12.5, color: "var(--fg-muted)" }}>Plan</div><div className="display" style={{ fontSize: 22, fontWeight: 600 }}>Growth · $39/mo</div></div>
        <button className="btn btn-outline btn-sm">Change plan</button>
      </div>
      <div className="hr" style={{ margin: "14px 0" }}/>
      <div className="grid grid-3" style={{ fontSize: 13 }}>
        <div><div style={{ fontSize: 11, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 600 }}>Minutes</div><div className="num" style={{ fontSize: 20, marginTop: 4 }}>580 / 1,000</div></div>
        <div><div style={{ fontSize: 11, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 600 }}>MTD</div><div className="num" style={{ fontSize: 20, marginTop: 4 }}>$39.00</div></div>
        <div><div style={{ fontSize: 11, color: "var(--fg-muted)", textTransform: "uppercase", letterSpacing: ".08em", fontWeight: 600 }}>Renews</div><div className="num" style={{ fontSize: 20, marginTop: 4 }}>Dec 14</div></div>
      </div>
    </div>
    <div className="card card-pad">
      <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 8 }}>Recent invoices</div>
      <div className="stack gap-2" style={{ fontSize: 13 }}>
        <div className="row between"><span className="mono">INV-2026-11</span><span className="mono">$39.00</span></div>
        <div className="row between"><span className="mono">INV-2026-10</span><span className="mono">$39.00</span></div>
        <div className="row between"><span className="mono">INV-2026-09</span><span className="mono">$41.20</span></div>
      </div>
    </div>
  </div>
);

const TDTechnical = () => (
  <div className="stack gap-4">
    <div className="card card-pad">
      <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 10 }}>Identifiers</div>
      <div className="stack gap-2" style={{ fontSize: 13 }}>
        <div className="row between"><span style={{ color: "var(--fg-muted)" }}>Tenant ID</span><span className="mono">tenant_01HGHRQ</span></div>
        <div className="row between"><span style={{ color: "var(--fg-muted)" }}>Region</span><span>eu-west-1</span></div>
        <div className="row between"><span style={{ color: "var(--fg-muted)" }}>Livekit room</span><span className="mono">lk_acme_ks</span></div>
        <div className="row between"><span style={{ color: "var(--fg-muted)" }}>Webhook</span><span className="mono">https://api.acme.ke/mikaka</span></div>
      </div>
    </div>
    <div className="card card-pad">
      <div style={{ fontSize: 15, fontWeight: 500, marginBottom: 10 }}>Diagnostics</div>
      <div className="stack gap-2">
        {[["Trunk ping","142ms","up"],["TTS latency","380ms","up"],["STT latency","210ms","up"],["M-Pesa webhook","timeouts","degraded"]].map(([n, v, s], i) => (
          <div key={i} className="row between" style={{ padding: 10, background: "var(--bg-sunken)", borderRadius: 8 }}>
            <div className="row gap-2"><span className="live-dot" style={{ background: s === "up" ? "var(--mk-success)" : "var(--mk-warning)" }}/><span style={{ fontSize: 13.5 }}>{n}</span></div>
            <span className="mono" style={{ fontSize: 12, color: "var(--fg-muted)" }}>{v}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const TDAudit = () => (
  <div className="card">
    <table className="tbl">
      <thead><tr><th>When</th><th>Actor</th><th>Action</th></tr></thead>
      <tbody>
        {[["2m ago","system","call answered +254 722 ••• 341"],
          ["18m ago","ayo@acme.ke","updated playbook"],
          ["1h ago","ops@mikaka.io","whitelisted trunk IP"],
          ["yesterday","ayo@acme.ke","invited joyce@acme.ke"]].map((r,i) => (
          <tr key={i}><td style={{ color: "var(--fg-muted)" }}>{r[0]}</td><td className="mono" style={{ fontSize: 12 }}>{r[1]}</td><td>{r[2]}</td></tr>
        ))}
      </tbody>
    </table>
  </div>
);

Object.assign(window, { TDNumbers, TDRouting, TDCalls, TDBilling, TDTechnical, TDAudit });