import { AlertTriangle, CheckCircle, Globe, MoreHorizontal, RefreshCw, Wifi, XCircle } 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 { ChartErrorBoundary } from '@/Components/admin/ChartErrorBoundary';
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 {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/Components/ui/dropdown-menu';
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 GscConnectionRow {
  id: number;
  site_id: number;
  site_name: string | null;
  site_domain: string | null;
  user_name: string | null;
  user_email: string | null;
  gsc_property_url: string;
  sync_status: string | null;
  last_synced_at: string | null;
  last_sync_failed_at: string | null;
  sync_error: string | null;
  token_expired: boolean;
  failed_refresh_attempts: number;
  created_at: string;
}

interface Props {
  connections: PaginatedResponse<GscConnectionRow>;
  stats: {
    total: number;
    synced: number;
    syncing: number;
    failed: number;
    token_expired: number;
  };
  filters: {
    search?: string;
    status?: string;
    sort?: string;
    dir?: string;
    per_page?: number;
  };
}

const SYNC_STATUS_VARIANTS: Record<string, 'default' | 'secondary' | 'success' | 'destructive' | 'warning' | 'outline'> = {
  synced: 'success',
  syncing: 'warning',
  pending: 'secondary',
  failed: 'destructive',
};

export default function AdminGscConnectionsIndex({ connections, stats, filters }: Props) {
  const searchInputRef = useRef<HTMLInputElement>(null);
  const [syncingId, setSyncingId] = useState<number | null>(null);
  const { search, setSearch, updateFilter, handleSort, handlePage } = useAdminFilters({
    route: '/admin/gsc-connections',
    filters,
  });
  const isNavigating = useNavigationState();
  const exportParams: Record<string, string> = {};
  if (filters.search) exportParams.search = filters.search;
  if (filters.status) exportParams.status = filters.status;

  function handleTriggerSync(conn: GscConnectionRow) {
    if (syncingId !== null) return;
    setSyncingId(conn.id);
    router.post(
      route('admin.gsc-connections.sync', { gscConnection: conn.id }),
      {},
      { onFinish: () => setSyncingId(null) },
    );
  }

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

  const statCards: StatCard[] = [
    { title: 'Total', value: stats.total, icon: Globe },
    { title: 'Synced', value: stats.synced, icon: CheckCircle },
    {
      title: 'Failed',
      value: stats.failed,
      icon: XCircle,
      valueClassName: stats.failed > 0 ? 'text-destructive' : '',
    },
    {
      title: 'Token Expired',
      value: stats.token_expired,
      icon: AlertTriangle,
      valueClassName: stats.token_expired > 0 ? 'text-destructive' : '',
    },
  ];

  return (
    <AdminLayout>
      <Head title="Admin - GSC Connections" />
      <div className="container pt-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>GSC Connections</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>
      <PageHeader
        title="GSC Connections"
        subtitle="Google Search Console OAuth connections across all sites"
        actions={<ExportButton href={route('admin.gsc-connections.export')} params={exportParams} />}
      />

      <div className="container py-8 space-y-4">
        <AdminStatsGrid stats={statCards} />

        <fieldset className="flex flex-col sm:flex-row gap-3 sm:items-center">
          <legend className="sr-only">GSC Connection Filters</legend>
          <Input
            ref={searchInputRef}
            placeholder="Search by site, domain, or property URL..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="max-w-sm"
            aria-label="Search GSC connections"
          />
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(v) => updateFilter({ status: v === 'all' ? undefined : v })}
          >
            <SelectTrigger className="w-45" aria-label="Filter by sync status">
              <SelectValue placeholder="All Statuses" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Statuses</SelectItem>
              <SelectItem value="synced">Synced</SelectItem>
              <SelectItem value="syncing">Syncing</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="failed">Failed</SelectItem>
            </SelectContent>
          </Select>
          <div className="sm:ml-auto">
            <PerPageSelector
              value={filters.per_page ?? 25}
              onChange={(perPage) => updateFilter({ per_page: perPage })}
            />
          </div>
        </fieldset>

        <ChartErrorBoundary label="Unable to load GSC connections table">
          <AdminDataTable
            isEmpty={connections.data.length === 0}
            isNavigating={isNavigating}
            pagination={connections}
            onPage={handlePage}
            paginationLabel="connections"
            emptyIcon={Wifi}
            emptyTitle="No GSC connections found"
            emptyDescription="Google Search Console connections will appear here."
          >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Site</TableHead>
                <TableHead>User</TableHead>
                <TableHead>Property URL</TableHead>
                <TableHead>Sync Status</TableHead>
                <SortHeader column="last_synced_at" label="Last Synced" currentSort={filters.sort} currentDir={filters.dir} onSort={handleSort} />
                <TableHead>Failed Attempts</TableHead>
                <SortHeader column="created_at" label="Connected" currentSort={filters.sort} currentDir={filters.dir} onSort={handleSort} />
                <TableHead className="w-16" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {connections.data.map((conn) => (
                <TableRow key={conn.id}>
                  <TableCell className="max-w-45">
                    <Link href={`/admin/sites/${conn.site_id}`} className="font-medium hover:underline truncate block" title={conn.site_name ?? undefined}>
                      {conn.site_name ?? '—'}
                    </Link>
                    {conn.site_domain && (
                      <div className="text-xs text-muted-foreground truncate" title={conn.site_domain}>{conn.site_domain}</div>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground max-w-40 truncate" title={conn.user_email ?? undefined}>
                    {conn.user_email ?? '—'}
                  </TableCell>
                  <TableCell className="text-xs text-muted-foreground max-w-xs truncate" title={conn.gsc_property_url}>
                    {conn.gsc_property_url}
                  </TableCell>
                  <TableCell>
                    {conn.sync_status ? (
                      <div className="space-y-1">
                        <Badge variant={SYNC_STATUS_VARIANTS[conn.sync_status] ?? 'secondary'}>
                          {conn.sync_status}
                        </Badge>
                        {conn.token_expired && (
                          <Badge variant="destructive" className="text-xs">token expired</Badge>
                        )}
                      </div>
                    ) : (
                      <span className="text-muted-foreground text-sm">—</span>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {conn.sync_status === 'failed' && conn.sync_error ? (
                      <span className="text-destructive text-xs" title={conn.sync_error}>
                        Error
                      </span>
                    ) : (
                      formatRelativeTime(conn.last_synced_at)
                    )}
                  </TableCell>
                  <TableCell className="text-center text-sm text-muted-foreground">
                    {conn.failed_refresh_attempts > 0 ? (
                      <span className="text-destructive font-medium">{conn.failed_refresh_attempts}</span>
                    ) : (
                      '0'
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(conn.created_at)}
                  </TableCell>
                  <TableCell>
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8"
                          aria-label="GSC connection actions"
                        >
                          <MoreHorizontal className="h-4 w-4" />
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuItem asChild>
                          <Link href={`/admin/gsc-connections/${conn.id}`}>View details</Link>
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem
                          onClick={() => handleTriggerSync(conn)}
                          disabled={syncingId !== null}
                        >
                          <RefreshCw className={`mr-2 h-4 w-4 ${syncingId === conn.id ? 'animate-spin' : ''}`} />
                          Trigger re-sync
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          </AdminDataTable>
        </ChartErrorBoundary>
      </div>
    </AdminLayout>
  );
}