"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { format } from "date-fns";
import { CalendarIcon, ChevronRight, ChevronLeft, Check, Send, X } from "lucide-react";
import { cn } from "@/lib/utils";
import { useTranslations } from "next-intl";
import {
  Dialog,
  DialogContent,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Calendar } from "@/components/ui/calendar";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { toast } from "sonner";
import { getServiceNames, type ServiceName } from "@/services/contacts";
import { submitQuotation } from "@/services/quotations";

const steps = [
  { number: 1, label: "Project Details" },
  { number: 2, label: "Project Specifics" },
  { number: 3, label: "Your Information" },
];

interface FormData {
  // Step 1
  projectLocation: string;
  scopeOfWork: string;
  deliveryDeadline: Date | undefined;
  personnelRequired: string;
  serviceRequested: string;
  // Step 2
  primaryConcerns: string;
  previousInspections: string;
  siteAccessibility: string;
  permitsRequired: string;
  visasRequired: string;
  travelProvided: string;
  // Step 3
  firstName: string;
  lastName: string;
  email: string;
  companyName: string;
}

const initialFormData: FormData = {
  projectLocation: "",
  scopeOfWork: "",
  deliveryDeadline: undefined,
  personnelRequired: "",
  serviceRequested: "",
  primaryConcerns: "",
  previousInspections: "",
  siteAccessibility: "",
  permitsRequired: "",
  visasRequired: "",
  travelProvided: "",
  firstName: "",
  lastName: "",
  email: "",
  companyName: "",
};

interface RequestQuoteModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
}

