/* B28 HospeX — App mobile (visão de tarefas) */
function ViewMobile({ hotelId }) {
  const [cases, setCases] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let canceled = false;
    async function load() {
      try {
        const url = hotelId ? `/api/cases?hotel_id=${encodeURIComponent(hotelId)}` : '/api/cases';
        const res = await fetch(url);
        const json = await res.json();
        if (!canceled) setCases(Array.isArray(json?.cases) ? json.cases : []);
      } catch (e) {
        if (!canceled) setCases([]);
      } finally {
        if (!canceled) setLoading(false);
      }
    }
    load();
    return () => {
      canceled = true;
    };
  }, [hotelId]);

  if (loading) return (
    <div style={{ display: 'grid', placeItems: 'center', height: '40vh' }}>
      <Icon name="progress_activity" size={40} className="hx-spin" style={{ color: 'var(--primary)' }} />
    </div>
  );

  const tasks = cases.filter(c => c.status !== 'closed').slice(0, 12);

  return (
    <div>
      <Card pad={26}>
        <SectionHead eyebrow="Operação" title="Tarefas (mobile)" />
        <div style={{ fontSize: 13.5, color: 'var(--on-surface-variant)', lineHeight: 1.6, marginBottom: 16 }}>
          Esta tela usa dados reais de <b>Casos</b>. Para uma experiência mobile completa (push, anexos e SLAs), evoluímos este módulo depois.
        </div>
        {tasks.length ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {tasks.map(t => (
              <div key={t.id} style={{ padding: '14px 16px', borderRadius: 14, background: 'var(--surface-container-low)', display: 'flex', justifyContent: 'space-between', gap: 12 }}>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 800, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{t.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--on-surface-variant)' }}>{t.status} · {t.priority}</div>
                </div>
                <Chip bg="var(--surface-container-high)" color="var(--on-surface-variant)">{t.id.slice(0, 8)}</Chip>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ padding: 16, borderRadius: 12, background: 'var(--surface-container-low)', color: 'var(--on-surface-variant)', fontSize: 13 }}>
            Nenhuma tarefa disponível ainda.
          </div>
        )}
      </Card>
    </div>
  );
}

window.ViewMobile = ViewMobile;