/* Discovery Radar — App */
const { useState, useEffect, useRef, useCallback } = React;

const CAT_META = {
  all:         { label: 'Todos',         color: '#1A56DB' },
  competitors: { label: 'Concorrentes',  color: '#C8231E' },
  market:      { label: 'Mercado',       color: '#2563EB' },
  portais:     { label: 'Portais RH',    color: '#057A55' },
  eventos:     { label: 'Eventos',       color: '#B45309' },
};

function relDate(d) {
  if (!d) return '';
  const diff = Date.now() - new Date(d).getTime();
  const min  = Math.floor(diff / 60000);
  const h    = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);
  if (min < 60)  return `${min}m atrás`;
  if (h   < 24)  return `${h}h atrás`;
  if (days < 7)  return `${days}d atrás`;
  return new Date(d).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short' });
}

function isNew(d) {
  return d && Date.now() - new Date(d).getTime() < 48 * 3600000;
}

// ─── RadarIcon ────────────────────────────────────────────────────────────────

function RadarIcon({ size = 16, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <circle cx="12" cy="12" r="6"/>
      <circle cx="12" cy="12" r="2"/>
      <line x1="12" y1="2"  x2="12" y2="6"/>
      <line x1="12" y1="18" x2="12" y2="22"/>
      <line x1="2"  y1="12" x2="6"  y2="12"/>
      <line x1="18" y1="12" x2="22" y2="12"/>
    </svg>
  );
}

function SearchIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
      <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
    </svg>
  );
}

function RefreshIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <polyline points="23 4 23 10 17 10"/>
      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
    </svg>
  );
}

// ─── Skeleton ─────────────────────────────────────────────────────────────────

function Skeleton() {
  return (
    <div className="rd-skeleton">
      <div className="rd-skel-line" style={{ width: '30%', height: 8 }}/>
      <div className="rd-skel-line" style={{ width: '85%', height: 12 }}/>
      <div className="rd-skel-line" style={{ width: '60%', height: 10 }}/>
    </div>
  );
}

// ─── ItemCard ─────────────────────────────────────────────────────────────────

function ItemCard({ item }) {
  const fresh = isNew(item.fetched_at);
  const sourceStyle = {
    backgroundColor: item.source_color + '18',
    borderColor:     item.source_color + '40',
    color:           item.source_color,
  };
  return (
    <a className={`rd-item${fresh ? ' new-item' : ''}`} href={item.url} target="_blank" rel="noopener noreferrer">
      <div className="rd-item-meta">
        <span className="rd-item-source" style={sourceStyle}>{item.source_name}</span>
        <span className={`rd-item-cat ${item.category}`}>{CAT_META[item.category]?.label || item.category}</span>
        {fresh && <span className="rd-new-badge">NOVO</span>}
        <span className="rd-item-date">{relDate(item.published_at)}</span>
      </div>
      <div className="rd-item-title">{item.title}</div>
      {item.description && <div className="rd-item-desc">{item.description}</div>}
      <div className="rd-item-link">↗ abrir</div>
    </a>
  );
}

// ─── App ──────────────────────────────────────────────────────────────────────

