import { AlertCircle, AlertTriangle, Bell, Check, Info, Search, X } from 'lucide-react';

import { useRef, useState } from 'react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import { AdminStatsGrid, type StatCard } from '@/Components/admin/AdminStatsGrid';
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 { 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';

interface TrafficAlertRow {
  id: number;
  site_id: number;
  site_name: string | null;
  site_domain: string | null;
  severity: string;
  anomaly_type: string;
  status: string;
  page_url: string;
  metrics: Record<string, unknown> | null;
  created_at: string;
}

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

interface Props {
  alerts: PaginatedAlerts;
  filters: {
    search?: string;
    severity?: string;
    status?: string;
    sort?: string;
    dir?: string;
    date_from?: string;
    date_to?: string;
  };
  stats: {
    critical: number;
    warning: number;
    info: number;
    unacknowledged: number;
  };
}

const severityBadge = (severity: string) => {
  const config: Record<
    string,
    { variant: 'default' | 'secondary' | 'destructive' | 'outline'; icon: typeof AlertCircle }
  > = {
    critical: { variant: 'destructive', icon: AlertCircle },
    warning: { variant: 'secondary', icon: AlertTriangle },
    info: { variant: 'outline', icon: Info },
  };
  const { variant, icon: Icon } = config[severity] ?? { variant: 'outline' as const, icon: Info };
  return (
    <Badge variant={variant} className="gap-1">
      <Icon className="h-3 w-3" />
      {severity}
    </Badge>
  );
};

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

  function toggleSelect(id: number) {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
    );
  }

  function handleBulkAcknowledge() {
    if (selectedIds.length === 0) return;
    router.post(
      route('admin.traffic-alerts.bulk-acknowledge'),
      { alert_ids: selectedIds },
      { onSuccess: () => setSelectedIds([]) },
    );
  }

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

  const statCards: StatCard[] = [
    {
      title: 'Critical',
      value: stats.critical,
      icon: AlertCircle,
      valueClassName: stats.critical > 0 ? 'text-destructive' : '',
    },
    { title: 'Warning', value: stats.warning, icon: AlertTriangle },
    { title: 'Info', value: stats.info, icon: Info },
    { title: 'Unacknowledged', value: stats.unacknowledged, icon: Bell },
  ];

  return (
    <AdminLayout>
      <Head title="Traffic Alerts" />
      <div className="container py-6 space-y-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Traffic Alerts</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <PageHeader
          title="Traffic Alerts"
          description="Cross-site traffic anomaly alerts"
          actions={
            <ExportButton
              href={route('admin.traffic-alerts.export')}
              params={{
                ...(filters.search ? { search: filters.search } : {}),
                ...(filters.severity ? { severity: filters.severity } : {}),
                ...(filters.status ? { status: filters.status } : {}),
              }}
            />
          }
        />

        <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 URL or site..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <Select
            value={filters.severity ?? 'all'}
            onValueChange={(val) => updateFilter({ severity: val === 'all' ? undefined : val })}
          >
            <SelectTrigger className="w-[140px]" aria-label="Filter by severity">
              <SelectValue placeholder="All severities" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="critical">Critical</SelectItem>
              <SelectItem value="warning">Warning</SelectItem>
              <SelectItem value="info">Info</SelectItem>
            </SelectContent>
          </Select>
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(val) => updateFilter({ status: val === 'all' ? undefined : val })}
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by status">
              <SelectValue placeholder="All statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All</SelectItem>
              <SelectItem value="unacknowledged">Unacknowledged</SelectItem>
              <SelectItem value="acknowledged">Acknowledged</SelectItem>
              <SelectItem value="dismissed">Dismissed</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"
          />
        </div>

        {selectedIds.length > 0 && (
          <div className="flex items-center gap-3 p-3 rounded-lg border bg-muted/40">
            <span className="text-sm text-muted-foreground">{selectedIds.length} selected</span>
            <Button size="sm" variant="outline" onClick={handleBulkAcknowledge}>
              <Check className="h-3.5 w-3.5 mr-1" />
              Acknowledge Selected
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setSelectedIds([])}>
              Clear selection
            </Button>
          </div>
        )}

        <AdminDataTable
          isEmpty={alerts.data.length === 0}
          isNavigating={isNavigating}
          pagination={alerts}
          onPage={handlePage}
          paginationLabel="alerts"
          emptyIcon={Bell}
          emptyTitle="No traffic alerts"
          emptyDescription="No traffic anomalies detected."
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-8">
                  <Checkbox
                    checked={
                      alerts.data.filter((a) => a.status === 'unacknowledged').length > 0 &&
                      alerts.data
                        .filter((a) => a.status === 'unacknowledged')
                        .every((a) => selectedIds.includes(a.id))
                    }
                    onCheckedChange={(checked) => {
                      const unackIds = alerts.data
                        .filter((a) => a.status === 'unacknowledged')
                        .map((a) => a.id);
                      setSelectedIds(checked ? unackIds : []);
                    }}
                    aria-label="Select all unacknowledged alerts"
                    disabled={alerts.data.filter((a) => a.status === 'unacknowledged').length === 0}
                  />
                </TableHead>
                <TableHead>Site</TableHead>
                <TableHead>Page URL</TableHead>
                <TableHead>Severity</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>Status</TableHead>
                <SortHeader
                  column="created_at"
                  label="Created"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead className="w-20" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {alerts.data.map((alert) => (
                <TableRow key={alert.id}>
                  <TableCell>
                    {alert.status === 'unacknowledged' && (
                      <Checkbox
                        checked={selectedIds.includes(alert.id)}
                        onCheckedChange={() => toggleSelect(alert.id)}
                        aria-label={`Select alert ${alert.id}`}
                      />
                    )}
                  </TableCell>
                  <TableCell>
                    {alert.site_id ? (
                      <a
                        href={route('admin.sites.show', { site: alert.site_id })}
                        className="hover:underline"
                      >
                        <p className="text-sm font-medium text-primary">{alert.site_name ?? '—'}</p>
                        <p className="text-xs text-muted-foreground">{alert.site_domain}</p>
                      </a>
                    ) : (
                      <div>
                        <p className="text-sm font-medium">{alert.site_name ?? '—'}</p>
                        <p className="text-xs text-muted-foreground">{alert.site_domain}</p>
                      </div>
                    )}
                  </TableCell>
                  <TableCell
                    className="max-w-[200px] truncate text-xs font-mono"
                    title={alert.page_url}
                  >
                    {alert.page_url}
                  </TableCell>
                  <TableCell>{severityBadge(alert.severity)}</TableCell>
                  <TableCell className="text-sm">{alert.anomaly_type.replace(/_/g, ' ')}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{alert.status}</Badge>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(alert.created_at)}
                  </TableCell>
                  <TableCell>
                    {alert.status === 'unacknowledged' && (
                      <div className="flex gap-1">
                        <Button
                          size="icon"
                          variant="ghost"
                          className="h-7 w-7"
                          aria-label="Acknowledge"
                          title="Acknowledge"
                          onClick={() =>
                            router.patch(route('admin.traffic-alerts.acknowledge', alert.id))
                          }
                        >
                          <Check className="h-3.5 w-3.5" />
                        </Button>
                        <Button
                          size="icon"
                          variant="ghost"
                          className="h-7 w-7"
                          aria-label="Dismiss"
                          title="Dismiss"
                          onClick={() =>
                            router.patch(route('admin.traffic-alerts.dismiss', alert.id))
                          }
                        >
                          <X className="h-3.5 w-3.5" />
                        </Button>
                      </div>
                    )}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>
    </AdminLayout>
  );
}