// ChairShare — practitioner dashboard cluster (7–13)
// Stripe-density, but warm-luxe palette. Function-first, less editorial than customer flows.

// ── Shared shell: sidebar nav + topbar ──────────
const PracShell = ({ active, children, title, subtitle, action }) => {
  const items = [
    ["home", "Today", 7], ["calendar", "Calendar", 8], ["scissors", "Customers", 9],
    ["star", "Services", 10], ["clock", "Availability", 11], ["sparkle", "Discounts", 12],
    ["card", "Earnings", 13],
  ];
  return (
    <div className="cs" style={{ width: 1440, minHeight: 900, background: "var(--cs-cream)", display: "grid", gridTemplateColumns: "240px 1fr" }}>
      <aside style={{ borderRight: "1px solid var(--cs-line)", background: "var(--cs-bone)", padding: "22px 16px", display: "flex", flexDirection: "column", gap: 4, position: "sticky", top: 0, height: "100vh", maxHeight: "100vh" }}>
        <div style={{ padding: "6px 10px 18px" }}><Wordmark size={16} /></div>
        <div className="eyebrow" style={{ padding: "4px 10px", marginBottom: 4 }}>Workspace</div>
        {items.map(([icon, label, n]) => {
          const a = active === n;
          return (
            <button key={n} style={{
              display: "flex", alignItems: "center", gap: 10, padding: "9px 10px",
              borderRadius: "var(--cs-r)", border: "none", background: a ? "var(--cs-cream-2)" : "transparent",
              color: a ? "var(--cs-ink)" : "var(--cs-ink-2)", fontWeight: a ? 500 : 400,
              fontSize: 13, cursor: "pointer", textAlign: "left",
            }}>
              <Icon name={icon} size={15} />
              {label}
            </button>
          );
        })}
        <div style={{ marginTop: "auto", padding: "16px 6px 4px", borderTop: "1px solid var(--cs-line)", display: "flex", alignItems: "center", gap: 10 }}>
          <Avatar name="Amelia M" size={32} tone="rose" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 500 }}>Amelia M.</div>
            <div className="mono" style={{ fontSize: 10, color: "var(--cs-ink-3)", overflow: "hidden", textOverflow: "ellipsis" }}>amelia.cuts</div>
          </div>
        </div>
      </aside>
      <main style={{ padding: 0 }}>
        <header style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", padding: "26px 36px 18px", borderBottom: "1px solid var(--cs-line)", background: "var(--cs-cream)" }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 6 }}>{subtitle}</div>
            <h1 className="serif" style={{ fontSize: 34, margin: 0, fontWeight: 400, lineHeight: 1 }}>{title}</h1>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <button className="btn btn-ghost btn-sm" style={{ padding: 9, borderRadius: "var(--cs-r)" }}><Icon name="bell" size={15} /></button>
            {action}
          </div>
        </header>
        {children}
      </main>
    </div>
  );
};

