const SOURCE_CATS = ["All", "Database", "Big Data", "SaaS", "API", "Streaming", "Files", "Data Lake"];

const CONNECTOR_ICONS = {
  PostgreSQL: { bg: "#336791", char: "P" },
  ClickHouse: { bg: "#FCC000", char: "C" },
  "SAP HANA": { bg: "#008FD3", char: "S" },
  REST: { bg: "#059669", char: "R" },
  Kafka: { bg: "#231F20", char: "K" },
  "MinIO / Iceberg": { bg: "#C72E29", char: "M" },
  "SQL Server": { bg: "#A91D22", char: "S" },
  MQTT: { bg: "#660066", char: "M" },
  Salesforce: { bg: "#00A1E0", char: "S" },
  "Excel Upload": { bg: "#217346", char: "X" },
  "Hadoop HDFS": { bg: "#F2C300", char: "H" },
  Oracle: { bg: "#C74634", char: "O" },
};

function SourcesScreen() {
  const [cat, setCat] = useState("All");
  const [q, setQ] = useState("");

  const filtered = DATA_SOURCES.filter(s => (cat === "All" || s.cat === cat) && (q === "" || s.name.toLowerCase().includes(q.toLowerCase())));

  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Data Sources</div>
          <div className="screen-sub">
            <span style={{ color: 'var(--ok)', fontWeight: 600 }}>10 healthy</span> · <span style={{ color: 'var(--accent-2)', fontWeight: 600 }}>1 warning</span> · <span style={{ color: 'var(--danger)', fontWeight: 600 }}>1 error</span> · Total volume: 826 TB · Live rows: 48.2K/min
          </div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="refresh"/>Sync all</button>
          <button className="btn"><Icon name="sparkles"/>AI Suggest joins</button>
          <button className="btn primary"><Icon name="plus"/>New source</button>
        </div>
      </div>

      {/* Filter bar */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 16, alignItems: 'center' }}>
        <div style={{ position: 'relative', flex: 1, maxWidth: 320 }}>
          <Icon name="search" size={14} style={{ position: 'absolute', left: 10, top: 9, color: 'var(--ink-3)' }}/>
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search sources…"
            style={{ width: '100%', height: 32, borderRadius: 8, border: '1px solid var(--border)', background: 'var(--panel)', padding: '0 10px 0 30px', fontSize: 12.5, color: 'var(--ink)', fontFamily: 'inherit', outline: 'none' }}
          />
        </div>
        <div style={{ display: 'flex', gap: 4, padding: 3, background: 'var(--panel-2)', border: '1px solid var(--border)', borderRadius: 8 }}>
          {SOURCE_CATS.map(c => (
            <button key={c} onClick={() => setCat(c)}
              style={{ padding: '5px 12px', borderRadius: 6, border: 'none', background: cat === c ? 'var(--panel)' : 'transparent', color: cat === c ? 'var(--ink)' : 'var(--ink-3)', fontSize: 12, fontWeight: cat === c ? 600 : 500, cursor: 'pointer', boxShadow: cat === c ? 'var(--shadow-sm)' : 'none', fontFamily: 'inherit' }}
            >{c}</button>
          ))}
        </div>
      </div>

      {/* Grid */}
      <div className="grid g-3">
        {filtered.map(s => {
          const ico = CONNECTOR_ICONS[s.type] || { bg: "#666", char: s.type[0] };
          return (
            <div key={s.id} className="card" style={{ padding: 14, cursor: 'pointer', transition: 'all .15s' }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, background: ico.bg, color: 'white', display: 'grid', placeItems: 'center', fontWeight: 700, fontSize: 18, flexShrink: 0 }}>{ico.char}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'space-between' }}>
                    <div style={{ fontWeight: 600, fontSize: 13, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{s.name}</div>
                    <span className={`tag ${s.status === 'healthy' ? 'ok' : s.status === 'warn' ? 'warn' : 'danger'}`} style={{ flexShrink: 0 }}>
                      <span className={`live-dot ${s.status === 'healthy' ? '' : s.status === 'warn' ? 'warn' : 'danger'}`} style={{ width: 6, height: 6 }}/>
                      {s.status}
                    </span>
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>{s.type} · {s.cat}</div>
                </div>
              </div>
              <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', paddingTop: 10, borderTop: '1px solid var(--border)' }}>
                <div>
                  <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Volume</div>
                  <div className="mono" style={{ fontSize: 13, fontWeight: 600, marginTop: 2 }}>{s.rows}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontSize: 10, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '.06em', fontWeight: 600 }}>Freshness</div>
                  <div style={{ fontSize: 12, fontWeight: 500, marginTop: 2, color: s.freshness === 'live' ? 'var(--ok)' : s.freshness.includes('lost') ? 'var(--danger)' : 'var(--ink-2)' }}>{s.freshness === 'live' ? <><span className="live-dot" style={{ width: 6, height: 6, marginRight: 4 }}/>Live</> : s.freshness}</div>
                </div>
              </div>
            </div>
          );
        })}

        {/* Add new tile */}
        <div className="card" style={{ padding: 14, border: '2px dashed var(--border-strong)', background: 'transparent', display: 'grid', placeItems: 'center', minHeight: 120, cursor: 'pointer' }}>
          <div style={{ textAlign: 'center', color: 'var(--ink-3)' }}>
            <Icon name="plus" size={22}/>
            <div style={{ fontSize: 12, fontWeight: 500, marginTop: 4 }}>Connect new source</div>
            <div style={{ fontSize: 10.5, color: 'var(--ink-4)', marginTop: 2 }}>50+ connectors available</div>
          </div>
        </div>
      </div>

      {/* AI ETL suggestions */}
      <div className="ai-strip" style={{ marginTop: 18 }}>
        <div className="glyph"><Icon name="sparkles"/></div>
        <div style={{ flex: 1 }}>
          <div className="title">AI-suggested integrations <span className="tag primary">3 new</span></div>
          <div className="body">
            • Join <span className="mono" style={{ color: 'var(--primary)' }}>gem_transactions.vendor_id</span> ↔ <span className="mono" style={{ color: 'var(--primary)' }}>vendor_master.id</span> — <b>98% confidence</b><br/>
            • Detected schema drift on <span className="mono" style={{ color: 'var(--primary)' }}>mssql-legacy.tbl_vendors</span> — 2 new columns<br/>
            • <span className="mono" style={{ color: 'var(--primary)' }}>oracle-hr</span> connection lost — retry with new credentials or <a href="#" style={{ color: 'var(--primary)' }}>investigate</a>
          </div>
          <div className="actions">
            <button className="btn sm">Auto-apply joins</button>
            <button className="btn sm">Review changes</button>
          </div>
        </div>
      </div>
    </div>
  );
}

window.SourcesScreen = SourcesScreen;