// ─────────────────────────────────────────────────────
// MIS TAREAS — operario view (GUT-20 / GUT-8c).
// Backend: GET /api/tareas-trabajo filters by operario_id when non-admin.
// User can PATCH only `estado` on their own tareas.
// Mobile-first card list. Light mode only.
// ─────────────────────────────────────────────────────

const MT_ESTADOS = [
  { key: 'pendiente',   label: 'Pendiente',   cls: 'warn' },
  { key: 'en_progreso', label: 'En progreso', cls: 'info' },
  { key: 'completada',  label: 'Completada',  cls: 'ok'   },
  { key: 'cancelada',   label: 'Cancelada',   cls: ''     },
];
const MT_ESTADO_MAP = MT_ESTADOS.reduce((m, e) => (m[e.key] = e, m), {});

const mtFmtDate = (s) => {
  if (!s) return '—';
  try {
    const d = new Date(s);
    if (isNaN(d.getTime())) return s;
    return d.toLocaleString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
  } catch { return s; }
};

const MisTareasView = ({ onToast }) => {
  const [rows, setRows]       = React.useState([]);
  const [pedidos, setPedidos] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [busyId, setBusyId]   = React.useState(null);
  const [tab, setTab]         = React.useState('activas'); // 'activas' | 'todas'
  const [refreshKey, setRefresh] = React.useState(0);

  React.useEffect(() => {
    let alive = true;
    setLoading(true);
    API.get('/api/tareas-trabajo').then(data => {
      if (!alive) return;
      setRows(Array.isArray(data) ? data : []);
      setLoading(false);
    }).catch(err => {
      if (!alive) return;
      setLoading(false);
      onToast && onToast(err.message || 'Error al cargar tareas', true);
    });
    return () => { alive = false; };
  }, [refreshKey]);

  // Pedidos lookup is best-effort — non-admins may not have access to /api/compras.
  React.useEffect(() => {
    API.get('/api/compras')
      .then(rows => setPedidos(Array.isArray(rows) ? rows : []))
      .catch(() => setPedidos([]));
  }, []);

  const pedidoById = (id) => pedidos.find(p => p.id === id);

  const changeEstado = async (tarea, nuevoEstado) => {
    setBusyId(tarea.id);
    try {
      const updated = await API.patch(`/api/tareas-trabajo/${tarea.id}`, { estado: nuevoEstado });
      setRows(rs => rs.map(r => r.id === tarea.id ? { ...r, ...updated } : r));
      onToast && onToast(
        nuevoEstado === 'en_progreso' ? 'Tarea iniciada ✓'
        : nuevoEstado === 'completada' ? 'Tarea completada ✓'
        : 'Estado actualizado ✓'
      );
    } catch (err) {
      onToast && onToast(err.message || 'Error al actualizar', true);
    } finally {
      setBusyId(null);
    }
  };

  // Filter by tab
  const filtered = rows.filter(r => {
    if (tab === 'activas') return r.estado === 'pendiente' || r.estado === 'en_progreso';
    return true;
  });

  // Order: pendientes y en_progreso primero, luego por fecha_creacion desc
  const orderKey = { pendiente: 0, en_progreso: 1, completada: 2, cancelada: 3 };
  const sorted = [...filtered].sort((a, b) => {
    const da = orderKey[a.estado] ?? 9;
    const db = orderKey[b.estado] ?? 9;
    if (da !== db) return da - db;
    return new Date(b.fecha_creacion || 0) - new Date(a.fecha_creacion || 0);
  });

  const counts = {
    activas: rows.filter(r => r.estado === 'pendiente' || r.estado === 'en_progreso').length,
    todas:   rows.length,
  };

  return (
    <>
      <style>{`
        .mt-wrap { max-width: 760px; margin: 0 auto; padding: 4px 0 24px; }
        .mt-head { padding: 4px 12px 12px; }
        .mt-head h1 { margin: 0 0 4px; font-size: 20px; }
        .mt-head .sub { color: var(--ink-3); font-size: 13px; }
        .mt-tabs {
          display: flex; gap: 4px; padding: 8px 12px 12px;
          position: sticky; top: 0; background: var(--bg); z-index: 5;
        }
        .mt-tab {
          flex: 1; padding: 10px 12px; border: 1px solid var(--line);
          background: var(--surface); border-radius: 8px;
          font-size: 13px; font-weight: 500; color: var(--ink-2);
          cursor: pointer; min-height: 40px;
        }
        .mt-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
        .mt-tab .c { margin-left: 6px; opacity: .8; font-weight: 400; }
        .mt-list { display: flex; flex-direction: column; gap: 10px; padding: 0 12px; }
        .mt-card {
          background: var(--surface); border: 1px solid var(--line);
          border-radius: 10px; padding: 14px;
          display: flex; flex-direction: column; gap: 8px;
          box-shadow: 0 1px 2px rgba(0,0,0,.03);
        }
        .mt-card-top {
          display: flex; align-items: flex-start; justify-content: space-between;
          gap: 10px;
        }
        .mt-title {
          font-size: 15px; font-weight: 600; line-height: 1.3;
          color: var(--ink); word-break: break-word;
        }
        .mt-desc {
          font-size: 13px; color: var(--ink-2); line-height: 1.4;
          white-space: pre-wrap; word-break: break-word;
        }
        .mt-meta {
          display: flex; flex-wrap: wrap; gap: 8px 14px;
          font-size: 12px; color: var(--ink-3);
        }
        .mt-meta b { font-weight: 500; color: var(--ink-2); }
        .mt-actions {
          display: flex; gap: 8px; margin-top: 4px;
        }
        .mt-btn {
          flex: 1; min-height: 44px; padding: 10px 14px;
          border: 1px solid var(--line); border-radius: 8px;
          font-size: 14px; font-weight: 600; cursor: pointer;
          background: var(--surface); color: var(--ink);
          display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        }
        .mt-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
        .mt-btn.ok { background: #15803d; color: #fff; border-color: #15803d; }
        .mt-btn:disabled { opacity: .5; cursor: default; }
        .mt-empty {
          text-align: center; padding: 40px 20px; color: var(--ink-3);
          font-size: 14px;
        }
        @media (max-width: 480px) {
          .mt-head { padding: 4px 10px 8px; }
          .mt-tabs { padding: 6px 10px 10px; }
          .mt-list { padding: 0 10px; }
          .mt-card { padding: 12px; }
          .mt-actions { flex-direction: column; }
        }
      `}</style>

      <div className="mt-wrap">
        <div className="mt-head">
          <h1>Mis tareas</h1>
          <div className="sub">Tareas asignadas a ti</div>
        </div>

        <div className="mt-tabs">
          <button className={`mt-tab ${tab==='activas'?'on':''}`} onClick={()=>setTab('activas')}>
            Activas <span className="c">{counts.activas}</span>
          </button>
          <button className={`mt-tab ${tab==='todas'?'on':''}`} onClick={()=>setTab('todas')}>
            Todas <span className="c">{counts.todas}</span>
          </button>
        </div>

        <div className="mt-list">
          {loading && <div className="mt-empty">Cargando…</div>}
          {!loading && sorted.length === 0 && (
            <div className="mt-empty">
              {tab === 'activas' ? 'No tienes tareas activas.' : 'No tienes tareas asignadas.'}
            </div>
          )}
          {!loading && sorted.map(t => {
            const e = MT_ESTADO_MAP[t.estado] || { label: t.estado || '—', cls: '' };
            const p = pedidoById(t.pedido_id);
            const busy = busyId === t.id;
            const canIniciar  = t.estado === 'pendiente';
            const canCompletar = t.estado === 'en_progreso';
            return (
              <div key={t.id} className="mt-card">
                <div className="mt-card-top">
                  <div className="mt-title">{t.titulo}</div>
                  <span className={`pill ${e.cls}`}><span className="d"/>{e.label}</span>
                </div>
                {t.descripcion && <div className="mt-desc">{t.descripcion}</div>}
                <div className="mt-meta">
                  {t.pedido_id != null && (
                    <span><b>Pedido:</b> {p ? (p.numero ? `#${p.numero}` : `#${p.id}`) : `#${t.pedido_id}`}{p && p.nombre_cliente ? ` · ${p.nombre_cliente}` : ''}</span>
                  )}
                  <span><b>Asignada:</b> {mtFmtDate(t.fecha_creacion)}</span>
                  {t.fecha_inicio && <span><b>Iniciada:</b> {mtFmtDate(t.fecha_inicio)}</span>}
                  {t.fecha_fin && <span><b>Finalizada:</b> {mtFmtDate(t.fecha_fin)}</span>}
                </div>
                {(canIniciar || canCompletar) && (
                  <div className="mt-actions">
                    {canIniciar && (
                      <button className="mt-btn primary" disabled={busy}
                        onClick={()=>changeEstado(t, 'en_progreso')}>
                        {busy ? 'Guardando…' : 'Iniciar'}
                      </button>
                    )}
                    {canCompletar && (
                      <button className="mt-btn ok" disabled={busy}
                        onClick={()=>changeEstado(t, 'completada')}>
                        {busy ? 'Guardando…' : 'Completar'}
                      </button>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

window.MisTareasView = MisTareasView;