// Connectors Hub — HERO surface

const { useState: useCx, useMemo: useMx } = React;

function ConnectorsHub({ sourcesPopulated, setDrawerVendor, openAddFlow }) {
  const [query, setQuery] = useCx('');
  const [filter, setFilter] = useCx('all');

  const allVendorIds = Object.keys(VENDORS);
  const connected = sourcesPopulated ? CONNECTED_SOURCES : [];
  const connectedIds = new Set(connected.map(c => c.id));

  const filteredVendors = useMx(() => {
    const q = query.trim().toLowerCase();
    return allVendorIds.filter(id => {
      const v = VENDORS[id];
      if (q && !v.name.toLowerCase().includes(q) && !v.cat.toLowerCase().includes(q)) return false;
      return true;
    });
  }, [query]);

  const byCategory = useMx(() => {
    const map = {};
    CATEGORY_ORDER.forEach(c => map[c] = []);
    filteredVendors.forEach(id => {
      const v = VENDORS[id];
      if (map[v.cat]) map[v.cat].push(id);
    });
    return map;
  }, [filteredVendors]);

  const totalItems = '1.24M';
  const totalSize = '10.5 TB';
  const totalRels = '2.2M';

  return (
    <div style={{ padding: '32px 32px 80px', maxWidth: 1280, margin: '0 auto' }}>
      {/* Page title */}
      <div style={{ marginBottom: 8 }}>
        <h1 className="t-h1" style={{ margin: 0 }}>Connectors</h1>
        <div className="text-secondary t-body" style={{ marginTop: 4 }}>
          One API for everything your org knows.
        </div>
      </div>

      {/* Hero strip — bold emphasis */}
      <div style={{
        marginTop: 24,
        border: '1px solid var(--border-subtle)',
        borderRadius: 12,
        background: 'var(--surface)',
        overflow: 'hidden',
      }}>
        <div style={{ padding: '20px 24px', display: 'flex', alignItems: 'center', gap: 32, borderBottom: sourcesPopulated ? '1px solid var(--border-subtle)' : 'none', flexWrap: 'wrap' }}>
          <HeroStat label="Connected" value={connected.length.toString()} sub={`of 47 available`} accent />
          <HeroStat label="Indexed" value={sourcesPopulated ? totalSize : '0'} sub={sourcesPopulated ? totalItems + ' items' : ''} />
          <HeroStat label="Relationships" value={sourcesPopulated ? totalRels : '0'} sub="cross-source edges" />
          <HeroStat label="Retrieval calls" value="14.9k" sub="last 7 days" />
          <div style={{ flex: 1 }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <StatusDot kind={sourcesPopulated ? 'live' : 'paused'} />
            <span className="mono-sm mono text-secondary">{sourcesPopulated ? 'Live' : 'No sources yet'}</span>
          </div>
        </div>

        {sourcesPopulated && (
          <div style={{ padding: '20px 24px', display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            {connected.map(c => (
              <HeroLogoPill key={c.id} source={c} onClick={() => setDrawerVendor(c.id)} />
            ))}
          </div>
        )}
      </div>

      {/* Search + actions */}
      <div style={{ display: 'flex', gap: 12, marginTop: 24, alignItems: 'center' }}>
        <div style={{ position: 'relative', flex: 1, maxWidth: 420 }}>
          <Icons.Search size={14} style={{ position: 'absolute', left: 12, top: 10, color: 'var(--text-tertiary)' }}/>
          <input className="input" placeholder="Search connectors…"
            value={query} onChange={e => setQuery(e.target.value)}
            style={{ paddingLeft: 34 }}/>
        </div>
        <button className="btn"><Icons.Filter size={13}/> All <Icons.ChevronD size={11}/></button>
        <button className="btn"><Icons.Dot size={10}/> Status <Icons.ChevronD size={11}/></button>
        <div style={{ flex: 1 }}/>
        <button className="btn accent" onClick={openAddFlow}><Icons.Plus size={13}/> Add source</button>
      </div>

      {/* Your sources */}
      {sourcesPopulated && (
        <section style={{ marginTop: 32 }}>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
              <h2 className="t-h2" style={{ margin: 0 }}>Your sources</h2>
              <span className="mono-sm mono text-tertiary">{connected.length}</span>
            </div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
              <span className="mono-sm mono text-tertiary">Last sync 34s ago</span>
              <button className="btn sm ghost">Manage</button>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 12 }}>
            {connected.map(c => (
              <ConnectedTile key={c.id} source={c} onClick={() => setDrawerVendor(c.id)} />
            ))}
          </div>
        </section>
      )}

      {/* Empty state banner when no sources */}
      {!sourcesPopulated && (
        <div className="card" style={{ marginTop: 32, padding: '24px 28px', display: 'flex', alignItems: 'center', gap: 24 }}>
          <div style={{ flex: 1 }}>
            <div className="t-h2">Connect your first source to power retrieval</div>
            <div className="text-secondary t-body" style={{ marginTop: 4 }}>Pick anything from the catalog below. Most teams start with Slack or Notion.</div>
          </div>
          <button className="btn accent" onClick={openAddFlow}><Icons.Plus size={13}/> Start with Slack</button>
          <button className="btn">Browse all</button>
        </div>
      )}

      {/* Catalog */}
      <section style={{ marginTop: 48 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 4, paddingBottom: 14, borderBottom: '1px solid var(--border-subtle)' }}>
          <h2 className="t-h2" style={{ margin: 0 }}>Catalog</h2>
          <span className="mono-sm mono text-tertiary">{allVendorIds.length} connectors</span>
        </div>

        {CATEGORY_ORDER.map(cat => {
          const vendors = byCategory[cat];
          if (!vendors || vendors.length === 0) return null;
          return (
            <div key={cat} style={{ marginTop: 28 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 12 }}>
                <h3 className="t-h3" style={{ margin: 0 }}>{CATEGORY_LABEL[cat]}</h3>
                <span className="mono-sm mono text-tertiary">{vendors.length}</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 12 }}>
                {vendors.map(id => (
                  <CatalogTile key={id} vendor={id}
                    connected={connectedIds.has(id)}
                    onClick={() => connectedIds.has(id) ? setDrawerVendor(id) : openAddFlow(id)} />
                ))}
              </div>
            </div>
          );
        })}

        <div style={{ marginTop: 40, padding: '20px 24px', border: '1px dashed var(--border)', borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div className="t-h3">Don't see yours?</div>
            <div className="text-secondary t-small mt-4">Request a connector and we'll prioritize it based on demand.</div>
          </div>
          <button className="btn">Request a connector →</button>
        </div>
      </section>
    </div>
  );
}

function HeroStat({ label, value, sub, accent }) {
  return (
    <div>
      <div className="t-display" style={{ color: accent ? 'var(--accent-text)' : 'var(--text-primary)', letterSpacing: '-0.02em' }}>{value}</div>
      <div className="mono-sm mono text-tertiary" style={{ marginTop: 2 }}>
        {label}{sub && <span> · {sub}</span>}
      </div>
    </div>
  );
}

function HeroLogoPill({ source, onClick }) {
  const v = VENDORS[source.id];
  return (
    <button onClick={onClick} style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
      padding: 0, background: 'transparent',
    }}>
      <VendorLogo vendor={source.id} size={36} radius={8}/>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        <StatusDot kind={source.status === 'syncing' ? 'syncing' : source.status === 'partial' ? 'partial' : 'live'} size={6}/>
        <span className="mono-sm mono" style={{ color: 'var(--text-secondary)', fontSize: 11 }}>{source.volume.split(' ')[0]}</span>
      </div>
    </button>
  );
}

