import { Card, KpiStrip, Spinner, Badge } from '@cameleer/design-system';
import { Activity } from 'lucide-react';
import { useTenantMetrics } from '../../api/vendor-hooks';
import { useNavigate } from 'react-router';
import type { TenantMetricsEntry, MetricsSummary } from '../../types/api';
import { tierColor } from '../../utils/tier';

function formatBytes(n: number): string {
  if (n < 1024) return `${n} B`;
  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
  if (n < 1024 * 1024 * 1024) return `${(n / 1024 / 1024).toFixed(1)} MB`;
  return `${(n / 1024 / 1024 / 1024).toFixed(2)} GB`;
}

function formatUptime(seconds: number): string {
  const d = Math.floor(seconds / 86400);
  const h = Math.floor((seconds % 86400) / 3600);
  const m = Math.floor((seconds % 3600) / 60);
  if (d > 0) return `${d}d ${h}h`;
  if (h > 0) return `${h}h ${m}m`;
  return `${m}m`;
}

function formatPct(v: number): string {
  return `${(v * 100).toFixed(1)}%`;
}

function formatRate(v: number): string {
  if (v === 0) return '0';
  if (v < 0.1) return v.toFixed(3);
  if (v < 10) return v.toFixed(1);
  return Math.round(v).toLocaleString();
}

const thStyle: React.CSSProperties = {
  textAlign: 'left',
  padding: '8px 16px',
  fontSize: 11,
  fontWeight: 600,
  color: 'var(--text-muted)',
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
  borderBottom: '1px solid var(--border)',
};

const tdStyle: React.CSSProperties = {
  padding: '10px 16px',
  fontSize: 13,
  borderBottom: '1px solid var(--border)',
  fontVariantNumeric: 'tabular-nums',
};

function AgentsBadges({ m }: { m: MetricsSummary }) {
  const { live, stale, dead } = m.agents;
  return (
    <span style={{ display: 'inline-flex', gap: 6 }}>
      <Badge label={`${live} live`} color="success" />
      {stale > 0 && <Badge label={`${stale} stale`} color="warning" />}
      {dead > 0 && <Badge label={`${dead} dead`} color="error" />}
    </span>
  );
}

function HeapBar({ used, max }: { used: number; max: number }) {
  const pct = max > 0 ? (used / max) * 100 : 0;
  const color = pct > 85 ? 'var(--error, #ef4444)' : pct > 70 ? 'var(--warning, #f59e0b)' : 'var(--success, #22c55e)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{ width: 60, height: 6, borderRadius: 3, background: 'var(--border)', overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', borderRadius: 3, background: color }} />
      </div>
      <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
        {formatBytes(used)} / {formatBytes(max)}
      </span>
    </div>
  );
}

function DropsBadge({ rate }: { rate: number }) {
  if (rate === 0) return <span style={{ color: 'var(--text-muted)' }}>0</span>;
  return <Badge label={`${formatRate(rate)}/min`} color="error" />;
}

function TenantRow({ entry, onClick }: { entry: TenantMetricsEntry; onClick: () => void }) {
  const m = entry.metrics;
  const notRunning = entry.serverState !== 'RUNNING';

  return (
    <tr style={{ cursor: 'pointer' }} onClick={onClick}>
      <td style={tdStyle}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontWeight: 500 }}>{entry.tenantName}</span>
          <Badge label={entry.tier} color={tierColor(entry.tier)} />
        </div>
      </td>
      {notRunning || !m ? (
        <td colSpan={6} style={{ ...tdStyle, color: 'var(--text-muted)', textAlign: 'center' }}>
          {notRunning ? `Server ${entry.serverState.toLowerCase()}` : 'No metrics available'}
        </td>
      ) : (
        <>
          <td style={tdStyle}><AgentsBadges m={m} /></td>
          <td style={{ ...tdStyle, textAlign: 'right' }}>{formatPct(m.server.cpuUsage)}</td>
          <td style={tdStyle}><HeapBar used={m.server.heapUsedBytes} max={m.server.heapMaxBytes} /></td>
          <td style={{ ...tdStyle, textAlign: 'right' }}>{formatRate(m.http.requestsPerMinute)}/min</td>
          <td style={{ ...tdStyle, textAlign: 'center' }}><DropsBadge rate={m.ingestion.dropsPerMinute} /></td>
          <td style={{ ...tdStyle, textAlign: 'right', color: 'var(--text-muted)' }}>{formatUptime(m.server.uptimeSeconds)}</td>
        </>
      )}
    </tr>
  );
}

