// ChairShare — practitioner dashboard cluster part 2 (9-11)

// ── 9 · Customers ───────────────────────────────
const PracCustomers = () => {
  const customers = [
    { name: "Sophie Lambert", email: "sophie.l@gmail.com", visits: 14, last: "Today", spend: "$1,240", tone: "rose", note: "Prefers quiet appts. Allergic to PPD." },
    { name: "Hannah Geist", email: "hannah.g@me.com", visits: 8, last: "Today", spend: "$2,460", tone: "gold", note: "Lived-in blonde. Toner T18." },
    { name: "Mei Rodriguez", email: "mei.r@outlook.com", visits: 6, last: "Apr 22", spend: "$870", tone: "default" },
    { name: "Olivia Park", email: "ov.park@gmail.com", visits: 22, last: "Apr 18", spend: "$1,540", tone: "rose" },
    { name: "Rachel Voss", email: "rachel@vossstudio.co", visits: 3, last: "Apr 14", spend: "$540", tone: "gold" },
    { name: "Lara Khoury", email: "lara.k@hey.com", visits: 11, last: "Mar 30", spend: "$1,180", tone: "default" },
    { name: "Iris Tan", email: "iris@studio.co", visits: 1, last: "Mar 12", spend: "$95", tone: "rose" },
  ];
  return (
    <PracShell active={9} subtitle="98 total" title="Customers"
      action={<>
        <button className="btn btn-ghost btn-sm">Export CSV</button>
        <button className="btn btn-primary btn-sm">+ Add</button>
      </>}>
      <div style={{ padding: "26px 36px" }}>
        <div style={{ display: "flex", gap: 12, marginBottom: 18, alignItems: "center" }}>
          <div style={{ position: "relative", flex: 1, maxWidth: 380 }}>
            <Icon name="search" size={14} color="var(--cs-ink-3)" style={{ position: "absolute", left: 14, top: 14 }} />
            <input placeholder="Search by name, email, phone…" style={{ paddingLeft: 38 }} />
          </div>
          <div style={{ display: "flex", gap: 8 }}>
            {["All", "Recent", "Frequent", "Lapsed"].map((c, i) => (
              <span key={c} className={"chip " + (i === 0 ? "chip-active" : "")}>{c}</span>
            ))}
          </div>
        </div>

        <div className="card" style={{ padding: 0, overflow: "hidden" }}>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 90px 100px 100px 30px", padding: "12px 22px", background: "var(--cs-bone)", borderBottom: "1px solid var(--cs-line)", fontSize: 11, color: "var(--cs-ink-3)", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 500 }}>
            <span>Customer</span><span>Email</span><span>Visits</span><span>Last visit</span><span>Lifetime</span><span></span>
          </div>
          {customers.map((c, i) => (
            <div key={c.name} style={{ display: "grid", gridTemplateColumns: "2fr 1.5fr 90px 100px 100px 30px", padding: "14px 22px", alignItems: "center", borderBottom: i < customers.length - 1 ? "1px solid var(--cs-line)" : "none", fontSize: 13 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Avatar name={c.name} size={32} tone={c.tone} />
                <div>
                  <div style={{ fontWeight: 500 }}>{c.name}</div>
                  {c.note && <div style={{ fontSize: 11, color: "var(--cs-ink-3)", marginTop: 1 }}>{c.note}</div>}
                </div>
              </div>
              <span style={{ color: "var(--cs-ink-2)" }}>{c.email}</span>
              <span className="serif" style={{ fontSize: 16 }}>{c.visits}</span>
              <span style={{ color: "var(--cs-ink-3)" }}>{c.last}</span>
              <span className="serif" style={{ fontSize: 16 }}>{c.spend}</span>
              <Icon name="chevron_right" size={14} color="var(--cs-ink-3)" />
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, fontSize: 12, color: "var(--cs-ink-3)" }}>Showing 7 of 98 · <a className="u">Load more</a></div>
      </div>
    </PracShell>
  );
};

// ── 10 · Services ────────────────────────────────
const PracServices = () => {
  return (
    <PracShell active={10} subtitle="5 active services" title="Service menu"
      action={<button className="btn btn-primary btn-sm">+ Add service</button>}>
      <div style={{ padding: "26px 36px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24 }}>
        <div className="card" style={{ padding: 0 }}>
          {SERVICES.map((s, i) => (
            <div key={s.id} style={{ display: "grid", gridTemplateColumns: "20px 1fr 100px 80px 60px 30px", alignItems: "center", padding: "16px 20px", gap: 14, borderBottom: i < SERVICES.length - 1 ? "1px solid var(--cs-line)" : "none" }}>
              <Icon name="grip" size={14} color="var(--cs-ink-3)" />
              <div>
                <div className="serif" style={{ fontSize: 17, marginBottom: 3 }}>{s.name}</div>
                <div style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>{s.desc}</div>
              </div>
              <span className="mono" style={{ fontSize: 12, color: "var(--cs-ink-2)" }}>{s.duration} min</span>
              <span className="serif" style={{ fontSize: 18 }}>${s.price}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 28, height: 16, background: "var(--cs-gold)", borderRadius: 999, position: "relative" }}>
                  <span style={{ position: "absolute", right: 2, top: 2, width: 12, height: 12, borderRadius: 999, background: "var(--cs-bone)" }} />
                </span>
              </span>
              <Icon name="edit" size={14} color="var(--cs-ink-3)" />
            </div>
          ))}
        </div>

        {/* Edit drawer / preview */}
        <div className="card" style={{ padding: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Editing · Balayage & toner</div>
          <div className="field" style={{ marginBottom: 12 }}><label>Name</label><input defaultValue="Balayage & toner" /></div>
          <div className="field" style={{ marginBottom: 12 }}><label>Description</label><textarea rows="2" defaultValue="Hand-painted highlights, gloss, blow-dry." /></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 18 }}>
            <div className="field"><label>Duration (min)</label><input defaultValue="180" /></div>
            <div className="field"><label>Price ($)</label><input defaultValue="320" /></div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 10, padding: "14px 0", borderTop: "1px solid var(--cs-line)", borderBottom: "1px solid var(--cs-line)", marginBottom: 18 }}>
            {[["Deposit required", "20% holds the slot", true],["No-show fee", "$50 for cancels under 2 hrs", true],["Public on booking page", null, true]].map(([l, sub, on]) => (
              <div key={l} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 13 }}>
                <div><div>{l}</div>{sub && <div style={{ fontSize: 11, color: "var(--cs-ink-3)" }}>{sub}</div>}</div>
                <span style={{ width: 30, height: 18, background: on ? "var(--cs-gold)" : "var(--cs-ink-4)", borderRadius: 999, position: "relative" }}>
                  <span style={{ position: "absolute", right: on ? 2 : null, left: on ? null : 2, top: 2, width: 14, height: 14, borderRadius: 999, background: "var(--cs-bone)" }} />
                </span>
              </div>
            ))}
          </div>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <button className="btn btn-link" style={{ color: "var(--cs-err)" }}>Delete</button>
            <button className="btn btn-primary btn-sm">Save changes</button>
          </div>
        </div>
      </div>
    </PracShell>
  );
};

