'use client';

import Link from 'next/link';
import { useEffect, useState } from 'react';
import { apiFetch } from '@/lib/api';
import { StatusPill } from '@/components/status-pill';
import { Button } from '@/components/ui/button';

interface ServerRow {
  id: string;
  name: string;
  slug: string;
  status: string;
  publicUrl: string | null;
  createdAt: string;
  updatedAt: string;
}

export default function ServersPage() {
  const [servers, setServers] = useState<ServerRow[] | null>(null);
  const [q, setQ] = useState('');

  useEffect(() => {
    apiFetch<{ servers: ServerRow[] }>('/v1/servers').then((r) => setServers(r.servers));
  }, []);

  const filtered = servers?.filter((s) =>
    q ? s.name.toLowerCase().includes(q.toLowerCase()) || s.slug.includes(q.toLowerCase()) : true,
  );

  return (
    <div className="mx-auto max-w-7xl px-6 py-8">
      <div className="flex items-baseline justify-between">
        <div>
          <h1 className="text-[22px] font-semibold tracking-tight">Servers</h1>
          <p className="mt-1 text-[13px] text-[--color-fg-muted]">All your hosted MCP servers.</p>
        </div>
        <Link href="/servers/new">
          <Button variant="primary" size="md">+ New server</Button>
        </Link>
      </div>
      <div className="mt-6">
        <input
          value={q}
          onChange={(e) => setQ(e.target.value)}
          placeholder="Search by name or slug…"
          className="h-8 w-72 rounded-md border border-[--color-border] bg-[--color-bg-subtle] px-2.5 text-[13px] placeholder:text-[--color-fg-subtle] focus:border-[--color-accent] focus:outline-none"
        />
      </div>
      <div className="panel mt-4">
        {!filtered && <div className="px-4 py-4 text-[12.5px] text-[--color-fg-muted]">Loading…</div>}
        {filtered && filtered.length === 0 && (
          <div className="px-4 py-12 text-center text-[13px] text-[--color-fg-muted]">No servers match.</div>
        )}
        {filtered && filtered.length > 0 && (
          <table className="w-full text-[12.5px]">
            <thead className="border-b border-[--color-border] text-[--color-fg-subtle]">
              <tr>
                <th className="px-4 py-2 text-left font-medium">Name</th>
                <th className="px-4 py-2 text-left font-medium">Slug</th>
                <th className="px-4 py-2 text-left font-medium">Status</th>
                <th className="px-4 py-2 text-left font-medium">URL</th>
                <th className="px-4 py-2 text-left font-medium">Updated</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map((s) => (
                <tr key={s.id} className="border-b border-[--color-border] last:border-0 hover:bg-[--color-bg-subtle]">
                  <td className="px-4 py-2.5">
                    <Link href={`/servers/${s.id}`} className="font-medium hover:text-[--color-accent]">
                      {s.name}
                    </Link>
                  </td>
                  <td className="mono px-4 py-2.5 text-[--color-fg-muted]">{s.slug}</td>
                  <td className="px-4 py-2.5"><StatusPill status={s.status as never} /></td>
                  <td className="mono px-4 py-2.5 text-[--color-fg-muted]">{s.publicUrl ?? '—'}</td>
                  <td className="px-4 py-2.5 text-[--color-fg-muted]">
                    {new Date(s.updatedAt).toLocaleString()}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}