'use client';
import Link from 'next/link';
import { ServerLogViewer } from '@/components/ServerLogViewer';

export default function ServerLogsPage() {
  const backendUrl =
    typeof window !== 'undefined'
      ? `${window.location.protocol}//${window.location.hostname}:3000`
      : '';

  return (
    <div className="space-y-6">
      <div>
        <Link href="/settings" className="text-sm text-[#2D6A4F] hover:underline">← Ajustes</Link>
        <h1 className="text-2xl font-bold text-gray-900">Logs del servidor</h1>
        <p className="text-sm text-gray-500 mt-0.5">
          Stream en tiempo real via SSE. Las líneas erróneas se resaltan en rojo. Máximo 200 líneas.
        </p>
      </div>
      {/* Altura acotada al viewport: el visor ocupa solo la parte visible y el resto hace scroll interno. */}
      <div className="h-[calc(100vh-220px)] min-h-[320px]">
        <ServerLogViewer backendUrl={backendUrl} />
      </div>
    </div>
  );
}