'use client';

import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import { PageHeader } from '@bytelyst/dashboard-components';
import { useAuth } from '@/lib/auth-context';
import {
  listFactories,
  listJobs,
  getFleetMetrics,
  type FleetFactory,
  type FleetJob,
  type FleetMetrics,
} from '@/lib/fleet-client';

const POLL_INTERVAL = 30_000;

function HealthBadge({ health }: { health: string }) {
  const colors: Record<string, string> = {
    ok: 'bg-green-500/20 text-green-700 dark:text-green-400',
    degraded: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
    down: 'bg-red-500/20 text-red-700 dark:text-red-400',
  };
  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${colors[health] ?? colors.ok}`}
    >
      {health}
    </span>
  );
}

function MetricCard({ label, value }: { label: string; value: number | string }) {
  return (
    <div className="rounded-lg border p-3">
      <p className="text-xs text-muted-foreground">{label}</p>
      <p className="text-2xl font-semibold tabular-nums">{value}</p>
    </div>
  );
}

function StageBadge({ stage }: { stage: string }) {
  const colors: Record<string, string> = {
    queued: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
    assigned: 'bg-purple-500/20 text-purple-700 dark:text-purple-400',
    building: 'bg-orange-500/20 text-orange-700 dark:text-orange-400',
    shipped: 'bg-green-500/20 text-green-700 dark:text-green-400',
    failed: 'bg-red-500/20 text-red-700 dark:text-red-400',
  };
  return (
    <span
      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${colors[stage] ?? 'bg-muted text-muted-foreground'}`}
    >
      {stage}
    </span>
  );
}

export default function FleetOverviewPage() {
  const { token } = useAuth();
  const [factories, setFactories] = useState<FleetFactory[]>([]);
  const [jobs, setJobs] = useState<FleetJob[]>([]);
  const [metrics, setMetrics] = useState<FleetMetrics | null>(null);
  const [loading, setLoading] = useState(true);

  const refresh = useCallback(async () => {
    try {
      const [facRes, jobRes, metricsRes] = await Promise.all([
        listFactories(),
        listJobs({ limit: 10 }),
        getFleetMetrics().catch(() => null),
      ]);
      setFactories(facRes.factories);
      setJobs(jobRes.jobs);
      setMetrics(metricsRes);
    } catch {
      /* degrade gracefully */
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    if (!token) return;
    refresh();
    const id = setInterval(refresh, POLL_INTERVAL);
    return () => clearInterval(id);
  }, [token, refresh]);

  if (loading) {
    return (
      <div className="p-6">
        <PageHeader title="Fleet" />
        <p className="text-muted-foreground mt-4">Loading fleet data...</p>
      </div>
    );
  }

  return (
    <div className="p-6 space-y-8">
      <PageHeader title="Fleet Control Plane" />

      {/* Metrics + alerts */}
      {metrics && (
        <section aria-label="Fleet metrics" data-testid="fleet-metrics">
          {metrics.alerts.length > 0 && (
            <div className="space-y-2 mb-4" data-testid="fleet-alerts">
              {metrics.alerts.map(a => (
                <div
                  key={a.code}
                  role="alert"
                  className={`rounded-md border px-3 py-2 text-sm ${
                    a.level === 'critical'
                      ? 'border-red-500/40 bg-red-500/10 text-red-700 dark:text-red-400'
                      : 'border-yellow-500/40 bg-yellow-500/10 text-yellow-700 dark:text-yellow-400'
                  }`}
                >
                  <span className="font-medium uppercase mr-2">{a.level}</span>
                  {a.message}
                </div>
              ))}
            </div>
          )}
          <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-5">
            <MetricCard label="Queue depth" value={metrics.jobs.queueDepth} />
            <MetricCard label="Active" value={metrics.jobs.active} />
            <MetricCard label="Blocked" value={metrics.jobs.blocked} />
            <MetricCard
              label="Live factories"
              value={`${metrics.factories.live}/${metrics.factories.total}`}
            />
            <MetricCard label="Utilization" value={`${metrics.factories.utilizationPct}%`} />
          </div>
        </section>
      )}

      {/* Factory cards */}
      <section>
        <h2 className="text-lg font-semibold mb-3">Factories</h2>
        {factories.length === 0 ? (
          <p className="text-muted-foreground text-sm">
            No factories registered. Factories appear after their first heartbeat.
          </p>
        ) : (
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {factories.map(f => (
              <div
                key={f.id}
                className="rounded-lg border p-4 space-y-2"
                aria-label={`Factory ${f.factoryId}`}
              >
                <div className="flex items-center justify-between">
                  <span className="font-mono text-sm truncate">{f.factoryId}</span>
                  <HealthBadge health={f.health} />
                </div>
                <div className="text-xs text-muted-foreground space-y-1">
                  <p>Capabilities: {f.capabilities.length > 0 ? f.capabilities.join(', ') : '—'}</p>
                  <p>
                    Load: {f.load} / {f.seatLimit} seats
                  </p>
                  <p>Last heartbeat: {new Date(f.lastHeartbeatAt).toLocaleTimeString()}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </section>

      {/* Recent jobs summary */}
      <section>
        <div className="flex items-center justify-between mb-3">
          <h2 className="text-lg font-semibold">Recent Jobs</h2>
          <Link
            href="/dashboard/fleet/jobs"
            className="text-sm text-blue-600 hover:underline"
            aria-label="View all jobs"
          >
            View all →
          </Link>
        </div>
        {jobs.length === 0 ? (
          <p className="text-muted-foreground text-sm">No jobs found.</p>
        ) : (
          <div className="overflow-x-auto">
            <table className="w-full text-sm" aria-label="Recent fleet jobs">
              <thead>
                <tr className="border-b text-left text-muted-foreground">
                  <th className="pb-2 pr-4">Key</th>
                  <th className="pb-2 pr-4">Stage</th>
                  <th className="pb-2 pr-4">Priority</th>
                  <th className="pb-2">Created</th>
                </tr>
              </thead>
              <tbody>
                {jobs.map(j => (
                  <tr key={j.id} className="border-b last:border-0 hover:bg-muted/50">
                    <td className="py-2 pr-4">
                      <Link
                        href={`/dashboard/fleet/jobs/${j.id}`}
                        className="hover:underline font-mono text-xs"
                      >
                        {j.idempotencyKey}
                      </Link>
                    </td>
                    <td className="py-2 pr-4">
                      <StageBadge stage={j.stage} />
                    </td>
                    <td className="py-2 pr-4 capitalize">{j.priority}</td>
                    <td className="py-2 text-muted-foreground text-xs">
                      {new Date(j.createdAt).toLocaleDateString()}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>

      {/* Quick links */}
      <nav className="flex gap-4" aria-label="Fleet navigation">
        <Link href="/dashboard/fleet/jobs" className="text-sm underline" aria-label="All jobs page">
          All Jobs
        </Link>
        <Link href="/dashboard/fleet/budget" className="text-sm underline" aria-label="Budget page">
          Budgets
        </Link>
      </nav>
    </div>
  );
}
