const { useState, useEffect } = React;

/* SEC EDGAR — Form 4 insider transactions feed
   Uses the public RSS/Atom feed which is browser-fetchable.
   Falls back to seeded demo data if blocked. */
function useSecInsiders() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [source, setSource] = useState('demo');

  useEffect(() => {
    // SEC EDGAR Form 4 latest filings (returns Atom XML)
    const url = 'https://www.sec.gov/cgi-bin/browse-edgar?action=getcurrent&type=4&company=&dateb=&owner=include&count=40&output=atom';
    // Try via a CORS-friendly fetch; SEC allows GETs but enforces UA. Browsers send their own UA.
    fetch(url, { headers: { 'Accept': 'application/atom+xml' } })
      .then(r => r.ok ? r.text() : Promise.reject())
      .then(xml => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(xml, 'text/xml');
        const entries = [...doc.querySelectorAll('entry')].slice(0, 30).map(e => {
          const title = e.querySelector('title')?.textContent || '';
          const updated = e.querySelector('updated')?.textContent || '';
          const link = e.querySelector('link')?.getAttribute('href') || '';
          const summary = e.querySelector('summary')?.textContent || '';
          // Title format: "4 - Company Name (CIK) (Filer)"
          const m = title.match(/4\s*-\s*(.+?)\s*\(([0-9]+)\)/);
          const company = m ? m[1] : title.replace(/^4\s*-\s*/, '');
          const cik = m ? m[2] : '';
          // Try to extract ticker from summary
          const tickerMatch = summary.match(/\b([A-Z]{1,5})\b/);
          return {
            date: updated.slice(0, 10),
            company,
            cik,
            ticker: tickerMatch ? tickerMatch[1] : '—',
            name: 'SEC Filer',
            role: 'Reporting Person',
            link,
            type: 'filing',
          };
        });
        if (entries.length > 0) {
          setData(entries); setSource('sec'); setLoading(false);
        } else { throw new Error('empty'); }
      })
      .catch(() => { setData(null); setLoading(false); setSource('demo'); });
  }, []);

  return { data, loading, source };
}

const T_INS = {
  es: { title:'Compradores (Insider Trading)', date:'Fecha', company:'Empresa', insider:'Ejecutivo', role:'Cargo', type:'Tipo', shares:'Acciones', value:'Valor', buy:'Compra', sell:'Venta', viewAll:'Ver en FinViz', viewOpen:'Ver en OpenInsider', filter:'Filtrar', all:'Todos', buys:'Compras', sells:'Ventas', note:'Datos de referencia. Ver fuentes para datos en tiempo real.' },
  en: { title:'Insider Trading', date:'Date', company:'Company', insider:'Executive', role:'Title', type:'Type', shares:'Shares', value:'Value', buy:'Buy', sell:'Sell', viewAll:'View on FinViz', viewOpen:'View on OpenInsider', filter:'Filter', all:'All', buys:'Buys', sells:'Sells', note:'Reference data. See sources for real-time data.' }
};

const INSIDERS = [
  { date:'2026-04-25', ticker:'NVDA', company:'NVIDIA Corp', name:'Jensen Huang', role:'CEO', type:'buy', shares:50000, value:6050000 },
  { date:'2026-04-24', ticker:'AAPL', company:'Apple Inc', name:'Tim Cook', role:'CEO', type:'buy', shares:20000, value:3700000 },
  { date:'2026-04-23', ticker:'META', company:'Meta Platforms', name:'Mark Zuckerberg', role:'CEO', type:'buy', shares:15000, value:8550000 },
  { date:'2026-04-22', ticker:'MSFT', company:'Microsoft Corp', name:'Satya Nadella', role:'CEO', type:'buy', shares:8000, value:3360000 },
  { date:'2026-04-21', ticker:'TSLA', company:'Tesla Inc', name:'Elon Musk', role:'CEO', type:'sell', shares:200000, value:41000000 },
  { date:'2026-04-20', ticker:'AMZN', company:'Amazon.com', name:'Andy Jassy', role:'CEO', type:'buy', shares:12000, value:2640000 },
  { date:'2026-04-19', ticker:'GOOGL', company:'Alphabet Inc', name:'Sundar Pichai', role:'CEO', type:'buy', shares:5000, value:875000 },
  { date:'2026-04-18', ticker:'JPM', company:'JPMorgan Chase', name:'Jamie Dimon', role:'CEO', type:'buy', shares:30000, value:7230000 },
  { date:'2026-04-17', ticker:'BRK.B', company:'Berkshire Hathaway', name:'Warren Buffett', role:'Chairman', type:'buy', shares:100000, value:38000000 },
  { date:'2026-04-16', ticker:'SOFI', company:'SoFi Technologies', name:'Anthony Noto', role:'CEO', type:'buy', shares:250000, value:2250000 },
  { date:'2026-04-15', ticker:'PLTR', company:'Palantir Technologies', name:'Alex Karp', role:'CEO', type:'sell', shares:500000, value:30500000 },
  { date:'2026-04-14', ticker:'HOOD', company:'Robinhood Markets', name:'Vlad Tenev', role:'CEO', type:'buy', shares:150000, value:3750000 },
];