function App() {
  const [category,  setCategory]  = useState('all');
  const [sourceId,  setSourceId]  = useState(null);
  const [q,         setQ]         = useState('');
  const [items,     setItems]     = useState([]);
  const [stats,     setStats]     = useState({});
  const [sources,   setSources]   = useState({});
  const [loading,   setLoading]   = useState(true);
  const [refreshing,setRefreshing]= useState(false);
  const [total,     setTotal]     = useState(0);
  const searchRef = useRef(null);

  const fetchFeed = useCallback(async () => {
    const params = new URLSearchParams({ limit: 150 });
    if (category && category !== 'all') params.set('category', category);
    if (sourceId)  params.set('source', sourceId);
    if (q.trim())  params.set('q', q.trim());
    const r = await fetch(`/api/radar/feed?${params}`);
    const data = r.ok ? await r.json() : { items: [], total: 0 };
    setItems(data.items || []);
    setTotal(data.total || 0);
  }, [category, sourceId, q]);

  const fetchStats   = () => fetch('/api/radar/stats').then(r => r.ok ? r.json() : null).then(d => d && setStats(d)).catch(() => {});
  const fetchSources = () => fetch('/api/radar/sources').then(r => r.ok ? r.json() : {}).then(setSources).catch(() => {});

  useEffect(() => {
    Promise.all([fetchFeed(), fetchStats(), fetchSources()]).finally(() => setLoading(false));
  }, [fetchFeed]);

  const handleRefresh = async () => {
    if (refreshing) return;
    setRefreshing(true);
    await fetch('/api/radar/refresh', { method: 'POST' }).catch(() => {});
    // Aguarda 3s para dar tempo ao servidor iniciar a coleta, depois re-busca
    await new Promise(r => setTimeout(r, 3000));
    await Promise.all([fetchFeed(), fetchStats()]);
    setRefreshing(false);
  };

  const handleCategory = (cat) => {
    setCategory(cat);
    setSourceId(null);
    setQ('');
  };

  const catSources = category !== 'all' ? (sources[category] || []) : [];

  // Counts por categoria
  const cc = stats.by_category || {};

  return (
    <div className="rd-shell">
      {/* Sidebar */}
      <aside className="rd-sidebar">
        <div className="rd-logo">
          <div className="rd-logo-mark">
            <div className="rd-logo-icon"><RadarIcon size={14} color="var(--brand)"/></div>
            <div>
              <div className="rd-logo-text">Discovery Radar</div>
              <div className="rd-logo-sub">Refatorando Carreiras</div>
            </div>
          </div>
        </div>

        <nav className="rd-nav">
          <div className="rd-nav-section">
            <div className="rd-nav-head">Visão</div>
            {Object.entries(CAT_META).map(([key, meta]) => (
              <button
                key={key}
                className={`rd-nav-item${category === key && !sourceId ? ' active' : ''}`}
                onClick={() => handleCategory(key)}
              >
                <span className="rd-nav-dot" style={{ background: meta.color }}/>
                {meta.label}
                <span className="rd-nav-count">
                  {key === 'all' ? (stats.total || 0) : (cc[key] || 0)}
                </span>
              </button>
            ))}
          </div>

          {Object.entries(sources).map(([cat, list]) => (
            <div key={cat} className="rd-nav-section">
              <div className="rd-nav-head">{CAT_META[cat]?.label || cat}</div>
              {list.map(s => (
                <button
                  key={s.id}
                  className={`rd-nav-item${sourceId === s.id ? ' active' : ''}`}
                  onClick={() => { setSourceId(s.id); setCategory(cat); setQ(''); }}
                >
                  <span className="rd-nav-dot" style={{ background: s.color }}/>
                  {s.name}
                  <span className="rd-nav-count">{stats.by_source?.[s.id] || 0}</span>
                </button>
              ))}
            </div>
          ))}
        </nav>

        <div className="rd-sidebar-footer">
          {stats.last_fetch && (
            <div style={{ fontSize: 10, color: 'var(--ink-3)', fontFamily: 'var(--font-mono)' }}>
              Última coleta: {relDate(stats.last_fetch)}
            </div>
          )}
        </div>
      </aside>

      {/* Main */}
      <main className="rd-main">
        {/* Topbar */}
        <div className="rd-topbar">
          <div className="rd-topbar-title">
            {sourceId
              ? <><span>{[...Object.values(sources)].flat().find(s => s.id === sourceId)?.name || sourceId}</span></>
              : <>{CAT_META[category]?.label || category} <span style={{ color: 'var(--ink-3)', fontWeight: 400, fontSize: 12 }}>· {total} itens</span></>
            }
          </div>
          <div className="rd-search" onClick={() => searchRef.current?.focus()}>
            <span className="rd-search-ico"><SearchIcon/></span>
            <input
              ref={searchRef}
              value={q}
              onChange={e => setQ(e.target.value)}
              placeholder="Buscar no radar…"
            />
          </div>
          <button className={`rd-refresh-btn${refreshing ? ' loading' : ''}`} onClick={handleRefresh} disabled={refreshing}>
            <RefreshIcon/>
            {refreshing ? 'Coletando…' : 'Atualizar'}
          </button>
        </div>

        {/* Stats strip */}
        <div className="rd-stats-strip">
          <div className="rd-stat-chip">
            <span className="rd-stat-label">Total</span>
            <span className="rd-stat-value brand">{stats.total || 0}</span>
          </div>
          <div className="rd-stat-chip">
            <span className="rd-stat-label">Últimas 48h</span>
            <span className="rd-stat-value brand">{stats.new_24h || 0}</span>
          </div>
          <div className="rd-stat-chip">
            <span className="rd-stat-label">Concorrentes</span>
            <span className="rd-stat-value comp">{cc.competitors || 0}</span>
          </div>
          <div className="rd-stat-chip">
            <span className="rd-stat-label">Mercado</span>
            <span className="rd-stat-value mkt">{cc.market || 0}</span>
          </div>
          <div className="rd-stat-chip">
            <span className="rd-stat-label">Portais RH</span>
            <span className="rd-stat-value port">{cc.portais || 0}</span>
          </div>
          <div className="rd-stat-chip">
            <span className="rd-stat-label">Eventos</span>
            <span className="rd-stat-value evt">{cc.eventos || 0}</span>
          </div>
        </div>

        {/* Source pills (when category selected) */}
        {catSources.length > 0 && (
          <div className="rd-source-pills">
            <button
              className={`rd-pill${!sourceId ? ' active' : ''}`}
              onClick={() => setSourceId(null)}
            >
              Todas
            </button>
            {catSources.map(s => (
              <button
                key={s.id}
                className={`rd-pill${sourceId === s.id ? ' active' : ''}`}
                onClick={() => setSourceId(sourceId === s.id ? null : s.id)}
              >
                <span className="rd-pill-dot" style={{ background: s.color }}/>
                {s.name}
              </button>
            ))}
          </div>
        )}

        {/* Feed */}
        <div className="rd-feed">
          {loading ? (
            Array.from({ length: 8 }).map((_, i) => <Skeleton key={i}/>)
          ) : items.length === 0 ? (
            <div className="rd-feed-empty">
              <RadarIcon size={40} color="var(--ink-3)"/>
              <p>Nenhum item encontrado.</p>
              <p style={{ fontSize: 11, color: 'var(--ink-3)' }}>
                {stats.total === 0 ? 'Clique em "Atualizar" para iniciar a coleta.' : 'Tente outros filtros ou termos de busca.'}
              </p>
            </div>
          ) : (
            items.map(item => <ItemCard key={item.id} item={item}/>)
          )}
        </div>
      </main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);