import { Clock, Link2 } from 'lucide-react';
import { toast } from 'sonner';

import { useRef, useState } from 'react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import AdminPage from '@/Components/admin/AdminPage';
import { PerPageSelector } from '@/Components/admin/PerPageSelector';
import { SortHeader } from '@/Components/admin/SortHeader';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
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 { useMutationButton } from '@/hooks/useMutationButton';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatProviderName, formatRelativeTime } from '@/lib/format';
import type { AdminSocialAccountsIndexProps } from '@/types/admin';

export default function SocialAccountsIndex({
  accounts,
  filters,
  providers,
}: AdminSocialAccountsIndexProps) {
  const { updateFilter, handleSort, handlePage, clearFilters } = useAdminFilters({
    route: '/admin/social-accounts',
    filters,
  });
  const isNavigating = useNavigationState();
  const [confirmId, setConfirmId] = useState<number | null>(null);
  const disconnectResolveRef = useRef<(() => void) | null>(null);
  const disconnectRejectRef = useRef<(() => void) | null>(null);
  const disconnectIdRef = useRef<number | null>(null);

  const { processing: isDisconnecting, onClick: triggerDisconnect } = useMutationButton(
    (opts) => router.delete(route('admin.social-accounts.destroy', disconnectIdRef.current ?? 0), {
      ...opts,
      onSuccess: () => {
        toast.success('Social account disconnected.');
        setConfirmId(null);
        disconnectResolveRef.current?.();
        opts.onFinish?.();
      },
      onError: (errors) => {
        toast.error("Couldn't disconnect that account. Retry, or remove it via the OAuth provider.");
        disconnectRejectRef.current?.();
        opts.onError?.(errors);
      },
    }),
  );

  const hasFilters = !!filters.provider;

  function handleDisconnect(): Promise<void> {
    if (confirmId === null) return Promise.resolve();
    disconnectIdRef.current = confirmId;
    return new Promise((resolve, reject) => {
      disconnectResolveRef.current = resolve;
      disconnectRejectRef.current = reject;
      triggerDisconnect();
    });
  }

  return (
    <AdminLayout>
      <AdminPage
        title="Social Accounts"
        subtitle="All linked OAuth social accounts"
        breadcrumbs={[
          { label: 'Admin', href: '/admin' },
          { label: 'Social Auth', href: route('admin.social-auth') },
          { label: 'Accounts' },
        ]}
      >
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">Account Filters</legend>
          <Select
            value={filters.provider ?? 'all'}
            onValueChange={(value) =>
              updateFilter({ provider: value === 'all' ? undefined : value })
            }
          >
            <SelectTrigger className="w-[180px]" aria-label="Filter by provider">
              <SelectValue placeholder="Provider: All" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Provider: All</SelectItem>
              {providers.map((p) => (
                <SelectItem key={p} value={p}>
                  {formatProviderName(p)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {hasFilters && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              Clear filters
            </Button>
          )}
          <div className="sm:ml-auto">
            <PerPageSelector
              value={filters.per_page ?? 25}
              onChange={(perPage) => updateFilter({ per_page: perPage })}
            />
          </div>
        </fieldset>

        <AdminDataTable
          isEmpty={accounts.data.length === 0}
          isNavigating={isNavigating}
          pagination={accounts}
          onPage={handlePage}
          paginationLabel="accounts"
          emptyVariant={hasFilters ? 'filtered' : undefined}
          emptyIcon={Link2}
          emptyTitle={hasFilters ? 'No accounts match your filters' : 'No social accounts linked yet'}
          emptyDescription={
            hasFilters ? undefined : 'Social accounts appear when users connect OAuth providers.'
          }
          emptyPrimaryAction={
            hasFilters ? { label: 'Clear filters', onClick: clearFilters } : undefined
          }
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>User</TableHead>
                <TableHead>Provider</TableHead>
                <TableHead>Provider ID</TableHead>
                <TableHead>Token</TableHead>
                <SortHeader
                  column="created_at"
                  label="Linked"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <TableHead className="w-[100px]" />
              </TableRow>
            </TableHeader>
            <TableBody>
              {accounts.data.map((a) => (
                <TableRow key={a.id}>
                  <TableCell>
                    <Link
                      href={`/admin/users/${a.user_id}`}
                      className="font-medium text-sm hover:underline"
                    >
                      {a.user_name}
                    </Link>
                    <div className="text-xs text-muted-foreground">{a.user_email}</div>
                  </TableCell>
                  <TableCell>
                    <Badge variant="outline">{formatProviderName(a.provider)}</Badge>
                  </TableCell>
                  <TableCell className="font-mono text-xs text-muted-foreground max-w-[140px] truncate">
                    {a.provider_id}
                  </TableCell>
                  <TableCell>
                    {a.is_expired ? (
                      <Badge variant="destructive" className="gap-1">
                        <Clock className="size-3" />
                        Expired
                      </Badge>
                    ) : a.token_expires_at ? (
                      <Badge variant="success">Active</Badge>
                    ) : (
                      <span className="text-xs text-muted-foreground">No expiry</span>
                    )}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(a.created_at)}
                  </TableCell>
                  <TableCell>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="text-destructive hover:text-destructive"
                      onClick={() => setConfirmId(a.id)}
                      disabled={isDisconnecting}
                    >
                      Disconnect
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
        <ConfirmDialog
          open={confirmId !== null}
          onOpenChange={(open) => {
            if (!open) setConfirmId(null);
          }}
          onConfirm={handleDisconnect}
          title="Disconnect Social Account"
          description="This will permanently remove this social account link. The user will need to reconnect their account."
          variant="destructive"
          confirmLabel="Disconnect"
        />
      </AdminPage>
    </AdminLayout>
  );
}