/* ============================================================
   ONLYCLEAN — Súper administrador (app/admin_super.jsx)
   Dashboard global · CRUD de coaches · Contenido fijo global
   ============================================================ */

function SuperAdminApp({ onLogout }) {
  const [tab, setTab] = useState("dashboard");
  const [unread, setUnread] = useState(0);
  const [recUnread, setRecUnread] = useState(0);
  const refreshUnread = () => {
    window.DB.listFeedback().then((fb) => setUnread(fb.filter((f) => !f.read).length));
    window.DB.listCompRecords().then((rs) => setRecUnread(rs.filter((r) => !r.read && !r.hidden).length));
  };
  useEffect(() => { refreshUnread(); }, [tab]);
  const nav = [
    { id: "dashboard", label: "Dashboard", ic: "grid" },
    { id: "coaches", label: "Coaches", ic: "clients" },
    { id: "clients", label: "Clientes", ic: "clients" },
    { id: "routines", label: "Rutinas", ic: "routine" },
    { id: "feedback", label: "Feedback", ic: "chat" },
    { id: "records", label: "Registros", ic: "clock" },
    { id: "content", label: "Contenido fijo", ic: "content" },
    { id: "profile", label: "Mi perfil", ic: "user" },
  ];
  return (
    <div className="admin">
      <div className="admin-bar">
        <div className="brand" style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <img src="assets/logo-mark.svg" alt="" style={{ height: 20, width: "auto" }} />
          <span>ONLYCLEAN<small>Súper administrador</small></span>
        </div>
        <button className="back-pill" onClick={onLogout}><Icon name="logout" style={{ width: 15, height: 15 }} /> Salir</button>
      </div>
      <div className="admin-wrap">
        <nav className="admin-nav">
          {nav.map((n) => (
            <button key={n.id} className={tab === n.id ? "on" : ""} onClick={() => setTab(n.id)}>
              <Icon name={n.ic} /> {n.label}
              {n.id === "feedback" && unread > 0 && <span className="nav-badge">{unread}</span>}
              {n.id === "records" && recUnread > 0 && <span className="nav-badge">{recUnread}</span>}
            </button>
          ))}
        </nav>
        <main className="admin-main">
          {tab === "dashboard" && <SuperDashboard goTo={setTab} />}
          {tab === "coaches" && <CoachesPanel />}
          {tab === "clients" && <ClientsPanel />}
          {tab === "routines" && <RoutinesPanel />}
          {tab === "feedback" && <FeedbackPanel onChange={refreshUnread} />}
          {tab === "records" && <RecordsPanel onChange={refreshUnread} coachId={undefined} canDelete={true} />}
          {tab === "content" && <ContentPanel />}
          {tab === "profile" && <SuperProfilePanel onSaved={() => {}} />}
        </main>
      </div>
    </div>
  );
}

