/* ============================================================
   EOLODENT — Admin shell, login, dashboard, shared widgets
   ============================================================ */

const BRANCH_LABEL = { coyoacan: "Coyoacán", narvarte: "Narvarte" };
const STATUS_LABEL = { pendiente: "Pendiente", confirmada: "Confirmada", completada: "Completada", cancelada: "Cancelada" };

function fmtDate(iso, opts) {
  return new Date(iso).toLocaleDateString("es-MX", opts || { day: "2-digit", month: "short", year: "numeric" });
}
function fmtTime(iso) { return new Date(iso).toLocaleTimeString("es-MX", { hour: "2-digit", minute: "2-digit" }); }
function isSameDay(iso, ref) { const a = new Date(iso), b = ref || new Date(); return a.toDateString() === b.toDateString(); }

/* ---------- Status badge ---------- */
function Badge({ status }) {
  return <span className={`badge badge--${status}`}><span className="badge__dot"></span>{STATUS_LABEL[status] || status}</span>;
}

/* ---------- Modal ---------- */
function Modal({ title, onClose, children, wide }) {
  useEffect(() => {
    const on = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", on);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", on); document.body.style.overflow = ""; };
  }, []);
  return (
    <div className="modal-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className={`modal ${wide ? "modal--wide" : ""}`}>
        <div className="modal__head">
          <h3>{title}</h3>
          <button className="modal__close" onClick={onClose}><Icon name="x" size={20} /></button>
        </div>
        <div className="modal__body">{children}</div>
      </div>
    </div>
  );
}

/* ---------- Field ---------- */
function Field({ label, children, full }) {
  return <label className={`afield ${full ? "afield--full" : ""}`}><span>{label}</span>{children}</label>;
}

/* ---------- Confirm ---------- */
function useConfirm() {
  const [state, setState] = useState(null);
  const confirm = (msg, onYes) => setState({ msg, onYes });
  const node = state ? (
    <Modal title="Confirmar" onClose={() => setState(null)}>
      <p style={{ marginBottom: 24 }}>{state.msg}</p>
      <div className="modal__actions">
        <button className="btn btn--ghost btn--sm" onClick={() => setState(null)}>Cancelar</button>
        <button className="btn btn--sm" style={{ background: "#e0526a" }} onClick={() => { state.onYes(); setState(null); }}>Eliminar</button>
      </div>
    </Modal>
  ) : null;
  return [confirm, node];
}

/* ---------- Login ---------- */
function AdminLogin() {
  const store = useStore();
  const [email, setEmail] = useState("admin@eolodent.com");
  const [pass, setPass] = useState("admin");
  const [err, setErr] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    const u = store.login(email, pass);
    if (!u) setErr(true);
  };
  return (
    <div className="admin-login">
      <div className="admin-login__card">
        <Logo />
        <h1>Panel de administración</h1>
        <p className="muted">Accede para gestionar citas, pacientes y contenido.</p>
        <form onSubmit={submit}>
          <Field label="Correo"><input value={email} onChange={(e) => { setEmail(e.target.value); setErr(false); }} type="email" /></Field>
          <Field label="Contraseña"><input value={pass} onChange={(e) => { setPass(e.target.value); setErr(false); }} type="password" /></Field>
          {err ? <p className="admin-login__err">Credenciales incorrectas. Intenta de nuevo.</p> : null}
          <button className="btn btn--primary btn--block" type="submit">Entrar</button>
        </form>
        <div className="admin-login__hint">
          <strong>Demo:</strong> admin@eolodent.com / admin · recepcion@eolodent.com / recepcion
        </div>
        <a href="#/" onClick={(e) => { e.preventDefault(); navigate("#/"); }} className="link-arrow" style={{ marginTop: 18 }}><Icon name="arrow" size={15} style={{ transform: "rotate(180deg)" }} /> Volver al sitio</a>
      </div>
    </div>
  );
}

/* ---------- Shell ---------- */
function AdminShell({ active, children, branchFilter, setBranchFilter }) {
  const store = useStore();
  const session = store.session();
  const [mobileOpen, setMobileOpen] = useState(false);
  const nav = [
    ["", "Dashboard", "chart"],
    ["citas", "Citas", "calendar"],
    ["pacientes", "Pacientes", "user"],
    ["servicios", "Servicios", "tooth"],
    ["blog", "Blog", "edit"],
    ["sucursales", "Sucursales", "map"],
  ];
  const go = (sub) => (e) => { e.preventDefault(); navigate("#/admin" + (sub ? "/" + sub : "")); setMobileOpen(false); };
  return (
    <div className="admin">
      <aside className={`admin-side ${mobileOpen ? "open" : ""}`}>
        <div className="admin-side__top"><Logo /></div>
        <nav className="admin-nav">
          {nav.map(([sub, label, icon]) => (
            <a key={sub} href="#" onClick={go(sub)} className={active === sub ? "on" : ""}>
              <Icon name={icon} size={19} />{label}
            </a>
          ))}
        </nav>
        <div className="admin-side__foot">
          <a href="#/" onClick={(e) => { e.preventDefault(); navigate("#/"); }}><Icon name="arrow" size={18} style={{ transform: "rotate(180deg)" }} />Ver sitio público</a>
          <button onClick={() => store.logout()}><Icon name="logout" size={18} />Cerrar sesión</button>
        </div>
      </aside>
      <div className="admin-main">
        <header className="admin-top">
          <button className="admin-burger" onClick={() => setMobileOpen((o) => !o)}><Icon name="menu" size={22} /></button>
          <div className="admin-top__branch">
            <span>Sucursal:</span>
            <select value={branchFilter} onChange={(e) => setBranchFilter(e.target.value)}>
              <option value="all">Todas</option>
              <option value="coyoacan">Coyoacán</option>
              <option value="narvarte">Narvarte</option>
            </select>
          </div>
          <div className="admin-top__user">
            <div className="admin-top__avatar">{(session.name || "A").slice(0, 1)}</div>
            <div className="admin-top__id"><strong>{session.name}</strong><span>{session.role}</span></div>
          </div>
        </header>
        <div className="admin-content">{children}</div>
      </div>
    </div>
  );
}