function ConnectedTile({ source, onClick }) {
  const v = VENDORS[source.id];
  const status = source.status;
  const borderColor =
    status === 'error' ? 'var(--error)' :
    status === 'partial' ? 'var(--warning)' :
    'var(--border-subtle)';
  const dotKind = status === 'syncing' ? 'syncing' : status === 'partial' ? 'partial' : status === 'error' ? 'error' : 'live';
  const statusLabel = status === 'syncing' ? `Syncing · ${source.progress}%`
    : status === 'partial' ? 'Partial'
    : status === 'paused' ? 'Paused'
    : 'Connected';
  const isColdUsed = source.used && (source.used.includes('d ago') || source.used === 'Never');

  return (
    <button onClick={onClick} style={{
      background: 'var(--surface)',
      border: `1px solid ${borderColor}`,
      borderRadius: 10,
      padding: 16, textAlign: 'left',
      display: 'flex', flexDirection: 'column', gap: 10,
      minHeight: 170, position: 'relative', overflow: 'hidden',
      transition: 'border-color 120ms, transform 120ms',
    }}
    onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-strong)'}
    onMouseLeave={e => e.currentTarget.style.borderColor = borderColor}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <VendorLogo vendor={source.id} size={32}/>
        {status === 'partial' && <Icons.AlertTri size={14} style={{ color: 'var(--warning)' }}/>}
      </div>
      <div>
        <div className="t-h3">{v.name}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 2 }}>
          <StatusDot kind={dotKind} size={6}/>
          <span className="mono-sm mono" style={{ color: status === 'error' ? 'var(--error)' : status === 'partial' ? 'var(--warning)' : 'var(--text-secondary)' }}>
            {statusLabel}
          </span>
        </div>
      </div>
      <div style={{ marginTop: 'auto' }}>
        <div className="mono-sm mono" style={{ color: 'var(--text-primary)' }}>{source.volume}</div>
        {source.size && (
          <div className="mono-sm mono text-secondary" style={{ marginTop: 2 }}>
            {source.size} indexed
          </div>
        )}
        {source.rels && (
          <div className="mono-sm mono" style={{ color: 'var(--accent-text)', marginTop: 1 }}>
            {source.rels} relationships
          </div>
        )}
        <div className="mono-sm mono text-tertiary" style={{ marginTop: 4 }}>Synced {source.synced} · Used {source.used}</div>
      </div>
      {status === 'syncing' && (
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 3 }}>
          <Progress value={source.progress} height={3}/>
        </div>
      )}
    </button>
  );
}

