import { AlertTriangle, FileSearch, PencilLine, Check } from 'lucide-react';

import { useMemo, useRef, useState } from 'react';

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

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import { SortHeader } from '@/Components/admin/SortHeader';
import PageHeader from '@/Components/layout/PageHeader';
import { Alert, AlertDescription, AlertTitle } from '@/Components/ui/alert';
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 {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { ExportButton } from '@/Components/ui/export-button';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { Textarea } from '@/Components/ui/textarea';
import { useAdminFilters } from '@/hooks/useAdminFilters';
import { useAdminKeyboardShortcuts } from '@/hooks/useAdminKeyboardShortcuts';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatDate } from '@/lib/format';

interface DsarRequest {
  id: number;
  name: string;
  email: string;
  request_type: string;
  status: string;
  admin_notes: string | null;
  created_at: string;
}

interface DsarIndexProps {
  requests: {
    data: DsarRequest[];
    meta: { total: number; current_page: number; last_page: number };
    links: { url: string | null; label: string; active: boolean }[];
  };
  filters: {
    search?: string;
    status?: string;
    request_type?: string;
    date_from?: string;
    date_to?: string;
    sort?: string;
    dir?: string;
    [key: string]: string | number | boolean | undefined;
  };
}

const STATUS_COLORS: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
  pending: 'secondary',
  in_review: 'default',
  completed: 'outline',
  rejected: 'destructive',
};

