import { Network } from 'lucide-react';

import { useRef } from 'react';

import { Head, Link } from '@inertiajs/react';

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import { SortHeader } from '@/Components/admin/SortHeader';
import PageHeader from '@/Components/layout/PageHeader';
import { Badge } from '@/Components/ui/badge';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';
import { ExportButton } from '@/Components/ui/export-button';
import { Input } from '@/Components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { useAdminFilters } from '@/hooks/useAdminFilters';
import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatRelativeTime } from '@/lib/format';
import type { PaginatedResponse } from '@/types';

interface TopicClusterRunRow {
  id: number;
  site_name: string | null;
  site_domain: string | null;
  status: string;
  clusters_count: number;
  error: string | null;
  started_at: string | null;
  completed_at: string | null;
  created_at: string;
}

interface Props {
  runs: PaginatedResponse<TopicClusterRunRow>;
  filters: { search?: string; status?: string; sort?: string; dir?: string };
  statuses: string[];
}

const STATUS_VARIANTS: Record<string, 'default' | 'secondary' | 'success' | 'destructive' | 'warning' | 'outline'> = {
  pending: 'secondary',
  processing: 'warning',
  completed: 'success',
  failed: 'destructive',
  cancelled: 'outline',
};

export default function AdminTopicClusterRunsIndex({ runs, filters, statuses }: Props) {
  const searchInputRef = useRef<HTMLInputElement>(null);
  const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({
    route: '/admin/topic-cluster-runs',
    filters,
  });
  const isNavigating = useNavigationState();
  const exportParams: Record<string, string> = {};
  if (filters.search) exportParams.search = filters.search;
  if (filters.status) exportParams.status = filters.status;

  useAdminKeyboardShortcuts({ onSearch: () => searchInputRef.current?.focus() });

  return (
    <AdminLayout>
      <Head title="Admin - Topic Cluster Runs" />
      <div className="container pt-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild><Link href="/admin">Admin</Link></BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Topic Cluster Runs</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <PageHeader
        title="Topic Cluster Runs"
        subtitle="Topic clustering job history across all sites"
        actions={<ExportButton href={route('admin.topic-cluster-runs.export')} params={exportParams} />}
      />

      <div className="container py-8 space-y-4">
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">Filters</legend>
          <Input ref={searchInputRef} placeholder="Search by site or domain..." value={search} onChange={(e) => setSearch(e.target.value)} className="max-w-sm" aria-label="Search topic cluster runs" />
          <Select value={filters.status ?? 'all'} onValueChange={(v) => updateFilter({ status: v === 'all' ? undefined : v })}>
            <SelectTrigger className="w-[180px]" aria-label="Filter by status"><SelectValue placeholder="All Statuses" /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              {statuses.map((s) => <SelectItem key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</SelectItem>)}
            </SelectContent>
          </Select>
        </fieldset>

        <AdminDataTable isEmpty={runs.data.length === 0} isNavigating={isNavigating} pagination={runs} onPage={handlePage} paginationLabel="runs" emptyIcon={Network} emptyTitle="No topic cluster runs" emptyDescription="Topic clustering runs will appear here.">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>ID</TableHead>
                <TableHead>Site</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Clusters</TableHead>
                <SortHeader column="started_at" label="Started" currentSort={filters.sort} currentDir={filters.dir} onSort={handleSort} />
                <SortHeader column="created_at" label="Created" currentSort={filters.sort} currentDir={filters.dir} onSort={handleSort} />
              </TableRow>
            </TableHeader>
            <TableBody>
              {runs.data.map((run) => (
                <TableRow key={run.id}>
                  <TableCell className="font-mono text-xs text-muted-foreground">#{run.id}</TableCell>
                  <TableCell>
                    <div className="font-medium">{run.site_name ?? '—'}</div>
                    {run.site_domain && <div className="text-xs text-muted-foreground">{run.site_domain}</div>}
                  </TableCell>
                  <TableCell>
                    <Badge variant={STATUS_VARIANTS[run.status] ?? 'secondary'}>{run.status}</Badge>
                    {run.error && <div className="text-xs text-destructive mt-1 max-w-xs truncate" title={run.error}>{run.error}</div>}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">{run.clusters_count}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">{formatRelativeTime(run.started_at)}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">{formatRelativeTime(run.created_at)}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>
    </AdminLayout>
  );
}
