import { Activity, AlertTriangle, CheckCircle2, Clock, Search, XCircle } from 'lucide-react';
import { toast } from 'sonner';

import { useState, useRef } from 'react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid';
import { PerPageSelector } from '@/Components/admin/PerPageSelector';
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 { Button } from '@/Components/ui/button';
import { Checkbox } from '@/Components/ui/checkbox';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
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 { getAdminStatusVariant } from '@/lib/adminStatusBadge';
import { formatRelativeTime } from '@/lib/format';

interface AnalysisRunRow {
  id: number;
  site_id: number;
  site_name: string | null;
  site_domain: string | null;
  status: string;
  started_at: string | null;
  completed_at: string | null;
  duration_seconds: number | null;
  error: string | null;
  created_at: string;
}

interface PaginatedRuns {
  data: AnalysisRunRow[];
  current_page: number;
  last_page: number;
  from: number | null;
  to: number | null;
  total: number;
}

interface Props {
  runs: PaginatedRuns;
  filters: {
    search?: string;
    status?: string;
    sort?: string;
    dir?: string;
    date_from?: string;
    date_to?: string;
    per_page?: number;
  };
  stats: {
    total: number;
    completed: number;
    failed: number;
    processing: number;
  };
}

const statusBadge = (status: string) => (
  <Badge variant={getAdminStatusVariant(status)}>{status}</Badge>
);

const formatDuration = (seconds: number | null) => {
  if (seconds === null) return '—';
  if (seconds < 60) return `${seconds}s`;
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}m ${secs}s`;
};

export default function Index({ runs, filters, stats }: Props) {
  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
  const [cancelConfirm, setCancelConfirm] = useState(false);
  const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({
    route: 'admin.analysis-runs.index',
    filters,
  });
  const isNavigating = useNavigationState();
  const searchInputRef = useRef<HTMLInputElement>(null);

  const currentPage = runs.current_page;
  const lastPage = runs.last_page;
  useAdminKeyboardShortcuts({
    onSearch: () => searchInputRef.current?.focus(),
    onNextPage: currentPage < lastPage ? () => handlePage(currentPage + 1) : undefined,
    onPrevPage: currentPage > 1 ? () => handlePage(currentPage - 1) : undefined,
  });

  const cancellableStatuses = ['pending', 'processing'];

  function toggleSelect(id: number) {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id); else next.add(id);
      return next;
    });
  }

  function handleBulkCancel() {
    router.post(
      route('admin.analysis-runs.bulk-cancel'),
      { run_ids: [...selectedIds] },
      {
        onSuccess: () => { setSelectedIds(new Set()); setCancelConfirm(false); },
        onError: () => { toast.error('Operation failed. Your session may have expired — refresh and try again.'); },
      },
    );
  }

  const statCards: StatCard[] = [
    { title: 'Total Runs', value: stats.total, icon: Activity },
    { title: 'Completed', value: stats.completed, icon: CheckCircle2 },
    {
      title: 'Failed',
      value: stats.failed,
      icon: AlertTriangle,
      valueClassName: stats.failed > 0 ? 'text-destructive' : '',
    },
    { title: 'Processing', value: stats.processing, icon: Clock },
  ];

  return (
    <AdminLayout>
      <Head title="Analysis Runs" />
      <div className="container py-6 space-y-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Analysis Runs</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <PageHeader
          title="Analysis Runs"
          description="Monitor analysis runs across all sites"
          actions={<ExportButton href={route('admin.analysis-runs.export')} />}
        />

        <AdminStatsGrid stats={statCards} />

        <div className="flex items-center gap-4">
          <div className="relative flex-1">
            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
            <Input
              ref={searchInputRef}
              placeholder="Search by site name or domain..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(val) => updateFilter({ status: val === 'all' ? undefined : val })}
          >
            <SelectTrigger className="w-[160px]">
              <SelectValue placeholder="Status" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="completed">Completed</SelectItem>
              <SelectItem value="processing">Processing</SelectItem>
              <SelectItem value="failed">Failed</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
            </SelectContent>
          </Select>
          <Input
            type="date"
            value={filters.date_from ?? ''}
            onChange={(e) => updateFilter({ date_from: e.target.value || undefined })}
            className="w-[160px]"
            aria-label="Filter from date"
          />
          <Input
            type="date"
            value={filters.date_to ?? ''}
            onChange={(e) => updateFilter({ date_to: e.target.value || undefined })}
            className="w-[160px]"
            aria-label="Filter to date"
          />
          <PerPageSelector
            value={filters.per_page ?? 25}
            onChange={(perPage) => updateFilter({ per_page: perPage })}
          />
        </div>

        {selectedIds.size > 0 && (
          <div className="flex items-center gap-3 p-3 rounded-lg border bg-muted/40">
            <span className="text-sm text-muted-foreground">{selectedIds.size} selected</span>
            <Button size="sm" variant="destructive" onClick={() => setCancelConfirm(true)}>
              <XCircle className="h-3.5 w-3.5 mr-1" />
              Cancel Selected
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setSelectedIds(new Set())}>
              Clear selection
            </Button>
          </div>
        )}

        <AdminDataTable
          isEmpty={runs.data.length === 0}
          isNavigating={isNavigating}
          pagination={runs}
          onPage={handlePage}
          paginationLabel="runs"
          emptyIcon={Activity}
          emptyTitle="No analysis runs found"
          emptyDescription="No analysis runs match your filters."
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-8" />
                <TableHead className="w-16">ID</TableHead>
                <TableHead>Site</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Duration</TableHead>
                <SortHeader
                  column="created_at"
                  label="Created"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead className="w-16" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {runs.data.map((run) => (
                <TableRow key={run.id}>
                  <TableCell>
                    {cancellableStatuses.includes(run.status) && (
                      <Checkbox
                        checked={selectedIds.has(run.id)}
                        onCheckedChange={() => toggleSelect(run.id)}
                        aria-label={`Select run ${run.id}`}
                      />
                    )}
                  </TableCell>
                  <TableCell className="font-mono text-xs">{run.id}</TableCell>
                  <TableCell>
                    {run.site_id ? (
                      <a
                        href={route('admin.sites.show', { site: run.site_id })}
                        className="hover:underline"
                      >
                        <p className="text-sm font-medium text-primary">{run.site_name ?? '—'}</p>
                        <p className="text-xs text-muted-foreground">{run.site_domain}</p>
                      </a>
                    ) : (
                      <div>
                        <p className="text-sm font-medium">{run.site_name ?? '—'}</p>
                        <p className="text-xs text-muted-foreground">{run.site_domain}</p>
                      </div>
                    )}
                  </TableCell>
                  <TableCell>{statusBadge(run.status)}</TableCell>
                  <TableCell className="text-sm">{formatDuration(run.duration_seconds)}</TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(run.created_at)}
                  </TableCell>
                  <TableCell>
                    <Link
                      href={route('admin.analysis-runs.show', { analysisRun: run.id })}
                      className="text-xs text-primary hover:underline"
                    >
                      View
                    </Link>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>
      <ConfirmDialog
        open={cancelConfirm}
        onOpenChange={setCancelConfirm}
        title="Cancel selected analysis runs?"
        description={`This will cancel ${selectedIds.size} analysis run(s) that are pending or processing.`}
        confirmLabel="Cancel Runs"
        variant="destructive"
        onConfirm={handleBulkCancel}
      />
    </AdminLayout>
  );
}