"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { AlertTriangle } from "lucide-react";
import {
  blockAgentSchema,
  type BlockAgentInput,
} from "@/lib/validations/agent";
import type { Agent } from "@/roles/admin/services/agents.service";

interface BlockAgentDialogProps {
  agent: Agent | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: (reason: string) => void;
}

export function BlockAgentDialog({
  agent,
  open,
  onOpenChange,
  onConfirm,
}: BlockAgentDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState(false);

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<BlockAgentInput>({
    resolver: zodResolver(blockAgentSchema),
    defaultValues: { reason: "" },
  });

  const onSubmit = async (data: BlockAgentInput) => {
    setIsSubmitting(true);
    await new Promise((resolve) => setTimeout(resolve, 300));
    onConfirm(data.reason);
    reset();
    setIsSubmitting(false);
  };

  const handleOpenChange = (newOpen: boolean) => {
    if (!newOpen) reset();
    onOpenChange(newOpen);
  };

  if (!agent) return null;

  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10">
              <AlertTriangle
                className="h-5 w-5 text-destructive"
                aria-hidden="true"
              />
            </div>
            <div>
              <DialogTitle>Block Agent</DialogTitle>
              <DialogDescription>
                Block {agent.firstName} {agent.lastName}
              </DialogDescription>
            </div>
          </div>
        </DialogHeader>

        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="block-reason">
              Reason for blocking <span className="text-destructive">*</span>
            </Label>
            <Textarea
              id="block-reason"
              placeholder="Please provide a detailed reason for blocking this agent..."
              className="min-h-[120px] resize-none"
              {...register("reason")}
              aria-invalid={errors.reason ? "true" : "false"}
              aria-describedby={
                errors.reason ? "block-reason-error" : undefined
              }
            />
            {errors.reason && (
              <p
                id="block-reason-error"
                className="text-sm text-destructive"
                role="alert"
              >
                {errors.reason.message}
              </p>
            )}
          </div>

          <DialogFooter className="gap-2 sm:gap-0">
            <Button
              type="button"
              variant="outline"
              onClick={() => handleOpenChange(false)}
              disabled={isSubmitting}
            >
              Cancel
            </Button>
            <Button type="submit" variant="destructive" disabled={isSubmitting}>
              {isSubmitting ? "Blocking..." : "Block Agent"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}