'use client';

import { useTransition } from 'react';
import { format } from 'date-fns';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';
import { handleShiftSwapResponse } from '@/lib/actions';
import { type LeaveRequest } from '@/lib/types';
import { Check, Loader2, X } from 'lucide-react';

type Translation = {
    from: string;
    request: string;
    reason: string;
    noTasks: string;
    coverShift: string;
    approve: string;
    reject: string;
}

export default function MyTasksTable({ requests, t }: { requests: LeaveRequest[], t: Translation }) {
  const [isPending, startTransition] = useTransition();
  const { toast } = useToast();

  const handleAction = (requestId: string, approved: boolean) => {
    startTransition(async () => {
      const result = await handleShiftSwapResponse(requestId, approved);

      if (result.success) {
        toast({
          title: 'Success',
          description: result.message,
        });
      } else {
        toast({
          title: 'Error',
          description: result.error,
          variant: 'destructive',
        });
      }
    });
  };

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead className="text-start">{t.from}</TableHead>
          <TableHead className="text-start">{t.request}</TableHead>
          <TableHead className="text-start">{t.reason}</TableHead>
          <TableHead className="text-end">Actions</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {requests.length === 0 && (
          <TableRow>
            <TableCell colSpan={4} className="h-24 text-center text-muted-foreground">
              {t.noTasks}
            </TableCell>
          </TableRow>
        )}
        {requests.map((request) => (
          <TableRow key={request.id}>
            <TableCell className="font-medium text-start">{request.employeeName}</TableCell>
            <TableCell className="text-start">
              {request.requestType === 'shift-swap' && request.shiftDate
                ? t.coverShift.replace('{date}', format(request.shiftDate, 'MMM d, yyyy'))
                : 'General Request'}
            </TableCell>
            <TableCell className="text-start">{request.reason}</TableCell>
            <TableCell className="text-end">
              {request.status === 'pending' && (
                <div className="flex gap-2 justify-end">
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleAction(request.id, true)}
                    disabled={isPending}
                    className="text-green-600 border-green-600 hover:bg-green-50 hover:text-green-700"
                  >
                    {isPending ? (
                      <Loader2 className="me-2 h-4 w-4 animate-spin" />
                    ) : (
                      <Check className="me-2 h-4 w-4" />
                    )}
                    {t.approve}
                  </Button>
                  <Button
                    size="sm"
                    variant="outline"
                    onClick={() => handleAction(request.id, false)}
                    disabled={isPending}
                    className="text-red-600 border-red-600 hover:bg-red-50 hover:text-red-700"
                  >
                    {isPending ? (
                      <Loader2 className="me-2 h-4 w-4 animate-spin" />
                    ) : (
                      <X className="me-2 h-4 w-4" />
                    )}
                    {t.reject}
                  </Button>
                </div>
              )}
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}