// ── 11 · Availability ───────────────────────────
const PracAvailability = () => {
  const days = [
    ["Mon", "Closed", null],
    ["Tue", "open", [["10:00", "18:00"]]],
    ["Wed", "open", [["10:00", "18:00"]]],
    ["Thu", "open", [["10:00", "13:00"], ["14:00", "20:00"]]],
    ["Fri", "open", [["09:00", "17:00"]]],
    ["Sat", "open", [["09:00", "15:00"]]],
    ["Sun", "Closed", null],
  ];
  return (
    <PracShell active={11} subtitle="Recurring weekly + one-off overrides" title="Availability"
      action={<button className="btn btn-primary btn-sm">+ Add override</button>}>
      <div style={{ padding: "0 36px", borderBottom: "1px solid var(--cs-line)", display: "flex", gap: 20 }}>
        {[["Weekly recurring", true], ["Date overrides", false]].map(([l, a]) => (
          <button key={l} style={{ padding: "14px 0", border: 0, background: "none", borderBottom: a ? "2px solid var(--cs-ink)" : "2px solid transparent", color: a ? "var(--cs-ink)" : "var(--cs-ink-3)", fontSize: 13, fontWeight: a ? 500 : 400, cursor: "pointer" }}>{l}</button>
        ))}
      </div>
      <div style={{ padding: "26px 36px", display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 24 }}>
        <div className="card" style={{ padding: 0 }}>
          {days.map(([d, status, ranges], i) => (
            <div key={d} style={{ display: "grid", gridTemplateColumns: "60px 80px 1fr 30px", alignItems: "center", padding: "18px 22px", gap: 18, borderBottom: i < days.length - 1 ? "1px solid var(--cs-line)" : "none" }}>
              <span className="serif" style={{ fontSize: 18 }}>{d}</span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: status === "open" ? "var(--cs-ok)" : "var(--cs-ink-3)" }}>
                <span className={"dot " + (status === "open" ? "dot-ok" : "")} style={status !== "open" ? { background: "var(--cs-ink-4)" } : {}} /> {status === "open" ? "Open" : "Closed"}
              </span>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {ranges?.map((r, j) => (
                  <div key={j} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "8px 12px", border: "1px solid var(--cs-line-2)", borderRadius: "var(--cs-r)", fontSize: 13, fontFamily: "var(--cs-mono)" }}>
                    <span>{r[0]}</span><span style={{ color: "var(--cs-ink-3)" }}>→</span><span>{r[1]}</span>
                  </div>
                ))}
                {status === "open" && <button className="btn btn-ghost btn-sm" style={{ padding: "8px 10px" }}><Icon name="plus" size={12} /></button>}
              </div>
              <Icon name="edit" size={14} color="var(--cs-ink-3)" />
            </div>
          ))}
        </div>

        <div>
          <div className="card" style={{ padding: 22, marginBottom: 16 }}>
            <div className="eyebrow" style={{ marginBottom: 12 }}>This week's snapshot</div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7,1fr)", gap: 4, marginBottom: 14 }}>
              {["M","T","W","T","F","S","S"].map((d, i) => (
                <div key={i} style={{ aspectRatio: "1", borderRadius: 6, background: i === 0 || i === 6 ? "repeating-linear-gradient(135deg,transparent 0 4px,rgba(42,33,26,0.1) 4px 5px)" : "var(--cs-gold-soft)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, color: i === 0 || i === 6 ? "var(--cs-ink-3)" : "var(--cs-gold-deep)", fontFamily: "var(--cs-serif)" }}>{d}</div>
              ))}
            </div>
            <div style={{ fontSize: 13, color: "var(--cs-ink-2)" }}>5 working days · <span className="serif" style={{ fontSize: 18 }}>40</span> available hours</div>
          </div>
          <div className="card" style={{ padding: 22, background: "rgba(168,137,71,0.08)", borderColor: "rgba(168,137,71,0.3)" }}>
            <div style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
              <Icon name="info" size={16} color="var(--cs-gold-deep)" />
              <div style={{ fontSize: 12, lineHeight: 1.55, color: "var(--cs-ink-2)" }}>
                Hours apply from <strong>next Monday</strong>. Existing bookings inside the new closed windows aren't affected — we'll flag conflicts before saving.
              </div>
            </div>
          </div>
        </div>
      </div>
    </PracShell>
  );
};

window.PracCustomers = PracCustomers;
window.PracServices = PracServices;
window.PracAvailability = PracAvailability;