/* ---------- Dashboard ---------- */
function StatCard({ icon, label, value, sub, tone }) {
  return (
    <div className={`stat-card stat-card--${tone || "navy"}`}>
      <div className="stat-card__icon"><Icon name={icon} size={22} /></div>
      <div className="stat-card__num">{value}</div>
      <div className="stat-card__label">{label}</div>
      {sub ? <div className="stat-card__sub">{sub}</div> : null}
    </div>
  );
}

function AdminDashboard({ branchFilter }) {
  const store = useStore();
  const all = store.get("appointments");
  const appts = branchFilter === "all" ? all : all.filter((a) => a.branch === branchFilter);
  const patients = store.get("patients");
  const today = new Date();
  const todays = appts.filter((a) => isSameDay(a.when)).sort((a, b) => new Date(a.when) - new Date(b.when));
  const pending = appts.filter((a) => a.status === "pendiente");
  const thisMonth = patients.filter((p) => { const d = new Date(p.created); return d.getMonth() === today.getMonth() && d.getFullYear() === today.getFullYear(); });
  const revenue = todays.reduce((s, a) => s + (a.price || 0), 0);

  // week chart
  const days = [];
  for (let i = 6; i >= 0; i--) { const d = new Date(); d.setDate(d.getDate() - i); days.push(d); }
  const counts = days.map((d) => appts.filter((a) => isSameDay(a.when, d)).length);
  const maxC = Math.max(1, ...counts);

  return (
    <div className="dash">
      <div className="page-title">
        <div><h1>Buen día 👋</h1><p className="muted">Resumen de {branchFilter === "all" ? "todas las sucursales" : BRANCH_LABEL[branchFilter]} · {fmtDate(today.toISOString(), { weekday: "long", day: "numeric", month: "long" })}</p></div>
        <button className="btn btn--primary btn--sm" onClick={() => navigate("#/admin/citas?new=1")}><Icon name="plus" size={16} />Nueva cita</button>
      </div>
      <div className="stat-grid">
        <StatCard icon="calendar" label="Citas de hoy" value={todays.length} sub={`${pending.length} pendientes`} tone="navy" />
        <StatCard icon="user" label="Nuevos pacientes" value={thisMonth.length} sub="este mes" tone="cyan" />
        <StatCard icon="clock" label="Citas pendientes" value={pending.length} sub="por confirmar" tone="amber" />
        <StatCard icon="money" label="Ingreso estimado hoy" value={money(revenue)} sub={`${todays.length} citas`} tone="green" />
      </div>
      <div className="dash-grid">
        <div className="dash-panel">
          <div className="dash-panel__head"><h3>Agenda de hoy</h3><a href="#" onClick={(e) => { e.preventDefault(); navigate("#/admin/citas"); }} className="link-arrow">Ver todas <Icon name="arrow" size={15} /></a></div>
          {todays.length === 0 ? <div className="empty">No hay citas para hoy.</div> : (
            <div className="dash-appts">
              {todays.map((a) => (
                <div key={a.id} className="dash-appt">
                  <div className="dash-appt__time">{fmtTime(a.when)}</div>
                  <div className="dash-appt__info"><strong>{a.patient}</strong><span>{a.service} · {BRANCH_LABEL[a.branch]}</span></div>
                  <Badge status={a.status} />
                </div>
              ))}
            </div>
          )}
        </div>
        <div className="dash-panel">
          <div className="dash-panel__head"><h3>Citas · últimos 7 días</h3></div>
          <div className="dash-chart">
            {days.map((d, i) => (
              <div key={i} className="dash-bar">
                <div className="dash-bar__track"><div className="dash-bar__fill" style={{ height: `${(counts[i] / maxC) * 100}%` }}><span>{counts[i] || ""}</span></div></div>
                <div className="dash-bar__label">{d.toLocaleDateString("es-MX", { weekday: "short" }).slice(0, 2)}</div>
              </div>
            ))}
          </div>
          <div className="dash-panel__head" style={{ marginTop: 28 }}><h3>Pacientes recientes</h3><a href="#" onClick={(e) => { e.preventDefault(); navigate("#/admin/pacientes"); }} className="link-arrow">Ver CRM <Icon name="arrow" size={15} /></a></div>
          <div className="dash-patients">
            {patients.slice(0, 4).map((p) => (
              <div key={p.id} className="dash-patient">
                <div className="dash-patient__av">{p.name.slice(0, 1)}</div>
                <div><strong>{p.name}</strong><span>{p.phone} · {BRANCH_LABEL[p.branch]}</span></div>
                <span className={`pill pill--${p.status}`}>{p.status}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BRANCH_LABEL, STATUS_LABEL, fmtDate, fmtTime, isSameDay, Badge, Modal, Field, useConfirm, AdminLogin, AdminShell, AdminDashboard, StatCard });