function FleetKpis({ entries }: { entries: TenantMetricsEntry[] }) {
  const withMetrics = entries.filter((e) => e.metrics != null);
  const totalAgentsLive = withMetrics.reduce((s, e) => s + (e.metrics!.agents.live), 0);
  const totalAgentsDead = withMetrics.reduce((s, e) => s + (e.metrics!.agents.dead), 0);
  const totalDrops = withMetrics.reduce((s, e) => s + (e.metrics!.ingestion.dropsPerMinute), 0);
  const running = entries.filter((e) => e.serverState === 'RUNNING').length;
  const avgCpu = withMetrics.length > 0
    ? withMetrics.reduce((s, e) => s + e.metrics!.server.cpuUsage, 0) / withMetrics.length
    : 0;

  return (
    <KpiStrip
      items={[
        { label: 'Tenants Running', value: `${running} / ${entries.length}` },
        { label: 'Total Agents Live', value: String(totalAgentsLive) },
        { label: 'Dead Agents', value: String(totalAgentsDead) },
        { label: 'Avg CPU', value: formatPct(avgCpu) },
        { label: 'Ingestion Drops', value: totalDrops === 0 ? '0' : `${formatRate(totalDrops)}/min` },
      ]}
    />
  );
}

export function VendorMetricsPage() {
  const { data, isLoading, isError } = useTenantMetrics();
  const navigate = useNavigate();

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 24, maxWidth: 1200 }}>
      <h1 style={{ margin: 0, fontSize: '1.25rem', fontWeight: 600 }}>Tenant Metrics</h1>

      <Card>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '16px 20px', borderBottom: '1px solid var(--border)' }}>
          <Activity size={18} style={{ color: 'var(--amber)' }} />
          <h2 style={{ margin: 0, fontSize: '1rem', fontWeight: 600 }}>Fleet Overview</h2>
          {isLoading && <Spinner size="sm" />}
          {isError && <span style={{ fontSize: 13, color: 'var(--error, #ef4444)' }}>Failed to load</span>}
        </div>

        {data && (
          <>
            <div style={{ padding: '4px 20px' }}>
              <FleetKpis entries={data} />
            </div>

            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead>
                <tr>
                  <th style={thStyle}>Tenant</th>
                  <th style={thStyle}>Agents</th>
                  <th style={{ ...thStyle, textAlign: 'right' }}>CPU</th>
                  <th style={thStyle}>Heap</th>
                  <th style={{ ...thStyle, textAlign: 'right' }}>HTTP Req</th>
                  <th style={{ ...thStyle, textAlign: 'center' }}>Drops</th>
                  <th style={{ ...thStyle, textAlign: 'right' }}>Uptime</th>
                </tr>
              </thead>
              <tbody>
                {data.length === 0 ? (
                  <tr>
                    <td colSpan={7} style={{ ...tdStyle, color: 'var(--text-muted)', textAlign: 'center' }}>
                      No tenants found
                    </td>
                  </tr>
                ) : (
                  data.map((entry) => (
                    <TenantRow
                      key={entry.tenantId}
                      entry={entry}
                      onClick={() => navigate(`/vendor/tenants/${entry.tenantId}`)}
                    />
                  ))
                )}
              </tbody>
            </table>
          </>
        )}
      </Card>
    </div>
  );
}