/* ---------------- Mi perfil (súper admin) ---------------- */
function SuperProfilePanel() {
  const [p, setP] = useState(null);
  const [show, setShow] = useState(false);
  const toast = useToast();
  useEffect(() => { window.DB.getSuperadmin().then(setP); }, []);
  if (!p) return <div className="panel">Cargando…</div>;
  const set = (k, v) => setP((x) => ({ ...x, [k]: v }));

  async function save() {
    if (!p.name.trim() || !p.email.trim()) { toast("Nombre y correo son obligatorios"); return; }
    if (!p.password.trim()) { toast("La contraseña no puede quedar vacía"); return; }
    await window.DB.saveSuperadmin(p);
    toast("Perfil actualizado");
  }

  return (
    <div>
      <div className="panel coach-hero">
        <span className="coach-hero-avatar">{p.photo ? <img src={p.photo} alt={p.name} /> : <Icon name="user" style={{ width: 30, height: 30, color: "#b3b3b3" }} />}</span>
        <div className="coach-hero-info">
          <div className="coach-hero-hi">Mi perfil</div>
          <div className="coach-hero-name">{p.name}</div>
          <div className="coach-hero-sub">{p.email}</div>
        </div>
      </div>
      <div className="panel">
        <div className="row-between" style={{ marginBottom: 14 }}>
          <div><h3>Datos de acceso</h3><div className="sub" style={{ margin: 0 }}>Actualiza tu nombre, correo, contraseña y foto.</div></div>
          <Pill onClick={save}><Icon name="check" style={{ width: 16, height: 16 }} /> Guardar</Pill>
        </div>
        <PhotoUpload value={p.photo} onChange={(v) => set("photo", v)} label="Foto de perfil" />
        <div className="grid2">
          <div className="field"><label>Nombre de usuario</label><input className="input" value={p.name} onChange={(e) => set("name", e.target.value)} /></div>
          <div className="field"><label>Correo</label><input className="input" type="email" value={p.email} onChange={(e) => set("email", e.target.value)} /></div>
        </div>
        <div className="field"><label>Contraseña</label>
          <div style={{ display: "flex", gap: 8 }}>
            <input className="input" type={show ? "text" : "password"} value={p.password} onChange={(e) => set("password", e.target.value)} />
            <button type="button" className="pill ghost sm" onClick={() => setShow((s) => !s)}>{show ? "Ocultar" : "Ver"}</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Global dashboard ---------------- */
function SuperDashboard({ goTo }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    Promise.all([window.DB.listCoaches(), window.DB.listClients(), window.DB.listRoutines(), window.DB.listFeedback(), window.DB.listCompRecords()])
      .then(([coaches, clients, routines, feedback, records]) => {
        const recVisible = records.filter((r) => !r.hidden);
        setData({
          coaches: coaches.length,
          coachesBlocked: coaches.filter((c) => c.blocked).length,
          clients: clients.length,
          clientsBlocked: clients.filter((c) => c.blocked).length,
          workouts: routines.filter((r) => r.intensity !== "recovery").length,
          recoveries: routines.filter((r) => r.intensity === "recovery").length,
          feedback: feedback.length,
          feedbackUnread: feedback.filter((f) => !f.read).length,
          records: recVisible.length,
          recordsUnread: recVisible.filter((r) => !r.read).length,
        });
      });
  }, []);
  if (!data) return <div className="panel">Cargando…</div>;

  const Metric = ({ icon, value, label, accent, sub, onClick }) => (
    <div className={`metric ${onClick ? "clickable" : ""}`} onClick={onClick}>
      <span className="metric-ic"><MetricIcon name={icon} /></span>
      <div className="metric-v">{value}</div>
      <div className="metric-l">{label}</div>
      {sub && <div className="metric-sub">{sub}</div>}
    </div>
  );

  return (
    <div>
      <div className="panel">
        <h3>Dashboard global</h3>
        <div className="sub" style={{ margin: 0 }}>Visión general de toda la plataforma ONLYCLEAN</div>
      </div>

      <div className="metrics-grid">
        <Metric icon="user" value={data.coaches} label="Coaches" accent="#2b2b2b" onClick={() => goTo("coaches")}
          sub={data.coachesBlocked > 0 ? <span><span className="dot-blocked"></span>{data.coachesBlocked} bloqueado(s)</span> : <span>Todos activos</span>} />
        <Metric icon="user" value={data.clients} label="Clientes totales" accent="var(--coral)" onClick={() => goTo("clients")}
          sub={<span><span className="dot-active"></span>{data.clients - data.clientsBlocked} activos · <span className="dot-blocked"></span>{data.clientsBlocked} bloqueados</span>} />
        <Metric icon="chat" value={data.feedback} label="Feedback recibido" accent="#2fa66a" onClick={() => goTo("feedback")}
          sub={data.feedbackUnread > 0 ? <span><span className="dot-blocked"></span>{data.feedbackUnread} sin leer</span> : <span>Todo al día</span>} />
        <Metric icon="clock" value={data.records} label="Registros de competencia" accent="#5b6b7a" onClick={() => goTo("records")}
          sub={data.recordsUnread > 0 ? <span><span className="dot-blocked"></span>{data.recordsUnread} sin leer</span> : <span>Todo al día</span>} />
        <Metric icon="dumbbell" value={data.workouts} label="Rutinas (biblioteca)" accent="#5b6b7a" onClick={() => goTo("routines")} />
        <Metric icon="snowflake" value={data.recoveries} label="Tipos de recuperación" accent="#8b97a4" onClick={() => goTo("routines")} />
      </div>

      <div className="panel">
        <h3 style={{ fontSize: 16 }}>Accesos directos</h3>
        <div className="sub">Gestiona la plataforma sin salir del resumen.</div>
        <div className="quick-actions">
          <button className="quick-btn" onClick={() => goTo("coaches")}><span className="metric-ic"><Icon name="plus" style={{ width: 18, height: 18 }} /></span>Nuevo coach</button>
          <button className="quick-btn" onClick={() => goTo("content")}><span className="metric-ic"><Icon name="book" style={{ width: 18, height: 18 }} /></span>Editar contenido fijo</button>
        </div>
      </div>
    </div>
  );
}

