'use client';

import { useState } from 'react';
import { fmtInt } from '@/lib/format';
import type { AdminRaw } from '@/lib/types';
import { AdminPage, ErrorNote, Field, inputCls, useAdmin } from './shared';

const TABLES = ['measurements', 'traceroutes', 'bgp_events', 'bgp_stats', 'pressure_history', 'signal_features', 'probe_health'];

export function Raw() {
  const [table, setTable] = useState('measurements');
  const [probe, setProbe] = useState('');
  const [target, setTarget] = useState('');
  const [limit, setLimit] = useState(100);
  const { data, err, loading } = useAdmin<AdminRaw>('/raw', { table, probe_id: probe || undefined, target_id: target || undefined, limit });
  return (
    <AdminPage title="Raw explorer" desc="Latest rows of a ClickHouse table, newest first. Read-only, capped at 200 rows.">
      <div className="grid grid-cols-2 gap-3 md:grid-cols-5">
        <Field label="table">
          <select value={table} onChange={(e) => setTable(e.target.value)} className={`${inputCls} num w-full`}>
            {TABLES.map((t) => (
              <option key={t}>{t}</option>
            ))}
          </select>
        </Field>
        <Field label="probe_id">
          <input value={probe} onChange={(e) => setProbe(e.target.value)} className={`${inputCls} num w-full`} />
        </Field>
        <Field label="target_id">
          <input value={target} onChange={(e) => setTarget(e.target.value)} className={`${inputCls} num w-full`} />
        </Field>
        <Field label="limit">
          <input type="number" min={1} max={200} value={limit} onChange={(e) => setLimit(Math.min(200, Math.max(1, Number(e.target.value) || 1)))} className={`${inputCls} num w-full`} />
        </Field>
        <div className="num flex items-end text-[11px] text-ink-3">{loading ? 'loading…' : data ? `${fmtInt(data.rows.length)} rows` : ''}</div>
      </div>
      <ErrorNote err={err} />
      {data && (
        <div className="scroll-x mt-3 max-h-[70vh] overflow-auto rounded-[4px] border border-line">
          <table className="tbl text-[11.5px]">
            <thead className="sticky top-0 bg-bg">
              <tr>
                {data.columns.map((c) => (
                  <th key={c} className="num">
                    {c}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {data.rows.map((r, i) => (
                <tr key={i}>
                  {r.map((v, j) => (
                    <td key={j} className="num max-w-[280px] truncate" title={String(v)}>
                      {v === null || v === undefined ? <span className="text-ink-3">∅</span> : typeof v === 'boolean' ? (v ? 'true' : 'false') : String(v)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </AdminPage>
  );
}