// Overview view: KPIs, Project cards, Urgentes, Sprint Summary

const KpiCard = ({ label, value, desc, color, icon, trend }) => (
  <div className="kpi-card" style={{ "--kpi-color": color }}>
    {trend && <div className="kpi-trend">{trend}</div>}
    <div className="kpi-label">
      <Icon name={icon} size={12} />
      <span>{label}</span>
    </div>
    <div className="kpi-value">{value}</div>
    <div className="kpi-desc">{desc}</div>
  </div>
);

const usIcon = (status) => {
  if (status === "completado") return { name: "check", color: "var(--verde)" };
  if (status === "en-progreso") return { name: "inProgress", color: "var(--azul-info)" };
  if (status === "planeado")    return { name: "clipboard", color: "var(--purpura)" };
  if (status === "on-hold")     return { name: "pause", color: "var(--text-2)" };
  if (status === "pendiente")   return { name: "inProgress", color: "var(--ambar)" };
  return { name: "clipboard", color: "var(--rojo-suave)" };
};

const ProjectCard = ({ project, onOpen }) => {
  const pct = window.computeProjectPct(project);
  // Pick relevant US: 1 in-progress + last 2 completed
  const flat = (project.epics || []).flatMap((e) => e.userStories || []);
  const inProg = flat.filter((u) => u.status === "en-progreso");
  const planeado = flat.filter((u) => u.status === "planeado");
  const onhold = flat.filter((u) => u.status === "on-hold");
  const done = flat.filter((u) => u.status === "completado").slice(-2);
  const display = [...inProg, ...planeado, ...onhold, ...done].slice(0, 3);

  return (
    <div className="project-card" style={{ "--proj-color": project.color }} onClick={onOpen}>
      <div className="project-head">
        <div>
          <div className="project-title-row">
            <span className="project-color-sq" />
            <span className="project-name">{project.name}</span>
            <TipoTag tipo={project.tipo} />
            <StatusBadge status={project.status} />
          </div>
          <div className="project-area">{project.area}</div>
        </div>
        <div className="project-pct">{pct}%</div>
      </div>
      <div className="progress-track">
        <div className="progress-fill" style={{ width: pct + "%" }} />
      </div>
      <div className="us-list">
        {display.map((u) => {
          const ic = usIcon(u.status);
          return (
            <div key={u.id} className={"us-item " + (u.status === "completado" ? "done" : "")}>
              <span className="us-icon" style={{ color: ic.color }}>
                <Icon name={ic.name} size={12} />
              </span>
              <span className="us-name">{u.name}</span>
              {u.deadline && u.status !== "completado" && (
                <span className="us-due">⚡ {window.fmtShortDate(u.deadline)}</span>
              )}
            </div>
          );
        })}
        {display.length === 0 && (
          <div className="us-item"><span className="us-name" style={{ color: "var(--text-2)", fontStyle: "italic" }}>Sin actividades aún</span></div>
        )}
      </div>
    </div>
  );
};