export default function DsarIndex({ requests, filters }: DsarIndexProps) {
  const searchInputRef = useRef<HTMLInputElement>(null);
  const [selectedIds, setSelectedIds] = useState<number[]>([]);
  const [bulkStatus, setBulkStatus] = useState('in_review');
  const [bulkConfirmOpen, setBulkConfirmOpen] = useState(false);
  const [pendingChange, setPendingChange] = useState<{
    requestId: number;
    newStatus: string;
    requestEmail: string;
  } | null>(null);
  const [editingNotes, setEditingNotes] = useState<{
    requestId: number;
    currentStatus: string;
    notes: string;
  } | null>(null);

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

  function handleBulkUpdate() {
    router.post(
      route('admin.dsar.bulk-update-status'),
      { dsar_ids: selectedIds, status: bulkStatus },
      { onSuccess: () => { setSelectedIds([]); setBulkConfirmOpen(false); } },
    );
  }

  const updateStatus = (id: number, status: string, email: string) => {
    if (status === 'completed' || status === 'rejected') {
      setPendingChange({ requestId: id, newStatus: status, requestEmail: email });
    } else {
      router.patch(route('admin.dsar.update', id), { status }, { preserveState: true, preserveScroll: true });
    }
  };

  const { search, setSearch, updateFilter, handleSort, handlePage, clearFilters } = useAdminFilters({
    route: '/admin/dsar',
    filters: filters ?? {},
    routerOptions: { preserveScroll: true },
  });
  const isNavigating = useNavigationState();

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

  const hasFilters = !!(
    filters.search ||
    filters.status ||
    filters.request_type ||
    filters.date_from ||
    filters.date_to
  );

  const overdueCount = useMemo(() => {
    return requests.data.filter((r) => {
      const days = Math.floor(
        (Date.now() - new Date(r.created_at).getTime()) / (1000 * 60 * 60 * 24),
      );
      return days >= 30 && r.status !== 'completed' && r.status !== 'rejected';
    }).length;
  }, [requests.data]);

  return (
    <AdminLayout>
      <Head title="DSAR Requests" />
      <div className="container py-6 space-y-6">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/admin">Admin</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage aria-current={undefined} className="text-muted-foreground">
                GDPR
              </BreadcrumbPage>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Data Requests</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>

        <PageHeader
          title="Data Subject Access Requests"
          description={`GDPR Art. 15/17 — Respond within 30 days of receipt. Total: ${requests.meta?.total ?? 0}`}
          actions={<ExportButton href={route('admin.dsar.export')} />}
        />

        {overdueCount > 0 && (
          <Alert variant="destructive">
            <AlertTriangle className="h-4 w-4" />
            <AlertTitle>
              {overdueCount} DSAR request{overdueCount !== 1 ? 's' : ''} overdue
            </AlertTitle>
            <AlertDescription>
              GDPR requires response within 30 days. Review overdue requests immediately.
            </AlertDescription>
          </Alert>
        )}

        {/* Filters */}
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">DSAR Filters</legend>
          <Input
            ref={searchInputRef}
            placeholder="Search by name or email..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="max-w-sm"
            aria-label="Search DSAR requests"
          />
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(value) => updateFilter({ status: value === 'all' ? undefined : value })}
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by status">
              <SelectValue placeholder="Status: All" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Status: All</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="in_review">In Review</SelectItem>
              <SelectItem value="completed">Completed</SelectItem>
              <SelectItem value="rejected">Rejected</SelectItem>
            </SelectContent>
          </Select>
          <Select
            value={filters.request_type ?? 'all'}
            onValueChange={(value) =>
              updateFilter({ request_type: value === 'all' ? undefined : value })
            }
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by type">
              <SelectValue placeholder="Type: All" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Type: All</SelectItem>
              <SelectItem value="access">Access</SelectItem>
              <SelectItem value="deletion">Deletion</SelectItem>
              <SelectItem value="rectification">Rectification</SelectItem>
            </SelectContent>
          </Select>
          <Input
            type="date"
            value={filters.date_from ?? ''}
            onChange={(e) => updateFilter({ date_from: e.target.value || undefined })}
            className="w-[160px]"
            aria-label="From date"
          />
          <Input
            type="date"
            value={filters.date_to ?? ''}
            onChange={(e) => updateFilter({ date_to: e.target.value || undefined })}
            className="w-[160px]"
            aria-label="To date"
          />
          {hasFilters && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              Clear filters
            </Button>
          )}
        </fieldset>

        {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>
            <Select value={bulkStatus} onValueChange={setBulkStatus}>
              <SelectTrigger className="w-[140px] h-8">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="pending">Pending</SelectItem>
                <SelectItem value="in_review">In Review</SelectItem>
                <SelectItem value="completed">Completed</SelectItem>
                <SelectItem value="rejected">Rejected</SelectItem>
              </SelectContent>
            </Select>
            <Button size="sm" onClick={() => setBulkConfirmOpen(true)}>
              <Check className="h-3.5 w-3.5 mr-1" />
              Update Status
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setSelectedIds([])}>
              Clear
            </Button>
          </div>
        )}

        <AdminDataTable
          isEmpty={requests.data.length === 0}
          isNavigating={isNavigating}
          pagination={{
            current_page: requests.meta.current_page,
            last_page: requests.meta.last_page,
            from: null,
            to: null,
            total: requests.meta.total,
          }}
          onPage={handlePage}
          paginationLabel="requests"
          emptyIcon={FileSearch}
          emptyTitle="No DSAR requests"
          emptyDescription={
            hasFilters
              ? 'No requests match your search.'
              : 'No data subject access requests have been submitted.'
          }
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead className="w-8" />
                <TableHead scope="col">ID</TableHead>
                <SortHeader
                  column="name"
                  label="Name"
                  currentSort={filters?.sort}
                  currentDir={filters?.dir}
                  onSort={handleSort}
                />
                <TableHead scope="col">Type</TableHead>
                <SortHeader
                  column="status"
                  label="Status"
                  currentSort={filters?.sort}
                  currentDir={filters?.dir}
                  onSort={handleSort}
                />
                <SortHeader
                  column="created_at"
                  label="Received"
                  currentSort={filters?.sort}
                  currentDir={filters?.dir}
                  onSort={handleSort}
                />
                <TableHead scope="col">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {requests.data.map((r) => {
                const days = Math.floor(
                  (Date.now() - new Date(r.created_at).getTime()) / (1000 * 60 * 60 * 24),
                );
                const isUrgent =
                  days >= 20 && r.status !== 'completed' && r.status !== 'rejected';

                return (
                  <TableRow
                    key={r.id}
                    className={isUrgent ? 'bg-destructive/5 hover:bg-destructive/10' : undefined}
                  >
                    <TableCell>
                      <Checkbox
                        checked={selectedIds.includes(r.id)}
                        onCheckedChange={() => toggleSelect(r.id)}
                        aria-label={`Select request ${r.id}`}
                      />
                    </TableCell>
                    <TableCell className="font-mono text-xs text-muted-foreground">
                      #{r.id}
                    </TableCell>
                    <TableCell className="max-w-[180px]">
                      <span className="truncate block font-medium" title={r.name}>{r.name}</span>
                      <span className="truncate block text-xs text-muted-foreground" title={r.email}>{r.email}</span>
                    </TableCell>
                    <TableCell>
                      <Badge variant="outline">{r.request_type}</Badge>
                    </TableCell>
                    <TableCell>
                      <Badge variant={STATUS_COLORS[r.status] ?? 'default'}>
                        {r.status.replaceAll('_', ' ')}
                      </Badge>
                      {isUrgent && (
                        <span className="ml-2 text-xs text-destructive font-medium">{days}d</span>
                      )}
                    </TableCell>
                    <TableCell className="text-muted-foreground text-xs">
                      {formatDate(r.created_at)}
                    </TableCell>
                    <TableCell>
                      <div className="flex items-center gap-2">
                        <Select value={r.status} onValueChange={(v) => updateStatus(r.id, v, r.email)}>
                          <SelectTrigger className="h-8 w-32">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            <SelectItem value="pending">Pending</SelectItem>
                            <SelectItem value="in_review">In Review</SelectItem>
                            <SelectItem value="completed">Completed</SelectItem>
                            <SelectItem value="rejected">Rejected</SelectItem>
                          </SelectContent>
                        </Select>
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 shrink-0"
                          aria-label={r.admin_notes ? 'Edit notes' : 'Add notes'}
                          title={r.admin_notes ? 'Edit notes' : 'Add notes'}
                          onClick={() =>
                            setEditingNotes({
                              requestId: r.id,
                              currentStatus: r.status,
                              notes: r.admin_notes ?? '',
                            })
                          }
                        >
                          <PencilLine className={`h-3.5 w-3.5 ${r.admin_notes ? 'text-primary' : ''}`} />
                        </Button>
                      </div>
                      {r.admin_notes && (
                        <p
                          className="text-xs text-muted-foreground mt-1 italic line-clamp-2"
                          title={r.admin_notes}
                        >
                          {r.admin_notes}
                        </p>
                      )}
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </AdminDataTable>
      </div>

      <Dialog
        open={editingNotes !== null}
        onOpenChange={(open) => { if (!open) setEditingNotes(null); }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Admin Notes</DialogTitle>
          </DialogHeader>
          <div className="space-y-2">
            <Label htmlFor="admin-notes">Notes (internal only)</Label>
            <Textarea
              id="admin-notes"
              rows={4}
              value={editingNotes?.notes ?? ''}
              onChange={(e) =>
                setEditingNotes((prev) => prev ? { ...prev, notes: e.target.value } : null)
              }
              placeholder="Add internal notes about this request..."
            />
          </div>
          <p className="text-sm text-muted-foreground">
            Saving notes and updating the request status are separate actions.
            Use the status dropdown in the table to change the request status after saving your notes.
          </p>
          <DialogFooter>
            <Button variant="outline" onClick={() => setEditingNotes(null)}>
              Cancel
            </Button>
            <Button
              onClick={() => {
                if (editingNotes) {
                  router.patch(
                    route('admin.dsar.update', editingNotes.requestId),
                    { status: editingNotes.currentStatus, admin_notes: editingNotes.notes },
                    { preserveState: true, preserveScroll: true, onSuccess: () => setEditingNotes(null) },
                  );
                }
              }}
            >
              Save Notes
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmDialog
        open={pendingChange !== null}
        onOpenChange={(open) => { if (!open) setPendingChange(null); }}
        title={`Mark request as ${pendingChange?.newStatus}?`}
        description={`This will mark the DSAR request from ${pendingChange?.requestEmail} as "${pendingChange?.newStatus}". This action has legal compliance implications and will be audited.`}
        confirmLabel="Confirm"
        variant="destructive"
        onConfirm={() => {
          if (pendingChange) {
            router.patch(
              route('admin.dsar.update', pendingChange.requestId),
              { status: pendingChange.newStatus },
              { preserveState: true },
            );
          }
          setPendingChange(null);
        }}
      />
      <ConfirmDialog
        open={bulkConfirmOpen}
        onOpenChange={setBulkConfirmOpen}
        title="Bulk Update DSAR Status"
        description={
          (bulkStatus === 'completed' || bulkStatus === 'rejected')
            ? `You are about to mark ${selectedIds.length} DSAR request(s) as "${bulkStatus.replaceAll('_', ' ')}". This is a terminal state with legal compliance implications. Ensure each request has been individually reviewed before proceeding. This action will be audited.`
            : `Update ${selectedIds.length} DSAR request(s) to "${bulkStatus.replaceAll('_', ' ')}"? This action will be audited.`
        }
        confirmLabel={
          (bulkStatus === 'completed' || bulkStatus === 'rejected')
            ? `Confirm: Mark ${selectedIds.length} as ${bulkStatus}`
            : 'Update'
        }
        variant={(bulkStatus === 'completed' || bulkStatus === 'rejected') ? 'destructive' : undefined}
        onConfirm={handleBulkUpdate}
      />
    </AdminLayout>
  );
}