'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import Link from 'next/link';
import { ImagePlus, Trash2, Search, ChevronLeft, ChevronRight, ExternalLink } from 'lucide-react';
import { toast } from 'sonner';

import { documentImagesApi, type DocumentImage, type DocumentImageListParams } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Checkbox } from '@/components/ui/checkbox';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';

export default function DocumentImagesPage() {
  const queryClient = useQueryClient();
  const [params, setParams] = useState<DocumentImageListParams>({
    page: 1,
    per_page: 20,
  });
  const [search, setSearch] = useState('');
  const [selectedRows, setSelectedRows] = useState<number[]>([]);

  const { data, isLoading, error } = useQuery({
    queryKey: ['document-images', params],
    queryFn: () => documentImagesApi.list(params),
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => documentImagesApi.delete(id),
    onSuccess: () => {
      toast.success('Document image deleted successfully');
      queryClient.invalidateQueries({ queryKey: ['document-images'] });
    },
    onError: () => {
      toast.error('Failed to delete document image');
    },
  });

  const bulkDeleteMutation = useMutation({
    mutationFn: (ids: number[]) => documentImagesApi.bulkDelete(ids),
    onSuccess: () => {
      toast.success('Document images deleted successfully');
      queryClient.invalidateQueries({ queryKey: ['document-images'] });
      setSelectedRows([]);
    },
    onError: () => {
      toast.error('Failed to delete document images');
    },
  });

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    setParams({ ...params, search, page: 1 });
  };

  const handleSelectAll = (checked: boolean) => {
    if (checked && data?.data) {
      setSelectedRows(data.data.map((img) => img.id));
    } else {
      setSelectedRows([]);
    }
  };

  const handleSelectRow = (id: number, checked: boolean) => {
    if (checked) {
      setSelectedRows([...selectedRows, id]);
    } else {
      setSelectedRows(selectedRows.filter((rowId) => rowId !== id));
    }
  };

  const totalPages = data ? Math.ceil(data.total / (params.per_page || 20)) : 0;

  if (error) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-red-500">Failed to load document images</div>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">Document Images</h1>
          <p className="text-muted-foreground">
            Manage images attached to documents
          </p>
        </div>
      </div>

      {/* Search and Bulk Actions */}
      <div className="flex items-center justify-between gap-4">
        <form onSubmit={handleSearch} className="flex gap-2 flex-1 max-w-md">
          <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
              placeholder="Search by URL or caption..."
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              className="pl-9"
            />
          </div>
          <Button type="submit" variant="secondary">
            Search
          </Button>
        </form>

        {selectedRows.length > 0 && (
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button variant="destructive">
                <Trash2 className="mr-2 h-4 w-4" />
                Delete Selected ({selectedRows.length})
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Selected Images?</AlertDialogTitle>
                <AlertDialogDescription>
                  This will permanently delete {selectedRows.length} image(s).
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => bulkDeleteMutation.mutate(selectedRows)}
                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                >
                  Delete
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        )}
      </div>

      {/* Table */}
      <div className="rounded-md border">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-12">
                <Checkbox
                  checked={
                    data?.data &&
                    data.data.length > 0 &&
                    selectedRows.length === data.data.length
                  }
                  onCheckedChange={handleSelectAll}
                />
              </TableHead>
              <TableHead>ID</TableHead>
              <TableHead>Preview</TableHead>
              <TableHead>Document</TableHead>
              <TableHead>Residence</TableHead>
              <TableHead>Caption</TableHead>
              <TableHead>Created</TableHead>
              <TableHead className="w-24">Actions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-8">
                  Loading...
                </TableCell>
              </TableRow>
            ) : data?.data?.length === 0 ? (
              <TableRow>
                <TableCell colSpan={7} className="text-center py-8">
                  No document images found
                </TableCell>
              </TableRow>
            ) : (
              data?.data?.map((img) => (
                <TableRow key={img.id}>
                  <TableCell>
                    <Checkbox
                      checked={selectedRows.includes(img.id)}
                      onCheckedChange={(checked) =>
                        handleSelectRow(img.id, checked as boolean)
                      }
                    />
                  </TableCell>
                  <TableCell className="font-mono text-sm text-muted-foreground">{img.id}</TableCell>
                  <TableCell>
                    {img.image_url ? (
                      <a href={img.image_url} target="_blank" rel="noopener noreferrer">
                        <img
                          src={img.image_url}
                          alt={img.caption || 'Document image'}
                          className="w-12 h-12 object-cover rounded"
                        />
                      </a>
                    ) : (
                      <div className="w-12 h-12 bg-gray-100 rounded flex items-center justify-center">
                        <ImagePlus className="h-6 w-6 text-gray-400" />
                      </div>
                    )}
                  </TableCell>
                  <TableCell>
                    <Link
                      href={`/documents/${img.document_id}`}
                      className="font-medium text-blue-600 hover:underline"
                    >
                      {img.document_title || `Document #${img.document_id}`}
                    </Link>
                  </TableCell>
                  <TableCell>
                    <Link
                      href={`/residences/${img.residence_id}`}
                      className="text-blue-600 hover:underline"
                    >
                      {img.residence_name || `#${img.residence_id}`}
                    </Link>
                  </TableCell>
                  <TableCell>
                    <span className="truncate max-w-[200px] block">
                      {img.caption || '-'}
                    </span>
                  </TableCell>
                  <TableCell>
                    {new Date(img.created_at).toLocaleDateString()}
                  </TableCell>
                  <TableCell>
                    <div className="flex gap-1">
                      {img.image_url && (
                        <a href={img.image_url} target="_blank" rel="noopener noreferrer">
                          <Button variant="ghost" size="icon">
                            <ExternalLink className="h-4 w-4" />
                          </Button>
                        </a>
                      )}
                      <AlertDialog>
                        <AlertDialogTrigger asChild>
                          <Button
                            variant="ghost"
                            size="icon"
                            className="text-red-600 hover:text-red-700 hover:bg-red-50"
                          >
                            <Trash2 className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Delete Image?</AlertDialogTitle>
                            <AlertDialogDescription>
                              This will permanently delete this document image.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction
                              onClick={() => deleteMutation.mutate(img.id)}
                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
                            >
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>

      {/* Pagination */}
      {data && totalPages > 1 && (
        <div className="flex items-center justify-between">
          <div className="text-sm text-muted-foreground">
            Showing {((params.page || 1) - 1) * (params.per_page || 20) + 1} to{' '}
            {Math.min(
              (params.page || 1) * (params.per_page || 20),
              data.total
            )}{' '}
            of {data.total} images
          </div>
          <div className="flex items-center gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={(params.page || 1) <= 1}
              onClick={() =>
                setParams({ ...params, page: (params.page || 1) - 1 })
              }
            >
              <ChevronLeft className="h-4 w-4" />
              Previous
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={(params.page || 1) >= totalPages}
              onClick={() =>
                setParams({ ...params, page: (params.page || 1) + 1 })
              }
            >
              Next
              <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}
