'use client';

import { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Plus, Pencil, Trash2, GripVertical, X, Check, Bell, Info } from 'lucide-react';
import { toast } from 'sonner';

import { lookupsApi, type LookupItem, type CreateLookupRequest, type UpdateLookupRequest, type FrequencyItem, type OverduePolicy } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { Badge } from '@/components/ui/badge';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';

const lookupTabs = [
  { key: 'categories', label: 'Task Categories', api: lookupsApi.categories },
  { key: 'priorities', label: 'Task Priorities', api: lookupsApi.priorities },
  { key: 'frequencies', label: 'Task Frequencies', api: null }, // Handled separately
  { key: 'residenceTypes', label: 'Residence Types', api: lookupsApi.residenceTypes },
  { key: 'specialties', label: 'Contractor Specialties', api: lookupsApi.specialties },
];

interface LookupTableProps {
  lookupKey: string;
  api: typeof lookupsApi.categories;
}

function LookupTable({ lookupKey, api }: LookupTableProps) {
  const queryClient = useQueryClient();
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editingName, setEditingName] = useState('');
  const [editingOrder, setEditingOrder] = useState(0);
  const [isAdding, setIsAdding] = useState(false);
  const [newName, setNewName] = useState('');
  const [newOrder, setNewOrder] = useState(0);
  const [deleteItem, setDeleteItem] = useState<LookupItem | null>(null);

  const { data: items = [], isLoading } = useQuery({
    queryKey: ['lookups', lookupKey],
    queryFn: () => api.list(),
  });

  const createMutation = useMutation({
    mutationFn: (data: CreateLookupRequest) => api.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lookups', lookupKey] });
      setIsAdding(false);
      setNewName('');
      setNewOrder(0);
      toast.success('Item created successfully');
    },
    onError: () => {
      toast.error('Failed to create item');
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: UpdateLookupRequest }) => api.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lookups', lookupKey] });
      setEditingId(null);
      toast.success('Item updated successfully');
    },
    onError: () => {
      toast.error('Failed to update item');
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => api.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lookups', lookupKey] });
      setDeleteItem(null);
      toast.success('Item deleted successfully');
    },
    onError: () => {
      toast.error('Failed to delete item');
    },
  });

  const handleEdit = (item: LookupItem) => {
    setEditingId(item.id);
    setEditingName(item.name);
    setEditingOrder(item.display_order);
  };

  const handleSave = () => {
    if (!editingId) return;
    updateMutation.mutate({
      id: editingId,
      data: {
        name: editingName,
        display_order: editingOrder,
      },
    });
  };

  const handleCreate = () => {
    if (!newName.trim()) return;
    createMutation.mutate({
      name: newName,
      display_order: newOrder,
    });
  };

  const sortedItems = [...items].sort((a, b) => a.display_order - b.display_order);

  if (isLoading) {
    return <div className="flex items-center justify-center h-32 text-muted-foreground">Loading...</div>;
  }

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button onClick={() => setIsAdding(true)} disabled={isAdding}>
          <Plus className="h-4 w-4 mr-2" />
          Add Item
        </Button>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-12">#</TableHead>
            <TableHead>Name</TableHead>
            <TableHead className="w-24">Order</TableHead>
            <TableHead className="w-32">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {isAdding && (
            <TableRow>
              <TableCell>
                <GripVertical className="h-4 w-4 text-muted-foreground" />
              </TableCell>
              <TableCell>
                <Input
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                  placeholder="Enter name..."
                  className="h-8"
                  autoFocus
                />
              </TableCell>
              <TableCell>
                <Input
                  type="number"
                  value={newOrder}
                  onChange={(e) => setNewOrder(parseInt(e.target.value) || 0)}
                  className="h-8 w-16"
                />
              </TableCell>
              <TableCell>
                <div className="flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={handleCreate}
                    disabled={createMutation.isPending || !newName.trim()}
                  >
                    <Check className="h-4 w-4 text-green-600" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => {
                      setIsAdding(false);
                      setNewName('');
                      setNewOrder(0);
                    }}
                  >
                    <X className="h-4 w-4 text-red-600" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          )}
          {sortedItems.map((item) => (
            <TableRow key={item.id}>
              <TableCell>
                <GripVertical className="h-4 w-4 text-muted-foreground" />
              </TableCell>
              <TableCell>
                {editingId === item.id ? (
                  <Input
                    value={editingName}
                    onChange={(e) => setEditingName(e.target.value)}
                    className="h-8"
                  />
                ) : (
                  item.name
                )}
              </TableCell>
              <TableCell>
                {editingId === item.id ? (
                  <Input
                    type="number"
                    value={editingOrder}
                    onChange={(e) => setEditingOrder(parseInt(e.target.value) || 0)}
                    className="h-8 w-16"
                  />
                ) : (
                  item.display_order
                )}
              </TableCell>
              <TableCell>
                {editingId === item.id ? (
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={handleSave}
                      disabled={updateMutation.isPending}
                    >
                      <Check className="h-4 w-4 text-green-600" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => setEditingId(null)}
                    >
                      <X className="h-4 w-4 text-red-600" />
                    </Button>
                  </div>
                ) : (
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => handleEdit(item)}
                    >
                      <Pencil className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => setDeleteItem(item)}
                    >
                      <Trash2 className="h-4 w-4 text-red-600" />
                    </Button>
                  </div>
                )}
              </TableCell>
            </TableRow>
          ))}
          {sortedItems.length === 0 && !isAdding && (
            <TableRow>
              <TableCell colSpan={4} className="text-center text-muted-foreground py-8">
                No items found. Click &quot;Add Item&quot; to create one.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

      <AlertDialog open={!!deleteItem} onOpenChange={(open) => !open && setDeleteItem(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Item</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete &quot;{deleteItem?.name}&quot;? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => deleteItem && deleteMutation.mutate(deleteItem.id)}
              className="bg-red-600 hover:bg-red-700"
            >
              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

// Specialized table for frequencies that shows notification schedules
function FrequenciesTable() {
  const queryClient = useQueryClient();
  const [editingId, setEditingId] = useState<number | null>(null);
  const [editingName, setEditingName] = useState('');
  const [editingOrder, setEditingOrder] = useState(0);
  const [isAdding, setIsAdding] = useState(false);
  const [newName, setNewName] = useState('');
  const [newOrder, setNewOrder] = useState(0);
  const [deleteItem, setDeleteItem] = useState<FrequencyItem | null>(null);

  const { data, isLoading } = useQuery({
    queryKey: ['lookups', 'frequencies'],
    queryFn: () => lookupsApi.frequencies.listWithPolicy(),
  });

  const items = data?.data ?? [];
  const overduePolicy = data?.overdue_policy;

  const createMutation = useMutation({
    mutationFn: (data: CreateLookupRequest) => lookupsApi.frequencies.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lookups', 'frequencies'] });
      setIsAdding(false);
      setNewName('');
      setNewOrder(0);
      toast.success('Frequency created successfully');
    },
    onError: () => {
      toast.error('Failed to create frequency');
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: number; data: UpdateLookupRequest }) => lookupsApi.frequencies.update(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lookups', 'frequencies'] });
      setEditingId(null);
      toast.success('Frequency updated successfully');
    },
    onError: () => {
      toast.error('Failed to update frequency');
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (id: number) => lookupsApi.frequencies.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['lookups', 'frequencies'] });
      setDeleteItem(null);
      toast.success('Frequency deleted successfully');
    },
    onError: () => {
      toast.error('Failed to delete frequency');
    },
  });

  const handleEdit = (item: FrequencyItem) => {
    setEditingId(item.id);
    setEditingName(item.name);
    setEditingOrder(item.display_order);
  };

  const handleSave = () => {
    if (!editingId) return;
    updateMutation.mutate({
      id: editingId,
      data: {
        name: editingName,
        display_order: editingOrder,
      },
    });
  };

  const handleCreate = () => {
    if (!newName.trim()) return;
    createMutation.mutate({
      name: newName,
      display_order: newOrder,
    });
  };

  const sortedItems = [...items].sort((a, b) => a.display_order - b.display_order);

  if (isLoading) {
    return <div className="flex items-center justify-center h-32 text-muted-foreground">Loading...</div>;
  }

  return (
    <div className="space-y-4">
      {/* Overdue Policy Info */}
      {overduePolicy && (
        <div className="p-4 bg-muted/50 rounded-lg border">
          <div className="flex items-center gap-2 mb-2">
            <Bell className="h-4 w-4 text-muted-foreground" />
            <span className="font-medium text-sm">Overdue Reminder Policy</span>
          </div>
          <p className="text-sm text-muted-foreground">{overduePolicy.description}</p>
          <div className="mt-2 flex flex-wrap gap-1">
            {overduePolicy.overdue_days.map((day) => (
              <Badge key={day} variant="secondary" className="text-xs">
                Day {day}
              </Badge>
            ))}
          </div>
        </div>
      )}

      <div className="flex justify-end">
        <Button onClick={() => setIsAdding(true)} disabled={isAdding}>
          <Plus className="h-4 w-4 mr-2" />
          Add Item
        </Button>
      </div>

      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-12">#</TableHead>
            <TableHead>Name</TableHead>
            <TableHead>Notification Schedule</TableHead>
            <TableHead className="w-24">Order</TableHead>
            <TableHead className="w-32">Actions</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {isAdding && (
            <TableRow>
              <TableCell>
                <GripVertical className="h-4 w-4 text-muted-foreground" />
              </TableCell>
              <TableCell>
                <Input
                  value={newName}
                  onChange={(e) => setNewName(e.target.value)}
                  placeholder="Enter name..."
                  className="h-8"
                  autoFocus
                />
              </TableCell>
              <TableCell>
                <span className="text-muted-foreground text-sm">Auto-assigned based on interval</span>
              </TableCell>
              <TableCell>
                <Input
                  type="number"
                  value={newOrder}
                  onChange={(e) => setNewOrder(parseInt(e.target.value) || 0)}
                  className="h-8 w-16"
                />
              </TableCell>
              <TableCell>
                <div className="flex items-center gap-1">
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={handleCreate}
                    disabled={createMutation.isPending || !newName.trim()}
                  >
                    <Check className="h-4 w-4 text-green-600" />
                  </Button>
                  <Button
                    variant="ghost"
                    size="icon"
                    className="h-8 w-8"
                    onClick={() => {
                      setIsAdding(false);
                      setNewName('');
                      setNewOrder(0);
                    }}
                  >
                    <X className="h-4 w-4 text-red-600" />
                  </Button>
                </div>
              </TableCell>
            </TableRow>
          )}
          {sortedItems.map((item) => (
            <TableRow key={item.id}>
              <TableCell>
                <GripVertical className="h-4 w-4 text-muted-foreground" />
              </TableCell>
              <TableCell>
                {editingId === item.id ? (
                  <Input
                    value={editingName}
                    onChange={(e) => setEditingName(e.target.value)}
                    className="h-8"
                  />
                ) : (
                  <div>
                    <div className="font-medium">{item.name}</div>
                    {item.days !== null && (
                      <div className="text-xs text-muted-foreground">
                        {item.days} day{item.days !== 1 ? 's' : ''} interval
                      </div>
                    )}
                  </div>
                )}
              </TableCell>
              <TableCell>
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <div className="flex items-center gap-2">
                        <Bell className="h-3 w-3 text-muted-foreground" />
                        <span className="text-sm">{item.notification_schedule}</span>
                      </div>
                    </TooltipTrigger>
                    <TooltipContent>
                      <p className="text-xs">Reminder days before due: {item.reminder_days.join(', ') || 'Day-of only'}</p>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              </TableCell>
              <TableCell>
                {editingId === item.id ? (
                  <Input
                    type="number"
                    value={editingOrder}
                    onChange={(e) => setEditingOrder(parseInt(e.target.value) || 0)}
                    className="h-8 w-16"
                  />
                ) : (
                  item.display_order
                )}
              </TableCell>
              <TableCell>
                {editingId === item.id ? (
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={handleSave}
                      disabled={updateMutation.isPending}
                    >
                      <Check className="h-4 w-4 text-green-600" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => setEditingId(null)}
                    >
                      <X className="h-4 w-4 text-red-600" />
                    </Button>
                  </div>
                ) : (
                  <div className="flex items-center gap-1">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => handleEdit(item)}
                    >
                      <Pencil className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => setDeleteItem(item)}
                    >
                      <Trash2 className="h-4 w-4 text-red-600" />
                    </Button>
                  </div>
                )}
              </TableCell>
            </TableRow>
          ))}
          {sortedItems.length === 0 && !isAdding && (
            <TableRow>
              <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
                No frequencies found. Click &quot;Add Item&quot; to create one.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>

      <AlertDialog open={!!deleteItem} onOpenChange={(open) => !open && setDeleteItem(null)}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete Frequency</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete &quot;{deleteItem?.name}&quot;? This action cannot be undone.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => deleteItem && deleteMutation.mutate(deleteItem.id)}
              className="bg-red-600 hover:bg-red-700"
            >
              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}

export default function LookupsPage() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Lookup Tables</h1>
        <p className="text-muted-foreground">
          Manage reference data used throughout the application
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Reference Data</CardTitle>
          <CardDescription>
            Configure task categories, priorities, frequencies, residence types, and contractor specialties
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="categories" className="w-full">
            <TabsList className="grid w-full grid-cols-5">
              {lookupTabs.map((tab) => (
                <TabsTrigger key={tab.key} value={tab.key} className="text-xs">
                  {tab.label}
                </TabsTrigger>
              ))}
            </TabsList>
            {lookupTabs.map((tab) => (
              <TabsContent key={tab.key} value={tab.key} className="mt-4">
                {tab.key === 'frequencies' ? (
                  <FrequenciesTable />
                ) : (
                  <LookupTable lookupKey={tab.key} api={tab.api!} />
                )}
              </TabsContent>
            ))}
          </Tabs>
        </CardContent>
      </Card>
    </div>
  );
}
