// wh-actividad-section.jsx - extracted ActividadSection

(() => {

const { useState } = React;
const { Icon, Avatar, Badge, Modal, EmptyState, SecHead, JobStatusBadge } = window;

function ActividadSection({ jobs = [] }) {
  const [detail, setDetail] = useState(null);

  const SM = {
    done: { label: 'Completado', color: 'green', cls: 'ok' },
    running: { label: 'En progreso', color: 'yellow', cls: 'run' },
    failed: { label: 'Fallido', color: 'red', cls: 'fail' },
  };

  const TM = {
    'send-message': 'Envio de mensaje',
    'add-participants': 'Alta de participantes',
    send_message: 'Envio de mensaje',
    add_participants: 'Alta de participantes',
  };

  const fmt = (iso) => new Date(iso).toLocaleString('es', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' });
  const listName = (job) => job.meta?.groupListName || job.listName || '-';
  const jobMsg = (job) => job.meta?.message || job.message || null;

  const MIME_LABELS = {
    'image/jpeg': 'Imagen JPEG',
    'image/png': 'Imagen PNG',
    'image/gif': 'Imagen GIF',
    'image/webp': 'Imagen WebP',
    'application/pdf': 'PDF',
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'Word (DOCX)',
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'Excel (XLSX)',
  };
  const fmtMime = (mime) => MIME_LABELS[mime] || 'Archivo adjunto';
  const fmtSize = (bytes) => {
    if (!bytes) return '';
    if (bytes < 1024) return `${bytes} B`;
    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  };

  return (
    <div>
      <SecHead eyebrow="Actividad" title="Historial de Jobs" actions={<Badge color="gray">{jobs.length} jobs</Badge>} />

      <div className="split-2" style={{ alignItems: 'start' }}>
        <div className="card">
          <div className="card-head"><div className="card-title">Timeline</div></div>
          <div className="card-body">
            {jobs.length === 0
              ? <EmptyState icon="activity" title="Sin actividad" sub="Los envios y altas aparecen aqui" />
              : jobs.map((job) => {
                const sm = SM[job.status] || SM.failed;
                return (
                  <div key={job.id} className={`tl-entry ${sm.cls}`}>
                    <div className="flex-r" style={{ marginBottom: 5 }}>
                      <div className="job-meta" style={{ flex: 1 }}>
                        <div className="job-title">{TM[job.type] || job.type}</div>
                        <div className="t-muted t-sm">{listName(job)} · {fmt(job.startedAt)}</div>
                      </div>
                      <JobStatusBadge statusMap={SM} status={job.status} />
                    </div>
                    {job.error && <div className="job-error">{job.error}</div>}
                    <div className="flex-r" style={{ gap: 8 }}>
                      <span className="t-sm t-muted">{job.logs.length} grupos procesados</span>
                      {job.meta?.hasAttachment && (
                        <span className="flex-r t-sm t-muted" style={{ gap: 4 }}>
                          <Icon name="paperclip" size={12} />
                          {fmtMime(job.meta.attachmentMimetype)}
                        </span>
                      )}
                      <button className="btn btn-ghost btn-sm" onClick={() => setDetail(job)}>
                        <Icon name="eye" size={12} /> Ver
                      </button>
                    </div>
                  </div>
                );
              })}
          </div>
        </div>

        <div className="flex-c" style={{ gap: 12 }}>
          {Object.entries(SM).map(([k, sm]) => (
            <div key={k} className="stat-card activity-stat-card">
              <div className="activity-stat-copy">
                <div className="stat-val" style={{ fontSize: 24 }}>{jobs.filter((j) => j.status === k).length}</div>
                <div className="stat-lbl">{sm.label}</div>
              </div>
              <div className="activity-stat-badge">
                <JobStatusBadge statusMap={SM} status={k} />
              </div>
            </div>
          ))}
        </div>
      </div>

      <Modal open={!!detail} onClose={() => setDetail(null)} title={detail ? (TM[detail.type] || detail.type) : ''} subtitle="Detalle del job">
        {detail && (
          <div className="stack">
            <div className="job-detail-row">
              <span className="job-detail-label">Estado</span>
              <JobStatusBadge statusMap={SM} status={detail.status} />
            </div>
            <div className="job-detail-row">
              <span className="job-detail-label">Lista</span>
              <span className="job-detail-value job-detail-strong">{listName(detail)}</span>
            </div>
            <div className="job-detail-row">
              <span className="job-detail-label">Inicio</span>
              <span className="job-detail-value">{new Date(detail.startedAt).toLocaleString('es')}</span>
            </div>
            {detail.finishedAt && (
              <div className="job-detail-row">
                <span className="job-detail-label">Fin</span>
                <span className="job-detail-value">{new Date(detail.finishedAt).toLocaleString('es')}</span>
              </div>
            )}
            {jobMsg(detail) && (
              <div>
                <div className="field-lbl" style={{ marginBottom: 6 }}>Mensaje enviado</div>
                <div className="bubble job-detail-bubble">
                  {jobMsg(detail)}
                  <span className="bubble-time">{new Date(detail.startedAt).toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' })}</span>
                </div>
              </div>
            )}
            {detail.meta?.hasAttachment && (
              <div className="job-detail-row">
                <span className="job-detail-label">Adjunto</span>
                <span className="job-detail-value flex-r" style={{ gap: 6 }}>
                  <Icon name="paperclip" size={14} />
                  <span>
                    {fmtMime(detail.meta.attachmentMimetype)}
                    {detail.meta.attachmentSize
                      ? <span className="t-muted"> · {fmtSize(detail.meta.attachmentSize)}</span>
                      : null}
                  </span>
                </span>
              </div>
            )}
            {detail.meta?.contacts?.length > 0 && (
              <div>
                <div className="field-lbl" style={{ marginBottom: 6 }}>Contactos agregados</div>
                <div className="list-col">
                  {detail.meta.contacts.map((c) => (
                    <div key={c.id} className="litem">
                      <Avatar name={c.name} size="sm" />
                      <div className="litem-main">
                        <div className="litem-name">{c.name}</div>
                        <div className="litem-sub">{c.phone}</div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            )}
            <div>
              <div className="field-lbl" style={{ marginBottom: 8 }}>Resultados ({detail.logs.length})</div>
              <div className="list-col job-detail-results">
                {detail.logs.length === 0
                  ? <div className="t-muted t-sm">Sin resultados aun</div>
                  : detail.logs.map((l, i) => (
                    <div key={i} className="litem job-detail-result">
                      <span className={`dot ${l.ok ? 'dot-green' : 'dot-red'}`} />
                      <div className="litem-main">
                        <div className="litem-name">{l.groupName || l.group || l.groupId}</div>
                        {!l.ok && <div className="job-detail-result-error">{l.error}</div>}
                      </div>
                      <div className="job-detail-result-badge">
                        <Badge color={l.ok ? 'green' : 'red'}>{l.ok ? 'OK' : 'Error'}</Badge>
                      </div>
                    </div>
                  ))}
              </div>
            </div>
          </div>
        )}
      </Modal>
    </div>
  );
}

Object.assign(window, { ActividadSection });

})();