/* ---------------- Coaches CRUD ---------------- */
function CoachesPanel() {
  const [coaches, setCoaches] = useState(null);
  const [counts, setCounts] = useState({});
  const [editing, setEditing] = useState(null);
  const [confirm, setConfirm] = useState(null);
  const toast = useToast();

  const load = () => Promise.all([window.DB.listCoaches(), window.DB.listClients()]).then(([cs, cl]) => {
    setCoaches(cs);
    const m = {}; cl.forEach((c) => { m[c.coachId] = (m[c.coachId] || 0) + 1; }); setCounts(m);
  });
  useEffect(() => { load(); }, []);

  if (editing) return <CoachEditor coach={editing === "new" ? null : editing} onClose={() => { setEditing(null); load(); }} />;
  if (!coaches) return <div className="panel">Cargando…</div>;

  return (
    <div className="panel">
      <div className="row-between" style={{ marginBottom: 16 }}>
        <div><h3>Coaches</h3><div className="sub" style={{ margin: 0 }}>{coaches.length} coach(es) · cada uno gestiona sus propios clientes</div></div>
        <Pill onClick={() => setEditing("new")}><Icon name="plus" style={{ width: 16, height: 16 }} /> Nuevo coach</Pill>
      </div>
      <div className="adm-list">
        {coaches.map((c) => (
          <div className="adm-list-item" key={c.id}>
            <span className="av">{c.photo ? <img src={c.photo} alt="" /> : <Icon name="user" style={{ width: 18, height: 18 }} />}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="nm">{c.name} {c.blocked && <span className="status-chip">Bloqueado</span>}</div>
              <div className="em">{c.email} · {counts[c.id] || 0} cliente(s)</div>
            </div>
            <button className="icon-btn" title="Editar" onClick={() => setEditing(c)}><Icon name="edit" style={{ width: 16, height: 16 }} /></button>
            <button className="icon-btn danger" title="Eliminar" onClick={() => setConfirm(c)}><Icon name="trash" style={{ width: 16, height: 16 }} /></button>
          </div>
        ))}
        {coaches.length === 0 && <p className="sub">Aún no hay coaches. Crea el primero.</p>}
      </div>
      <Confirm open={!!confirm} text={`¿Eliminar a ${confirm?.name}? Se eliminarán también sus clientes y el feedback de ellos.`}
        onNo={() => setConfirm(null)}
        onYes={async () => { await window.DB.deleteCoach(confirm.id); setConfirm(null); toast("Coach eliminado"); load(); }} />
    </div>
  );
}

function CoachEditor({ coach, onClose }) {
  const [c, setC] = useState(() => coach ? JSON.parse(JSON.stringify(coach)) : { name: "", email: "", password: "", phone: "", photo: "", instagram: "", whatsapp: "", blocked: false });
  const toast = useToast();
  const set = (k, v) => setC((p) => ({ ...p, [k]: v }));

  async function save() {
    if (!c.name.trim() || !c.email.trim()) { toast("Nombre y correo son obligatorios"); return; }
    await window.DB.saveCoach(c);
    toast("Coach guardado");
    onClose();
  }

  return (
    <div className="panel">
      <div className="row-between" style={{ marginBottom: 16 }}>
        <BackPill onClick={onClose} label="Volver a coaches" />
        <Pill onClick={save}><Icon name="check" style={{ width: 16, height: 16 }} /> Guardar</Pill>
      </div>
      <h3>{coach ? "Editar coach" : "Nuevo coach"}</h3>
      <div className="sub">Datos de acceso y contacto del coach.</div>

      <div className="grid2">
        <div className="field"><label>Nombre</label><input className="input" value={c.name} onChange={(e) => set("name", e.target.value)} /></div>
        <div className="field"><label>Correo (usuario)</label><input className="input" type="email" value={c.email} onChange={(e) => set("email", e.target.value)} /></div>
        <div className="field"><label>Contraseña</label><input className="input" value={c.password} onChange={(e) => set("password", e.target.value)} /></div>
        <div className="field"><label>Teléfono</label><input className="input" value={c.phone} onChange={(e) => set("phone", e.target.value)} placeholder="+52 55 0000 0000" /></div>
        <PhotoUpload value={c.photo} onChange={(v) => set("photo", v)} label="Foto del coach" />
        <div className="field"><label>Instagram (URL)</label><input className="input" value={c.instagram} onChange={(e) => set("instagram", e.target.value)} placeholder="https://instagram.com/usuario" /></div>
        <div className="field"><label>WhatsApp (enlace o número)</label><input className="input" value={c.whatsapp || ""} onChange={(e) => set("whatsapp", e.target.value)} placeholder="https://wa.me/52551234... o +52 55 1234 5678" /></div>
      </div>

      <div className={`access-toggle ${c.blocked ? "off" : ""}`}>
        <div className="at-text">
          <div className="at-title">{c.blocked ? "Acceso bloqueado" : "Acceso activo"}</div>
          <div className="at-sub">{c.blocked ? "El coach no podrá entrar a su panel." : "El coach puede entrar y gestionar sus clientes."}</div>
        </div>
        <button type="button" className={`switch ${c.blocked ? "" : "on"}`} role="switch" aria-checked={!c.blocked} onClick={() => set("blocked", !c.blocked)}>
          <span className="knob"></span>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { SuperAdminApp });