const RequestQuoteModal = ({ open, onOpenChange }: RequestQuoteModalProps) => {
  const t = useTranslations("quote");
  const [currentStep, setCurrentStep] = useState(1);
  const [formData, setFormData] = useState<FormData>(initialFormData);
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [serviceOptions, setServiceOptions] = useState<ServiceName[]>([]);
  const [isSubmitting, setIsSubmitting] = useState(false);

  const steps = [
    { number: 1, label: t("steps.projectDetails") },
    { number: 2, label: t("steps.projectSpecifics") },
    { number: 3, label: t("steps.yourInformation") },
  ];

  useEffect(() => {
    getServiceNames()
      .then(setServiceOptions)
      .catch(() => {});
  }, []);


  const updateField = (field: keyof FormData, value: string | Date | undefined) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors((prev) => {
        const next = { ...prev };
        delete next[field];
        return next;
      });
    }
  };

  const validateStep = (step: number): boolean => {
    const newErrors: Record<string, string> = {};
    if (step === 1) {
      if (!formData.projectLocation.trim()) newErrors.projectLocation = t("validation.required");
    }
    if (step === 3) {
      if (!formData.firstName.trim()) newErrors.firstName = t("validation.required");
      if (!formData.lastName.trim()) newErrors.lastName = t("validation.required");
      if (!formData.email.trim()) newErrors.email = t("validation.required");
      else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) newErrors.email = t("validation.invalidEmail");
      if (!formData.companyName.trim()) newErrors.companyName = t("validation.required");
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleNext = () => {
    if (validateStep(currentStep)) setCurrentStep((s) => Math.min(s + 1, 3));
  };

  const handleBack = () => setCurrentStep((s) => Math.max(s - 1, 1));

  const handleSubmit = async () => {
    if (!validateStep(3)) return;

    // resolve service_id from the selected title; 'others' or unset → null
    const matchedService = serviceOptions.find((s) => s.title === formData.serviceRequested);
    const serviceId = matchedService ? matchedService.id : null;

    setIsSubmitting(true);
    try {
      await submitQuotation({
        project_location: formData.projectLocation.trim(),
        scope_of_work: formData.scopeOfWork.trim() || undefined,
        delivery_deadline: formData.deliveryDeadline
          ? format(formData.deliveryDeadline, "yyyy-MM-dd")
          : undefined,
        personnel_required: formData.personnelRequired
          ? Number(formData.personnelRequired)
          : undefined,
        service_id: serviceId,
        primary_concerns: formData.primaryConcerns.trim() || undefined,
        previous_inspections: formData.previousInspections || undefined,
        site_accessibility: formData.siteAccessibility || undefined,
        permits_required: formData.permitsRequired || undefined,
        visas_required: formData.visasRequired || undefined,
        travel_provided: formData.travelProvided || undefined,
        first_name: formData.firstName.trim(),
        last_name: formData.lastName.trim(),
        email: formData.email.trim(),
        company_name: formData.companyName.trim(),
      });
      toast.success(t("successToast"));
      setFormData(initialFormData);
      setCurrentStep(1);
      setErrors({});
      onOpenChange(false);
    } catch {
      // errors handled globally by API interceptor
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleClose = (isOpen: boolean) => {
    if (!isOpen) {
      setCurrentStep(1);
      setErrors({});
    }
    onOpenChange(isOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="w-[768px] sm:max-w-none p-0 gap-0 overflow-hidden rounded-sm border-none" showCloseButton={false}>
        <DialogTitle className="sr-only">{t("title")}</DialogTitle>
        <DialogDescription className="sr-only">{t("subtitle")}</DialogDescription>

        {/* Header with step indicator */}
        <div className="bg-primary px-6 pt-6 pb-5 relative">
          <button
            onClick={() => handleClose(false)}
            className="absolute top-3 right-4 text-primary-foreground/70 hover:text-primary-foreground transition-colors"
            aria-label="Close"
          >
            <X className="w-5 h-5" />
          </button>
          <h2 className="text-primary-foreground font-bold text-lg mb-4">{t("title")}</h2>
          <div className="flex items-center gap-2">
            {steps.map((step, i) => (
              <div key={step.number} className="flex items-center flex-1">
                <div className="flex items-center gap-2 flex-1">
                  <div
                    className={cn(
                      "w-7 h-7 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-all duration-300",
                      currentStep > step.number
                        ? "bg-accent text-accent-foreground"
                        : currentStep === step.number
                        ? "bg-accent text-accent-foreground"
                        : "bg-primary-foreground/20 text-primary-foreground/50"
                    )}
                  >
                    {currentStep > step.number ? <Check className="w-3.5 h-3.5" /> : step.number}
                  </div>
                  <span
                    className={cn(
                      "text-xs font-medium hidden sm:block transition-colors",
                      currentStep >= step.number ? "text-primary-foreground" : "text-primary-foreground/40"
                    )}
                  >
                    {step.label}
                  </span>
                </div>
                {i < steps.length - 1 && (
                  <div
                    className={cn(
                      "h-[2px] flex-1 mx-2 rounded transition-colors duration-300",
                      currentStep > step.number ? "bg-accent" : "bg-primary-foreground/20"
                    )}
                  />
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Form content */}
        <div className="max-h-[60vh] overflow-y-auto px-6 py-5">
          <AnimatePresence mode="wait">
            {currentStep === 1 && (
              <motion.div
                key="step1"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.2 }}
                className="space-y-4"
              >
                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.projectLocation")} <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    placeholder={t("fields.projectLocationPlaceholder")}
                    value={formData.projectLocation}
                    onChange={(e) => updateField("projectLocation", e.target.value)}
                    className={cn("mt-1.5", errors.projectLocation && "border-destructive")}
                  />
                  {errors.projectLocation && <p className="text-destructive text-xs mt-1">{errors.projectLocation}</p>}
                </div>

                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.scopeOfWork")}
                  </Label>
                  <Textarea
                    placeholder={t("fields.scopeOfWorkPlaceholder")}
                    value={formData.scopeOfWork}
                    onChange={(e) => updateField("scopeOfWork", e.target.value)}
                    className="mt-1.5 min-h-[80px]"
                  />
                </div>

                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.deliveryDeadline")}
                  </Label>
                  <Popover>
                    <PopoverTrigger
                      render={
                        <Button
                          variant="outline"
                          className={cn(
                            "w-full mt-1.5 justify-start text-left font-normal",
                            !formData.deliveryDeadline && "text-muted-foreground"
                          )}
                        >
                          <CalendarIcon className="mr-2 h-4 w-4" />
                          {formData.deliveryDeadline
                            ? format(formData.deliveryDeadline, "PPP")
                            : t("fields.deliveryDeadlinePlaceholder")}
                        </Button>
                      }
                    />
                    <PopoverContent className="w-auto p-0" align="start">
                      <Calendar
                        mode="single"
                        selected={formData.deliveryDeadline}
                        onSelect={(date: Date | undefined) => updateField("deliveryDeadline", date ?? undefined)}
                        disabled={(date: Date) => date < new Date()}
                        initialFocus
                        className="p-3 pointer-events-auto"
                      />
                    </PopoverContent>
                  </Popover>
                </div>

                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.personnelRequired")}
                  </Label>
                  <Input
                    type="number"
                    min="1"
                    placeholder={t("fields.personnelPlaceholder")}
                    value={formData.personnelRequired}
                    onChange={(e) => updateField("personnelRequired", e.target.value)}
                    className="mt-1.5"
                  />
                </div>

                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.serviceRequested")}
                  </Label>
                  <Select
                    value={formData.serviceRequested}
                    onValueChange={(v) => updateField("serviceRequested", v ?? undefined)}
                  >
                    <SelectTrigger className="mt-1.5 w-full">
                      <SelectValue placeholder={t("fields.serviceRequestedPlaceholder")}>
                        {formData.serviceRequested === "others"
                          ? t("options.others")
                          : formData.serviceRequested || undefined}
                      </SelectValue>
                    </SelectTrigger>
                    <SelectContent alignItemWithTrigger={false}>
                      {serviceOptions.map((s) => (
                        <SelectItem key={s.id} value={s.title}>{s.title}</SelectItem>
                      ))}
                      <SelectItem value="others">{t("options.others")}</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </motion.div>
            )}

            {currentStep === 2 && (
              <motion.div
                key="step2"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.2 }}
                className="space-y-4"
              >
                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.primaryConcerns")}
                  </Label>
                  <Textarea
                    placeholder={t("fields.primaryConcernsPlaceholder")}
                    value={formData.primaryConcerns}
                    onChange={(e) => updateField("primaryConcerns", e.target.value)}
                    className="mt-1.5 min-h-[80px]"
                  />
                </div>

                {([
                  {
                    field: "previousInspections" as const,
                    label: t("fields.previousInspections"),
                    options: [
                      { value: "Yes", label: t("options.yes") },
                      { value: "No", label: t("options.no") },
                      { value: "Not Sure", label: t("options.notSure") },
                    ],
                  },
                  {
                    field: "siteAccessibility" as const,
                    label: t("fields.siteAccessibility"),
                    options: [
                      { value: "Accessible", label: t("options.accessible") },
                      { value: "Remote", label: t("options.remote") },
                      { value: "Partially Accessible", label: t("options.partiallyAccessible") },
                    ],
                  },
                  {
                    field: "permitsRequired" as const,
                    label: t("fields.permitsRequired"),
                    options: [
                      { value: "Yes", label: t("options.yes") },
                      { value: "No", label: t("options.no") },
                      { value: "Not Sure", label: t("options.notSure") },
                    ],
                  },
                  {
                    field: "visasRequired" as const,
                    label: t("fields.visasRequired"),
                    options: [
                      { value: "Yes", label: t("options.yes") },
                      { value: "No", label: t("options.no") },
                      { value: "Not Sure", label: t("options.notSure") },
                    ],
                  },
                  {
                    field: "travelProvided" as const,
                    label: t("fields.travelProvided"),
                    options: [
                      { value: "Yes", label: t("options.yes") },
                      { value: "No", label: t("options.no") },
                      { value: "Partially", label: t("options.partially") },
                    ],
                  },
                ] as const).map(({ field, label, options }) => (
                  <div key={field}>
                    <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                      {label}
                    </Label>
                    <Select
                      value={formData[field]}
                      onValueChange={(v: string | null) => updateField(field, v ?? undefined)}
                    >
                      <SelectTrigger className="mt-1.5 w-full">
                        <SelectValue placeholder={t("options.selectOption")} />
                      </SelectTrigger>
                      <SelectContent alignItemWithTrigger={false}>
                        {options.map((o) => (
                          <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
                  </div>
                ))}
              </motion.div>
            )}

            {currentStep === 3 && (
              <motion.div
                key="step3"
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.2 }}
                className="space-y-4"
              >
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                      {t("fields.firstName")} <span className="text-destructive">*</span>
                    </Label>
                    <Input
                      placeholder={t("fields.firstNamePlaceholder")}
                      value={formData.firstName}
                      onChange={(e) => updateField("firstName", e.target.value)}
                      className={cn("mt-1.5", errors.firstName && "border-destructive")}
                    />
                    {errors.firstName && <p className="text-destructive text-xs mt-1">{errors.firstName}</p>}
                  </div>
                  <div>
                    <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                      {t("fields.lastName")} <span className="text-destructive">*</span>
                    </Label>
                    <Input
                      placeholder={t("fields.lastNamePlaceholder")}
                      value={formData.lastName}
                      onChange={(e) => updateField("lastName", e.target.value)}
                      className={cn("mt-1.5", errors.lastName && "border-destructive")}
                    />
                    {errors.lastName && <p className="text-destructive text-xs mt-1">{errors.lastName}</p>}
                  </div>
                </div>

                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.emailAddress")} <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    type="email"
                    placeholder={t("fields.emailPlaceholder")}
                    value={formData.email}
                    onChange={(e) => updateField("email", e.target.value)}
                    className={cn("mt-1.5", errors.email && "border-destructive")}
                  />
                  {errors.email && <p className="text-destructive text-xs mt-1">{errors.email}</p>}
                </div>

                <div>
                  <Label className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
                    {t("fields.companyName")} <span className="text-destructive">*</span>
                  </Label>
                  <Input
                    placeholder={t("fields.companyPlaceholder")}
                    value={formData.companyName}
                    onChange={(e) => updateField("companyName", e.target.value)}
                    className={cn("mt-1.5", errors.companyName && "border-destructive")}
                  />
                  {errors.companyName && <p className="text-destructive text-xs mt-1">{errors.companyName}</p>}
                </div>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        {/* Footer buttons */}
        <div className="px-6 py-4 border-t border-border flex items-center justify-between bg-muted/30">
          <Button
            variant="ghost"
            onClick={handleBack}
            disabled={currentStep === 1}
            className="gap-1"
          >
            <ChevronLeft className="w-4 h-4" />
            {t("navigation.back")}
          </Button>

          <div className="flex items-center gap-2">
            <span className="text-xs text-muted-foreground">
              {t("navigation.stepOf", { current: currentStep, total: 3 })}
            </span>
            {currentStep < 3 ? (
              <Button onClick={handleNext} className="gap-1 bg-accent text-accent-foreground hover:bg-accent/90">
                {t("navigation.next")}
                <ChevronRight className="w-4 h-4" />
              </Button>
            ) : (
              <Button onClick={handleSubmit} disabled={isSubmitting} className="gap-1 bg-accent text-accent-foreground hover:bg-accent/90">
                {isSubmitting ? t("navigation.submitting") : <><span>{t("navigation.submitRequest")}</span><Send className="w-4 h-4" /></>}
              </Button>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default RequestQuoteModal;