function CatalogTile({ vendor, connected, onClick }) {
  const v = VENDORS[vendor];
  return (
    <button onClick={onClick} style={{
      background: 'var(--surface)',
      border: connected ? '1px solid var(--border-subtle)' : '1px dashed var(--border)',
      borderRadius: 10, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 10,
      textAlign: 'left', minHeight: 130,
      transition: 'border-color 120ms, background 120ms',
    }}
    onMouseEnter={e => {
      e.currentTarget.style.borderColor = 'var(--border-strong)';
      e.currentTarget.style.background = 'var(--hover)';
    }}
    onMouseLeave={e => {
      e.currentTarget.style.borderColor = connected ? 'var(--border-subtle)' : 'var(--border)';
      e.currentTarget.style.background = 'var(--surface)';
    }}
    >
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <VendorLogo vendor={vendor} size={28}/>
        {connected && <Icons.Check size={14} style={{ color: 'var(--success)' }}/>}
      </div>
      <div>
        <div style={{ fontSize: 14, fontWeight: 500 }}>{v.name}</div>
        <div className="mono-sm mono text-tertiary" style={{ marginTop: 2 }}>{CAT_LABEL_SHORT[v.glyph] || v.kind}</div>
      </div>
      <div style={{ marginTop: 'auto' }}>
        {connected ? (
          <span className="chip success" style={{ padding: '2px 6px' }}><span className="dot"/> Connected</span>
        ) : (
          <span className="mono-sm mono" style={{ color: 'var(--text-secondary)' }}>+ Add</span>
        )}
      </div>
    </button>
  );
}

Object.assign(window, { ConnectorsHub });