function fmtVal(v) {
  if (v >= 1e9) return `$${(v/1e9).toFixed(2)}B`;
  if (v >= 1e6) return `$${(v/1e6).toFixed(1)}M`;
  if (v >= 1e3) return `$${(v/1e3).toFixed(0)}K`;
  return `$${v}`;
}

function InsiderTrading({ lang, fullPage = false }) {
  const t = T_INS[lang] || T_INS.es;
  const [filter, setFilter] = useState('all');
  const sec = useSecInsiders();

  // If SEC data is available, use it; otherwise demo
  const usingSec = sec.source === 'sec' && sec.data && sec.data.length > 0;
  const baseRows = usingSec ? sec.data : INSIDERS;
  const rows = fullPage ? baseRows : baseRows.slice(0, 7);
  const filtered = rows.filter(r => {
    if (filter === 'all') return true;
    if (usingSec) return true; // SEC feed doesn't pre-classify buy/sell
    return filter === 'buys' ? r.type === 'buy' : r.type === 'sell';
  });

  return (
    <div>
      <div className="sec-label">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="17 11 19 13 23 9"/></svg>
        {t.title}
      </div>

      <div style={{ background: 'var(--card2)', border: '1px solid var(--border)', borderRadius: 'var(--rl)', overflow: 'hidden' }}>
        {/* Toolbar */}
        <div style={{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <div style={{ display: 'flex', gap: 4 }}>
            {[['all', t.all], ['buys', t.buys], ['sells', t.sells]].map(([k, l]) => (
              <button key={k} onClick={() => setFilter(k)}
                className={`btn btn-sm ${filter === k ? 'btn-active' : 'btn-ghost'}`}
                style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 600, fontSize: 11, letterSpacing: '0.04em',
                  ...(filter === k && k === 'buys' ? { color: 'var(--green)', borderColor: 'var(--green)', background: 'rgba(61,214,140,0.08)' } : {}),
                  ...(filter === k && k === 'sells' ? { color: 'var(--red)', borderColor: 'var(--red)', background: 'rgba(240,107,107,0.08)' } : {}),
                }}>
                {l}
              </button>
            ))}
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <a href="https://finviz.com/insidertrading.ashx" target="_blank" rel="noopener noreferrer"
              className="btn btn-outline btn-sm" style={{ textDecoration: 'none', fontSize: 11 }}>
              {t.viewAll}
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </a>
            <a href="http://openinsider.com/" target="_blank" rel="noopener noreferrer"
              className="btn btn-outline btn-sm" style={{ textDecoration: 'none', fontSize: 11 }}>
              {t.viewOpen}
              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
            </a>
          </div>
        </div>

        <div style={{ overflowX: 'auto' }}>
          {sec.loading ? (
            <div style={{ padding: 30, textAlign: 'center', color: 'var(--muted)' }}>
              <div style={{ width: 22, height: 22, border: '2px solid var(--border)', borderTopColor: 'var(--gold)', borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 10px' }}></div>
              {lang === 'es' ? 'Cargando datos de SEC EDGAR...' : 'Loading SEC EDGAR data...'}
              <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
            </div>
          ) : usingSec ? (
            <table className="tbl" style={{ minWidth: 700 }}>
              <thead>
                <tr>
                  <th>{t.date}</th>
                  <th>Ticker</th>
                  <th>{t.company}</th>
                  <th>CIK</th>
                  <th>{lang==='es'?'Form':'Form'}</th>
                  <th style={{ textAlign: 'right' }}>{lang==='es'?'Acción':'Action'}</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((r, i) => (
                  <tr key={i} onClick={() => r.link && window.open(r.link, '_blank')}>
                    <td style={{ color: 'var(--muted)', fontSize: 12 }}>{r.date}</td>
                    <td>
                      <span style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 800, fontSize: 13, color: 'var(--gold)' }}>{r.ticker}</span>
                    </td>
                    <td style={{ fontSize: 12, color: 'var(--text2)' }}>{r.company}</td>
                    <td style={{ fontSize: 11, color: 'var(--muted)', fontFamily: 'monospace' }}>{r.cik}</td>
                    <td><span className="badge badge-blue" style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, letterSpacing: '0.06em' }}>FORM 4</span></td>
                    <td style={{ textAlign: 'right' }}>
                      <span style={{ fontSize: 11, color: 'var(--blue)' }}>
                        {lang==='es'?'Ver filing':'View filing'} →
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          ) : (
            <table className="tbl" style={{ minWidth: 700 }}>
              <thead>
                <tr>
                  <th>{t.date}</th>
                  <th>{t.company}</th>
                  <th>{t.insider}</th>
                  <th>{t.role}</th>
                  <th>{t.type}</th>
                  <th style={{ textAlign: 'right' }}>{t.shares}</th>
                  <th style={{ textAlign: 'right' }}>{t.value}</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map((r, i) => (
                  <tr key={i}>
                    <td style={{ color: 'var(--muted)', fontSize: 12 }}>{r.date}</td>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                        <span style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 800, fontSize: 13, color: 'var(--gold)' }}>{r.ticker}</span>
                        <span style={{ color: 'var(--text2)', fontSize: 12 }}>{r.company}</span>
                      </div>
                    </td>
                    <td style={{ fontWeight: 500 }}>{r.name}</td>
                    <td style={{ color: 'var(--muted)', fontSize: 12 }}>{r.role}</td>
                    <td>
                      <span className={`badge ${r.type === 'buy' ? 'badge-green' : 'badge-red'}`} style={{ fontFamily: 'Barlow, sans-serif', fontWeight: 700, letterSpacing: '0.06em' }}>
                        {r.type === 'buy' ? t.buy : t.sell}
                      </span>
                    </td>
                    <td style={{ textAlign: 'right', fontFamily: 'Barlow, sans-serif', fontWeight: 600, fontSize: 12 }}>
                      {r.shares.toLocaleString()}
                    </td>
                    <td style={{ textAlign: 'right', fontFamily: 'Barlow, sans-serif', fontWeight: 700, fontSize: 13, color: r.type === 'buy' ? 'var(--green)' : 'var(--red)' }}>
                      {r.type === 'sell' ? '-' : '+'}{fmtVal(r.value)}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>

        <div style={{ padding: '8px 16px', borderTop: '1px solid var(--border)', fontSize: 10, color: 'var(--muted)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span>
            {usingSec
              ? (lang === 'es' ? '✓ Datos en vivo desde SEC EDGAR (Form 4 filings)' : '✓ Live data from SEC EDGAR (Form 4 filings)')
              : t.note}
          </span>
          {!fullPage && (
            <button onClick={() => {}} style={{ background: 'none', border: 'none', color: 'var(--blue)', cursor: 'pointer', fontSize: 11, fontFamily: 'DM Sans, sans-serif' }}>
              {lang === 'es' ? 'Ver tabla completa →' : 'View full table →'}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function InsidersPage({ lang }) {
  return (
    <div style={{ padding: 24, maxWidth: 1400, margin: '0 auto' }}>
      <InsiderTrading lang={lang} fullPage={true} />
    </div>
  );
}

Object.assign(window, { InsiderTrading, InsidersPage });