const OverviewView = ({ projects, inbox, onOpenProject }) => {
  const allUs = window.allUserStories(projects);
  const inProg  = allUs.filter((u) => u.status === "en-progreso");
  const done    = allUs.filter((u) => u.status === "completado");
  const backlog = allUs.filter((u) => u.status === "backlog");
  const planeado= allUs.filter((u) => u.status === "planeado");
  const total   = allUs.length;

  const activeProj = projects.filter((p) => p.status !== "on-hold").length;
  const onHoldProj = projects.length - activeProj;

  // Urgent list: in-progress sorted by deadline ASC, missing deadlines at bottom
  const urgent = [...inProg].sort((a, b) => {
    if (a.deadline && !b.deadline) return -1;
    if (!a.deadline && b.deadline) return 1;
    if (a.deadline && b.deadline) return a.deadline.localeCompare(b.deadline);
    return 0;
  });

  const todayIso = window.TZ_TODAY_ISO;
  const isUrgent = (iso) => {
    if (!iso) return false;
    const d = new Date(iso + "T00:00:00");
    const diff = (d - window.TZ_TODAY) / 86400000;
    return diff >= -1 && diff <= 4; // Due soon (next 4 days) or just passed (yesterday)
  };

  return (
    <>
      <div className="view-header">
        <div>
          <div className="view-title">Overview</div>
          <div className="view-sub">Salud global del ecosistema IA · 6 proyectos · Sprint 19</div>
        </div>
      </div>

      <div className="kpi-grid">
        <KpiCard label="Proyectos" value={projects.length}
          desc={`${activeProj} activos · ${onHoldProj} on hold`}
          color="var(--azul-info)" icon="layers" />
        <KpiCard label="US En Progreso" value={inProg.length}
          desc="Actualmente en ejecución"
          color="var(--verde)" icon="inProgress" trend="↑ Sprint" />
        <KpiCard label="US Completadas" value={done.length}
          desc={`De ${total} totales (${Math.round((done.length/total)*100)}%)`}
          color="var(--ambar)" icon="check" />
        <KpiCard label="Inbox" value={inbox.length}
          desc="Items pendientes de procesar"
          color="var(--rojo-suave)" icon="inbox" />
      </div>

      <div className="section-row">
        {projects.map((p) => (
          <ProjectCard key={p.id} project={p} onOpen={() => onOpenProject(p.id)} />
        ))}
      </div>

      <div className="two-col">
        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">
              <span className="ic-circle"><Icon name="flame" size={13} /></span>
              Urgente esta semana
            </div>
            <div className="panel-sub">{urgent.length} en progreso</div>
          </div>
          <div className="panel-body">
            {urgent.map((u) => (
              <div className="urgent-item" key={u.id} style={{ "--proj-color": u.projectColor }}>
                <span className="u-dot" />
                <div>
                  <div className="u-name">{u.name}</div>
                  <div className="u-proj">{u.projectName}</div>
                </div>
                {u.deadline ? (
                  <span className={"u-due-pill " + (isUrgent(u.deadline) ? "warn" : "")}>
                    ⚡ {window.fmtShortDate(u.deadline)}
                  </span>
                ) : <span style={{width:1}} />}
                <StatusBadge status={u.status} />
              </div>
            ))}
            {urgent.length === 0 && (
              <div style={{ padding: 30, textAlign: "center", color: "var(--text-2)" }}>
                Nada urgente esta semana · respira 🌿
              </div>
            )}
          </div>
        </div>

        <div className="panel">
          <div className="panel-head">
            <div className="panel-title">
              <span className="ic-circle" style={{ background: "rgba(96,165,250,.10)", color: "var(--azul-info)" }}>
                <Icon name="activity" size={13} />
              </span>
              Sprint Summary
            </div>
            <div className="panel-sub">SPRINT 19</div>
          </div>
          <div className="panel-body">
            <div className="sprint-stat"><span className="ss-label">En progreso</span><span className="ss-val" style={{ "--ss-color": "var(--azul-info)" }}>{inProg.length}</span></div>
            <div className="sprint-stat"><span className="ss-label">Completadas</span><span className="ss-val" style={{ "--ss-color": "var(--verde)" }}>{done.length}</span></div>
            <div className="sprint-stat"><span className="ss-label">Backlog</span><span className="ss-val" style={{ "--ss-color": "var(--rojo-suave)" }}>{backlog.length}</span></div>
            <div className="sprint-stat"><span className="ss-label">Listas para asignar</span><span className="ss-val" style={{ "--ss-color": "var(--purpura)" }}>{planeado.length}</span></div>
            <div className="sprint-stat"><span className="ss-label">Inbox</span><span className="ss-val" style={{ "--ss-color": "var(--ambar)" }}>{inbox.length}</span></div>
          </div>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { OverviewView });