/* FauxDashboard — CSS-rendered fake screenshot of Fish-Eye app
   Uses sanitized/random data only. Matches the real app's dark navy theme. */

const fdStyles = {
  bg: '#0b1120',
  card: '#0f1729',
  border: 'rgba(148,163,184,0.12)',
  text: '#e2e8f0',
  muted: '#64748b',
  accent: '#0ea5e9',
  green: '#22c55e',
  orange: '#f97316',
  red: '#ef4444',
  mono: { fontFamily: "'JetBrains Mono', monospace" },
};

const FauxSidebar = () => (
  <div style={{ width: 200, background: '#080e1a', borderRight: `1px solid ${fdStyles.border}`, padding: '16px 0', display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}>
    <div style={{ padding: '8px 16px 20px', display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ width: 28, height: 28, borderRadius: 8, background: 'linear-gradient(135deg, #0ea5e9, #0284c7)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8" strokeDasharray="4 3"/></svg>
      </div>
      <div>
        <div style={{ fontSize: 12, fontWeight: 700, color: '#fff', letterSpacing: '-0.01em' }}>FishEye</div>
        <div style={{ fontSize: 9, color: fdStyles.muted, textTransform: 'uppercase', letterSpacing: '0.05em' }}>Network Monitor</div>
      </div>
    </div>
    <div style={{ padding: '0 8px', marginBottom: 8 }}>
      <div style={{ fontSize: 9, color: fdStyles.muted, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '0 8px', marginBottom: 6 }}>Navigation</div>
      {['Dashboard', 'Custom Dashboard', 'Targets', 'Path Visualization'].map((item, i) => (
        <div key={i} style={{ padding: '7px 12px', borderRadius: 6, fontSize: 11, color: i === 0 ? '#fff' : '#94a3b8', background: i === 0 ? 'rgba(14,165,233,0.12)' : 'transparent', marginBottom: 1, display: 'flex', alignItems: 'center', gap: 8, ...(i === 0 ? { boxShadow: '0 0 12px rgba(14,165,233,0.1)' } : {}) }}>
          <div style={{ width: 4, height: 4, borderRadius: '50%', background: i === 0 ? fdStyles.accent : 'transparent' }}></div>
          {item}
        </div>
      ))}
    </div>
    <div style={{ padding: '0 8px' }}>
      <div style={{ fontSize: 9, color: fdStyles.muted, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '0 8px', marginBottom: 6 }}>Tools</div>
      {['DNS Deep Dive', 'External Outages', 'Search Results'].map((item, i) => (
        <div key={i} style={{ padding: '7px 12px', borderRadius: 6, fontSize: 11, color: '#94a3b8', marginBottom: 1 }}>{item}</div>
      ))}
    </div>
    <div style={{ padding: '0 8px', marginTop: 8 }}>
      <div style={{ fontSize: 9, color: fdStyles.muted, textTransform: 'uppercase', letterSpacing: '0.08em', padding: '0 8px', marginBottom: 6 }}>Maps</div>
      {['Maps', 'System Health'].map((item, i) => (
        <div key={i} style={{ padding: '7px 12px', borderRadius: 6, fontSize: 11, color: '#94a3b8', marginBottom: 1 }}>{item}</div>
      ))}
    </div>
  </div>
);

const StatCard = ({ label, value, sub, color, icon }) => (
  <div style={{ flex: 1, background: `linear-gradient(135deg, ${color}18, ${color}08)`, border: `1px solid ${color}30`, borderRadius: 10, padding: '14px 16px', position: 'relative', overflow: 'hidden' }}>
    <div style={{ fontSize: 9, color: `${color}cc`, textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4, fontWeight: 600 }}>{label}</div>
    <div style={{ fontSize: 28, fontWeight: 700, color: '#fff', lineHeight: 1.1 }}>{value}</div>
    <div style={{ fontSize: 10, color: fdStyles.muted, marginTop: 4 }}>{sub}</div>
    <div style={{ position: 'absolute', right: 12, top: 12, fontSize: 18, opacity: 0.3 }}>{icon}</div>
  </div>
);

const HostCard = ({ name, host, latency, status }) => {
  const statusColor = status === 'Healthy' ? fdStyles.green : status === 'Degraded' ? fdStyles.orange : fdStyles.red;
  return (
    <div style={{ background: fdStyles.card, border: `1px solid ${fdStyles.border}`, borderRadius: 10, padding: 14, minWidth: 0 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: statusColor }}></div>
        <span style={{ fontSize: 11, fontWeight: 600, color: '#fff', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{name}</span>
      </div>
      <div style={{ ...fdStyles.mono, fontSize: 9, color: fdStyles.muted, marginBottom: 4, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{host}</div>
      <div style={{ ...fdStyles.mono, fontSize: 9, color: fdStyles.accent, marginBottom: 8 }}>TRACE</div>
      <div style={{ display: 'flex', gap: 16 }}>
        <div>
          <div style={{ fontSize: 8, color: fdStyles.muted, textTransform: 'uppercase' }}>Latency</div>
          <div style={{ ...fdStyles.mono, fontSize: 11, color: '#fff', fontWeight: 600 }}>{latency}</div>
        </div>
        <div>
          <div style={{ fontSize: 8, color: fdStyles.muted, textTransform: 'uppercase' }}>Status</div>
          <div style={{ fontSize: 11, color: statusColor, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 4 }}>
            <div style={{ width: 5, height: 5, borderRadius: '50%', background: statusColor }}></div>
            {status}
          </div>
        </div>
      </div>
    </div>
  );
};

const FauxDashboard = () => (
  <div style={{ display: 'flex', width: '100%', height: 520, background: fdStyles.bg, borderRadius: 12, overflow: 'hidden', border: `1px solid ${fdStyles.border}`, fontFamily: "'Inter', system-ui, sans-serif", fontSize: 13, color: fdStyles.text }}>
    <FauxSidebar />
    <div style={{ flex: 1, padding: '16px 20px', overflow: 'hidden' }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
        <div>
          <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#fff' }}>Dashboard</h2>
          <div style={{ fontSize: 10, color: fdStyles.muted, marginTop: 2 }}>Network monitoring overview · Updated less than a minute ago</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['Custom Dashboard', 'Search Results', 'Refresh'].map((b, i) => (
            <div key={i} style={{ padding: '5px 12px', borderRadius: 6, border: `1px solid ${fdStyles.border}`, fontSize: 10, color: '#94a3b8', background: 'rgba(255,255,255,0.03)' }}>{b}</div>
          ))}
        </div>
      </div>
      {/* Stats */}
      <div style={{ display: 'flex', gap: 10, marginBottom: 16 }}>
        <StatCard label="Total Targets" value="24" sub="24 actively monitored" color="#0ea5e9" icon="◎" />
        <StatCard label="Healthy" value="21" sub="3 degraded · 0 down" color="#22c55e" icon="♥" />
        <StatCard label="Active Alerts" value="3" sub="View all alerts ›" color="#f97316" icon="⚠" />
        <StatCard label="Avg Latency" value={<span>42<span style={{ fontSize: 14, fontWeight: 400 }}>ms</span></span>} sub="Last hour average" color="#8b5cf6" icon="↗" />
      </div>
      {/* Host cards */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 600, color: '#fff' }}>Host Status Overview</div>
            <div style={{ fontSize: 10, color: fdStyles.muted }}>Quick breakdown of all monitored targets</div>
          </div>
        </div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
        <HostCard name="US East 1" host="node-us-east.example.net" latency="18.2 ms" status="Healthy" />
        <HostCard name="EU West 1" host="node-eu-west.example.net" latency="42.7 ms" status="Healthy" />
        <HostCard name="AP South 1" host="node-ap-south.example.net" latency="89.4 ms" status="Degraded" />
        <HostCard name="US West 2" host="node-us-west.example.net" latency="24.1 ms" status="Healthy" />
        <HostCard name="EU Central 1" host="node-eu-central.example.net" latency="38.9 ms" status="Healthy" />
      </div>
    </div>
  </div>
);

window.FauxDashboard = FauxDashboard;