/* Gaby · módulos — Pendientes, Agenda, Repositorios, Personal, Centro común.
   Cada pantalla la presenta Gaby: dice lo que resolvió, no lo que falta. */

const { doc } = window.GabyIcons;

/* Encabezado de módulo: eyebrow + título + lede de Gaby */
function ModuleHead({ eyebrow, title, lede }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: "var(--op-sp-2)" }}>
      <span className="cy-eyebrow">{eyebrow}</span>
      <h1 className="cy-section-title">{title}</h1>
      <p className="cy-serif cy-lede" style={{ fontSize: "1.1rem", color: "var(--cy-text-2)" }}>{lede}</p>
    </div>
  );
}

function Pendientes() {
  const { check } = window.GabyIcons;
  const items = window.useGabyStore((s) => s.pendientes);
  const toggle = (id) => {
    window.GabyStore.setState((s) => ({
      ...s,
      pendientes: s.pendientes.map((p) => p.id === id ? { ...p, hecho: !p.hecho } : p),
    }));
  };
  const pend = items.filter((i) => !i.hecho).length;
  return (
    <>
      <ModuleHead eyebrow="TU TRABAJO · PENDIENTES"
        title="Lo que te dejé para hoy"
        lede={`Ordené ${items.length} seguimientos por urgencia. Te quedan ${pend} abiertos — los dos de arriba valen la pena mirar hoy.`} />
      <div className="cy-listcard cy-rows">
        {items.map((p) => (
          <div key={p.id} className={"cy-row" + (p.hecho ? " cy-row--done" : "")} onClick={() => toggle(p.id)}>
            <span className={"cy-check" + (p.hecho ? " cy-check--on" : "")}>
              {p.hecho && <span style={{ color: "var(--cy-bg-0)", display: "grid" }}>{check({})}</span>}
            </span>
            <div>
              <div className="cy-pend__cliente">{p.cliente}</div>
              <div className="cy-pend__accion">{p.accion}</div>
            </div>
            <div className="cy-pend__right">
              <span className="cy-pend__monto">{p.monto}</span>
              <span className={"cy-pill" + (p.cuando === "Hoy" ? " cy-pill--hoy" : "")}>{p.cuando}</span>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function Agenda() {
  const agenda = window.useGabyStore((s) => s.agenda);
  return (
    <>
      <ModuleHead eyebrow="TU TRABAJO · AGENDA"
        title="Tu viernes, sin sorpresas"
        lede="Te dejé el día con aire entre reuniones. A las 17:00 cierras temprano — eso también lo bloqueé yo." />
      <div className="cy-listcard cy-rows">
        {agenda.map((a) => (
          <div key={a.id} className="cy-row" style={{ opacity: a.listo ? 0.62 : 1 }}>
            <div className="cy-agenda__time">
              <div className="cy-agenda__hora">{a.hora}</div>
              <div className="cy-agenda__dur">{a.dur}</div>
            </div>
            <span className={"cy-agenda__bar cy-agenda__bar--" + a.tono} />
            <div>
              <div className="cy-agenda__titulo">{a.titulo}</div>
              <div className="cy-agenda__lugar">{a.lugar}</div>
            </div>
            {a.listo && <span className="cy-pill" style={{ marginLeft: "auto" }}>Hecho</span>}
          </div>
        ))}
      </div>
    </>
  );
}

function Workshop() {
  const repos = window.useGabyStore((s) => s.repos);
  const estadoTone = (e) => ["Firmada", "Lista", "Vigente", "Publicada"].includes(e) ? "var(--cy-petrol)"
    : e === "Borrador" ? "var(--cy-faint)" : "var(--cy-orange)";
  const openItem = (r) => { if (r.url) window.open(r.url, "_blank", "noopener"); };
  return (
    <>
      <ModuleHead eyebrow="TU TRABAJO · WORKSHOP"
        title="Todo lo que armé para ti"
        lede="Documentos, tableros y propuestas que generé. Lo que está publicado abre con un toque." />
      <div className="cy-listcard cy-rows">
        {repos.map((r) => (
          <div key={r.id} className="cy-row" onClick={() => openItem(r)} style={{ cursor: r.url ? "pointer" : "default" }}>
            <span className="cy-repo__icon">{doc({})}</span>
            <div>
              <div className="cy-repo__name">{r.nombre}</div>
              <div className="cy-repo__meta">{r.tipo} · {r.fecha} · {r.peso}</div>
            </div>
            <span className="cy-pill" style={{ marginLeft: "auto", color: estadoTone(r.estado), borderColor: "transparent", background: "var(--cy-glass-2)" }}>
              {r.estado}
            </span>
          </div>
        ))}
      </div>
    </>
  );
}

function Personal() {
  const personal = window.useGabyStore((s) => s.personal);
  const items = personal.items;
  const toggle = (id) => {
    window.GabyStore.setState((s) => ({
      ...s,
      personal: { ...s.personal, items: s.personal.items.map((i) => i.id === id ? { ...i, on: !i.on } : i) },
    }));
  };
  return (
    <>
      <ModuleHead eyebrow="TU VIDA · PERSONAL"
        title="Tu tiempo también cuenta"
        lede={personal.nota} />
      <div className="cy-listcard cy-rows">
        {items.map((i) => (
          <div key={i.id} className="cy-row" onClick={() => toggle(i.id)}>
            <div>
              <div className="cy-pend__cliente" style={{ fontWeight: 600 }}>{i.label}</div>
              <div className="cy-pend__accion">{i.sub}</div>
            </div>
            <span className={"cy-toggle" + (i.on ? " cy-toggle--on" : "")} style={{ marginLeft: "auto" }} />
          </div>
        ))}
      </div>
    </>
  );
}

function Correo() {
  const { correo } = window.GABY_DATA;
  return (
    <>
      <ModuleHead eyebrow="EL RESTO · CORREO ELECTRÓNICO"
        title="Tu bandeja, ya ordenada"
        lede={correo.nota} />
      <div className="cy-listcard cy-rows">
        {correo.mensajes.map((m) => (
          <div key={m.id} className="cy-row cy-mail">
            <span className={"cy-mail__dot" + (m.sinLeer ? "" : " cy-mail__dot--read")} />
            <span className={"cy-av cy-av--" + m.tono} style={{ width: 40, height: 40, fontSize: 14 }}>{m.ini}</span>
            <div className="cy-mail__mid">
              <div className="cy-mail__top">
                <span className="cy-mail__de">{m.de}</span>
                <span className="cy-mail__time">{m.hora}</span>
              </div>
              <div className="cy-mail__asunto">{m.asunto}</div>
              <div className="cy-mail__snippet">{m.snippet}</div>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

function Seguimiento() {
  const { seguimiento } = window.GABY_DATA;
  const estadoColor = (tono) => tono === "orange" ? "var(--cy-orange)" : tono === "petrol" ? "var(--cy-petrol)" : "var(--cy-muted)";
  return (
    <>
      <ModuleHead eyebrow="EL EQUIPO · SEGUIMIENTO DE PROYECTOS"
        title="Seguimiento de proyectos"
        lede={seguimiento.nota} />
      <div className="cy-shared">
        <div className="cy-shared__avatars">
          {seguimiento.equipo.map((p, i) => (
            <span key={i} className={"cy-av cy-av--" + p.tono} style={{ width: 30, height: 30, fontSize: 12 }}>{p.ini}</span>
          ))}
        </div>
        <span className="cy-mono" style={{ fontSize: 10, color: "var(--cy-muted)" }}>
          Compartido con el equipo sjp · {seguimiento.equipo.length} personas
        </span>
      </div>
      <div className="cy-projlist">
        {seguimiento.proyectos.map((pr) => (
          <div key={pr.id} className="cy-listcard cy-proj">
            <div className="cy-proj__top">
              <span className={"cy-proj__accent cy-proj__accent--" + pr.tono} />
              <div style={{ minWidth: 0 }}>
                <div className="cy-proj__name">{pr.nombre}</div>
                <div className="cy-proj__meta">{pr.cliente} · {pr.etapa}</div>
              </div>
              <div className="cy-proj__people">
                {pr.quienes.map((q, i) => (
                  <span key={i} className="cy-av cy-av--petrol cy-proj__av">{q}</span>
                ))}
              </div>
              <span className="cy-pill" style={{ color: estadoColor(pr.tono), borderColor: "transparent" }}>{pr.estado}</span>
            </div>
            <div className="cy-proj__bar">
              <span className={"cy-proj__fill" + (pr.tono === "orange" ? " cy-proj__fill--orange" : "")} style={{ width: pr.progreso + "%" }} />
            </div>
            <div className="cy-proj__foot cy-mono">
              <span>{pr.progreso}% avanzado</span>
              <span>Actualizado {pr.act}</span>
            </div>
          </div>
        ))}
      </div>
    </>
  );
}

window.GabyModules = { Pendientes, Agenda, Workshop, Personal, Correo, Seguimiento };