// ── 7 · Today (home) ────────────────────────────
const PracHome = () => {
  const stats = [
    { l: "Today", v: "4", sub: "bookings", trend: "+1 vs yesterday" },
    { l: "Today's revenue", v: "$612", sub: "after fees", trend: "$58 saved discount" },
    { l: "This week", v: "19", sub: "bookings", trend: "+12% week-over-week" },
    { l: "Net to bank", v: "$2,840", sub: "this week", trend: "Payout Mon" },
  ];
  const schedule = [
    { time: "9:30", end: "10:30", customer: "Sophie L.", service: "Signature cut", status: "arrived", tone: "ok" },
    { time: "11:00", end: "14:00", customer: "Hannah G.", service: "Balayage & toner", status: "in chair", tone: "rose" },
    { time: "14:30", end: "15:30", customer: "Mei R.", service: "Root colour", status: "upcoming", tone: "default" },
    { time: "16:00", end: "17:00", customer: "Olivia P.", service: "Maintenance trim", status: "upcoming", tone: "default" },
  ];
  const activity = [
    { dot: "ok", t: "Sophie L. arrived", time: "9:32 am" },
    { dot: "ok", t: "Payment received · $288.00 from Hannah G.", time: "8:14 am" },
    { dot: "ok", t: "New booking · Mei R. for Mon May 12", time: "Yesterday 9:42 pm" },
    { dot: "warn", t: "Reschedule request · Lara K. for Wed", time: "Yesterday 6:01 pm" },
    { dot: "ok", t: "Stripe payout sent · $1,540 → ANZ ····2841", time: "Mon May 4" },
  ];

  return (
    <PracShell active={7} subtitle="Tuesday May 5" title="Good morning, Amelia."
      action={<button className="btn btn-primary btn-sm">+ New booking</button>}>
      <div style={{ padding: "26px 36px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginBottom: 24 }}>
          {stats.map(s => (
            <div key={s.l} className="card" style={{ padding: 20 }}>
              <div className="eyebrow" style={{ marginBottom: 10 }}>{s.l}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 6, marginBottom: 4 }}>
                <span className="serif" style={{ fontSize: 36, lineHeight: 1 }}>{s.v}</span>
                <span style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>{s.sub}</span>
              </div>
              <div style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>{s.trend}</div>
            </div>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 20 }}>
          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: "18px 22px", display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--cs-line)" }}>
              <h3 className="serif" style={{ fontSize: 20, margin: 0, fontWeight: 400 }}>Today's chair</h3>
              <span className="pill">4 bookings · $612</span>
            </div>
            <div>
              {schedule.map((s, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "78px 1fr auto", padding: "16px 22px", gap: 16, alignItems: "center", borderBottom: i < schedule.length - 1 ? "1px solid var(--cs-line)" : "none" }}>
                  <div>
                    <div className="serif" style={{ fontSize: 18 }}>{s.time}</div>
                    <div style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>→ {s.end}</div>
                  </div>
                  <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                    <Avatar name={s.customer} size={36} tone={s.tone === "rose" ? "rose" : "gold"} />
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 500 }}>{s.customer}</div>
                      <div style={{ fontSize: 12, color: "var(--cs-ink-3)" }}>{s.service}</div>
                    </div>
                  </div>
                  <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
                    {s.status === "arrived" && <span className="pill" style={{ background: "rgba(107,126,90,0.15)", color: "var(--cs-ok)", borderColor: "rgba(107,126,90,0.3)" }}><span className="dot dot-ok" /> arrived</span>}
                    {s.status === "in chair" && <span className="pill pill-rose">in chair</span>}
                    {s.status === "upcoming" && <button className="btn btn-ghost btn-sm">Mark arrived</button>}
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: "18px 22px", borderBottom: "1px solid var(--cs-line)" }}>
              <h3 className="serif" style={{ fontSize: 20, margin: 0, fontWeight: 400 }}>Activity</h3>
            </div>
            <div style={{ padding: "8px 22px 16px" }}>
              {activity.map((a, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", padding: "12px 0", borderBottom: i < activity.length - 1 ? "1px solid var(--cs-line)" : "none" }}>
                  <span className={"dot dot-" + a.dot} style={{ marginTop: 6 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13 }}>{a.t}</div>
                    <div style={{ fontSize: 11, color: "var(--cs-ink-3)", marginTop: 2 }}>{a.time}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </PracShell>
  );
};

// ── 8 · Calendar ────────────────────────────────
const PracCalendar = () => {
  const days = ["Mon 4", "Tue 5", "Wed 6", "Thu 7", "Fri 8", "Sat 9", "Sun 10"];
  const hours = ["9", "10", "11", "12", "1", "2", "3", "4", "5", "6"];
  const events = [
    { d: 0, start: 1, dur: 1, label: "Sophie · Cut", tone: "rose" },
    { d: 0, start: 4, dur: 1.5, label: "Olivia · Trim", tone: "default" },
    { d: 1, start: 0.5, dur: 1, label: "Sophie · Cut", tone: "rose" },
    { d: 1, start: 2, dur: 3, label: "Hannah · Balayage", tone: "gold" },
    { d: 1, start: 5.5, dur: 1, label: "Mei · Root colour", tone: "default" },
    { d: 1, start: 7, dur: 1, label: "Olivia · Trim", tone: "default" },
    { d: 2, start: 1, dur: 1.5, label: "Rachel · Bridal", tone: "rose" },
    { d: 3, start: 1, dur: 3, label: "Hannah · Balayage", tone: "gold" },
    { d: 4, start: 0.5, dur: 1, label: "Sophie · Cut", tone: "rose" },
    { d: 4, start: 3, dur: 1.5, label: "Lara · Root", tone: "default" },
    { d: 5, start: 1, dur: 1.5, label: "Bridal trial", tone: "rose" },
  ];
  const tones = {
    rose: { bg: "rgba(193,139,126,0.18)", bd: "var(--cs-rose-deep)" },
    gold: { bg: "rgba(168,137,71,0.16)", bd: "var(--cs-gold-deep)" },
    default: { bg: "rgba(42,33,26,0.06)", bd: "var(--cs-ink-2)" },
  };

  return (
    <PracShell active={8} subtitle="May 4 — May 10" title="Calendar"
      action={<>
        <div className="card" style={{ padding: 3, display: "inline-flex", borderRadius: 999 }}>
          {["Day", "Week", "Month"].map((v, i) => (
            <button key={v} className={"btn btn-sm"} style={{ padding: "6px 14px", background: i === 1 ? "var(--cs-ink)" : "transparent", color: i === 1 ? "var(--cs-cream)" : "var(--cs-ink-2)" }}>{v}</button>
          ))}
        </div>
        <button className="btn btn-ghost btn-sm" style={{ padding: 9 }}><Icon name="arrow_left" size={14} /></button>
        <button className="btn btn-ghost btn-sm" style={{ padding: 9 }}><Icon name="arrow_right" size={14} /></button>
      </>}>
      <div style={{ padding: "26px 36px" }}>
        <div className="card" style={{ overflow: "hidden", padding: 0 }}>
          {/* Day headers */}
          <div style={{ display: "grid", gridTemplateColumns: "60px repeat(7, 1fr)", borderBottom: "1px solid var(--cs-line)", background: "var(--cs-bone)" }}>
            <div></div>
            {days.map((d, i) => {
              const today = i === 1;
              return (
                <div key={d} style={{ padding: "12px 14px", borderLeft: "1px solid var(--cs-line)", display: "flex", flexDirection: "column", gap: 2 }}>
                  <span style={{ fontSize: 11, color: "var(--cs-ink-3)", letterSpacing: "0.04em", textTransform: "uppercase" }}>{d.split(" ")[0]}</span>
                  <span className="serif" style={{ fontSize: 22, color: today ? "var(--cs-gold-deep)" : "var(--cs-ink)" }}>{d.split(" ")[1]}</span>
                </div>
              );
            })}
          </div>
          {/* Grid */}
          <div style={{ display: "grid", gridTemplateColumns: "60px repeat(7, 1fr)", position: "relative" }}>
            {/* Time gutter */}
            <div>
              {hours.map((h, i) => (
                <div key={h} style={{ height: 56, borderBottom: "1px solid var(--cs-line)", padding: "6px 8px", textAlign: "right", fontSize: 11, color: "var(--cs-ink-3)", fontFamily: "var(--cs-mono)" }}>
                  {h}:00
                </div>
              ))}
            </div>
            {/* Day columns */}
            {days.map((d, di) => (
              <div key={d} style={{ position: "relative", borderLeft: "1px solid var(--cs-line)" }}>
                {hours.map((h, hi) => (
                  <div key={hi} style={{ height: 56, borderBottom: "1px solid var(--cs-line)", background: di === 0 ? "repeating-linear-gradient(135deg, transparent 0 8px, rgba(42,33,26,0.04) 8px 9px)" : (di === 6 ? "repeating-linear-gradient(135deg, transparent 0 8px, rgba(42,33,26,0.04) 8px 9px)" : "transparent") }}/>
                ))}
                {/* Events for this day */}
                {events.filter(e => e.d === di).map((e, i) => {
                  const t = tones[e.tone];
                  return (
                    <div key={i} style={{
                      position: "absolute", left: 4, right: 4,
                      top: 4 + e.start * 56, height: e.dur * 56 - 6,
                      background: t.bg, borderLeft: `3px solid ${t.bd}`,
                      borderRadius: 6, padding: "6px 8px", fontSize: 11,
                      fontWeight: 500, color: "var(--cs-ink)", overflow: "hidden",
                    }}>
                      {e.label}
                    </div>
                  );
                })}
                {/* "now" line on Tue */}
                {di === 1 && (
                  <div style={{ position: "absolute", left: 0, right: 0, top: 1.7 * 56, height: 0, borderTop: "1.5px solid var(--cs-rose-deep)", zIndex: 2 }}>
                    <span style={{ position: "absolute", left: -6, top: -4, width: 8, height: 8, borderRadius: 999, background: "var(--cs-rose-deep)" }}></span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
        <div style={{ display: "flex", gap: 18, marginTop: 16, fontSize: 12, color: "var(--cs-ink-3)" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, background: "rgba(193,139,126,0.18)", borderLeft: "3px solid var(--cs-rose-deep)" }}/> Cut</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, background: "rgba(168,137,71,0.16)", borderLeft: "3px solid var(--cs-gold-deep)" }}/> Colour</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 10, height: 10, background: "repeating-linear-gradient(135deg, transparent 0 4px, rgba(42,33,26,0.15) 4px 5px)" }}/> Closed</span>
        </div>
      </div>
    </PracShell>
  );
};

window.PracHome = PracHome;
window.PracCalendar = PracCalendar;
window.PracShell = PracShell;