import { useState } from "react";
import { useMutation } from "@tanstack/react-query";
import { useAuth } from "@/hooks/useAuth";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
import { SendHorizonal, CheckCircle2, Loader2 } from "lucide-react";
import { toast } from "sonner";

const csrfToken = () =>
  (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? '';

interface RequestBookingButtonProps {
  courseId: string;
  courseTitle: string;
  startDate: string;
  venueId?: string | null;
  venueName?: string;
  trainerId?: string | null;
  disabled?: boolean;
}

const RequestBookingButton = ({
  courseId,
  courseTitle,
  startDate,
  venueId,
  venueName,
  trainerId,
  disabled,
}: RequestBookingButtonProps) => {
  const { user, hasRole, companyId } = useAuth();
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [submitted, setSubmitted] = useState(false);

  // Only show for delegates who belong to a company
  const isCompanyDelegate = hasRole("delegate") && !!companyId;

  const submitRequest = useMutation({
    mutationFn: async () => {
      if (!user || !companyId) throw new Error("Not authenticated");

      const fullName = user.full_name || user.email?.split("@")[0] || "Delegate";

      const res = await fetch('/api/delegate/booking-requests', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken() },
        body: JSON.stringify({
          delegate_user_id: user.id,
          delegate_email: user.email,
          delegate_name: fullName,
          company_id: companyId,
          course_id: courseId,
          start_date: startDate,
          venue_id: venueId || null,
          trainer_id: trainerId || null,
        }),
      });
      if (!res.ok) throw new Error("Failed to submit request");
    },
    onSuccess: () => {
      setSubmitted(true);
      toast.success("Booking request sent to your manager");
    },
    onError: (e: Error) => {
      toast.error(e.message);
    },
  });

  if (!isCompanyDelegate) return null;

  return (
    <>
      <Button
        variant="outline"
        size="lg"
        className="w-full mt-2 border-primary text-primary hover:bg-primary/5 hover:text-primary"
        disabled={disabled || submitted}
        onClick={() => setConfirmOpen(true)}
      >
        <SendHorizonal className="w-4 h-4 mr-2" />
        {submitted ? "Request Sent ✓" : "Request Booking (Manager Approval)"}
      </Button>

      <Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <DialogContent className="sm:max-w-md">
          <DialogHeader>
            <DialogTitle>Request Booking Approval</DialogTitle>
            <DialogDescription>
              Your manager will be notified and must approve this booking before it is confirmed. Payment will be charged to your company's account.
            </DialogDescription>
          </DialogHeader>

          {submitted ? (
            <div className="py-6 text-center">
              <CheckCircle2 className="w-12 h-12 mx-auto text-green-600 mb-3" />
              <p className="text-sm font-medium text-foreground">Request submitted!</p>
              <p className="text-xs text-muted-foreground mt-1">Your manager has been notified.</p>
            </div>
          ) : (
            <div className="space-y-4">
              <div className="bg-muted/50 rounded-lg p-4 space-y-2 text-sm">
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Course</span>
                  <span className="font-medium text-foreground">{courseTitle}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-muted-foreground">Date</span>
                  <span className="font-medium text-foreground">
                    {new Date(startDate).toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short", year: "numeric" })}
                  </span>
                </div>
                {venueName && (
                  <div className="flex justify-between">
                    <span className="text-muted-foreground">Location</span>
                    <span className="font-medium text-foreground">{venueName}</span>
                  </div>
                )}
              </div>

              <div className="flex gap-2">
                <Button variant="outline" className="flex-1" onClick={() => setConfirmOpen(false)}>
                  Cancel
                </Button>
                <Button
                  className="flex-1"
                  onClick={() => submitRequest.mutate()}
                  disabled={submitRequest.isPending}
                >
                  {submitRequest.isPending ? (
                    <><Loader2 className="w-4 h-4 mr-2 animate-spin" /> Sending…</>
                  ) : (
                    <><SendHorizonal className="w-4 h-4 mr-2" /> Send Request</>
                  )}
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </>
  );
};

export default RequestBookingButton;