"use client";

import { useState, use, useEffect } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { motion, AnimatePresence } from "framer-motion";
import {
  ChevronRight,
  ChevronLeft,
  Upload,
  CheckCircle2,
  Briefcase,
  FileText,
  User,
  MessageSquare,
  Save,
  ArrowLeft,
  Loader2,
} from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { Navbar } from "@/components/navbar";
import { Footer } from "@/components/footer";
import { useNotify } from "@/contexts/notification-context";
import { jobsApi, applicationsApi, type ApiJob } from "@/lib/api";

// Step definitions
const steps = [
  { id: 1, title: "Personal Details", icon: User },
  { id: 2, title: "Resume & Documents", icon: FileText },
  { id: 3, title: "Experience", icon: Briefcase },
  { id: 4, title: "Additional Questions", icon: MessageSquare },
];


export const runtime = 'edge';

export default function JobApplicationPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);
  const router = useRouter();
  const notify = useNotify();
  const [currentStep, setCurrentStep] = useState(1);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [job, setJob] = useState<ApiJob | null>(null);
  const [loading, setLoading] = useState(true);

  // Form state
  const [formData, setFormData] = useState({
    // Step 1
    fullName: "",
    email: "",
    phone: "",
    linkedin: "",
    privacyAccepted: false,
    // Step 2
    resume: null as File | null,
    coverLetter: "",
    portfolioUrl: "",
    // Step 3
    salaryExpectation: "",
    hasExperience: "",
    // Step 4
    whyUs: "",
    availability: [] as string[],
  });

  const handleInputChange = (field: string, value: any) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

  const validateStep = (step: number) => {
    switch (step) {
      case 1:
        if (!formData.fullName || !formData.email || !formData.phone) {
          notify.error(
            "Required fields",
            "Please fill out all required fields."
          );
          return false;
        }
        if (!formData.email.includes("@")) {
          notify.error(
            "Invalid email",
            "Please enter a valid email address."
          );
          return false;
        }
        if (!formData.privacyAccepted) {
          notify.error(
            "Privacy policy",
            "You must accept the privacy policy to continue."
          );
          return false;
        }
        return true;
      case 2:
        return true;
      case 3:
        if (!formData.salaryExpectation || !formData.hasExperience) {
          notify.error(
            "Required fields",
            "Please answer all questions."
          );
          return false;
        }
        return true;
      case 4:
        if (!formData.whyUs || formData.availability.length === 0) {
          notify.error(
            "Required fields",
            "Please provide your reason and select at least one availability option."
          );
          return false;
        }
        return true;
      default:
        return true;
    }
  };

  const handleNext = () => {
    if (validateStep(currentStep)) {
      if (currentStep < steps.length) {
        setCurrentStep((prev) => prev + 1);
        window.scrollTo(0, 0);
      } else {
        handleSubmit();
      }
    }
  };

  const handleBack = () => {
    if (currentStep > 1) {
      setCurrentStep((prev) => prev - 1);
      window.scrollTo(0, 0);
    }
  };

  useEffect(() => {
    async function fetchJob() {
      try {
        setLoading(true);
        const response = await jobsApi.getById(id);
        if (response) {
          setJob(response);
        }
      } catch (err) {
        console.error("Error fetching job:", err);
        notify.error("Error", "Failed to load job details");
      } finally {
        setLoading(false);
      }
    }
    fetchJob();
  }, [id, notify]);

  const handleSubmit = async () => {
    setIsSubmitting(true);
    try {
      await applicationsApi.create({
        jobId: id,
        name: formData.fullName,
        email: formData.email,
        phone: formData.phone,
        linkedin: formData.linkedin,
        coverLetter: formData.coverLetter,
        portfolioUrl: formData.portfolioUrl,
        salaryExpectation: formData.salaryExpectation,
        hasExperience: formData.hasExperience,
        whyUs: formData.whyUs,
        availability: formData.availability,
      });

      notify.success(
        "Application submitted!",
        `Good luck! Your application for ${job?.title || 'this position'} has been received.`
      );

      router.push("/dashboard/my-applications");
    } catch (error: any) {
      console.error("Submit error:", error);
      notify.error(
        "Error submitting",
        error.message || "Please try again later."
      );
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleSaveDraft = () => {
    notify.info(
      "Draft saved",
      "You can finish your application later."
    );
  };

  const progress = (currentStep / steps.length) * 100;

  if (!job) return null;

  return (
    <div className="min-h-screen flex flex-col bg-muted/30">
      <Navbar />

      <main className="flex-1 py-8">
        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
          {/* Header */}
          <div className="mb-8">
            <Link
              href={`/jobs/${id}`}
              className="inline-flex items-center text-sm text-muted-foreground hover:text-primary mb-4 transition-colors"
            >
              <ArrowLeft className="mr-2 h-4 w-4" />
              Back to job details
            </Link>
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div>
                <h1 className="text-2xl md:text-3xl font-bold text-foreground">
                  Application: {job.title}
                </h1>
                <p className="text-muted-foreground mt-1">
                  {job.companyName || 'Company'} • {job.location || 'Remote'}
                </p>
              </div>
              <div className="text-sm font-medium bg-primary/10 text-primary px-3 py-1 rounded-full self-start md:self-center">
                Estimated time: 5 min
              </div>
            </div>
          </div>

          {/* Step progress */}
          <div className="mb-8">
            <div className="flex justify-between mb-2">
              <span className="text-sm font-medium text-muted-foreground">
                Step {currentStep} of {steps.length}:{" "}
                <span className="text-foreground">
                  {steps[currentStep - 1].title}
                </span>
              </span>
              <span className="text-sm font-medium text-primary">
                {Math.round(progress)}%
              </span>
            </div>
            <Progress value={progress} className="h-2" />

            {/* Step indicator (desktop) */}
            <div className="hidden md:flex justify-between mt-4 px-2">
              {steps.map((step) => {
                const Icon = step.icon;
                const isActive = step.id === currentStep;
                const isCompleted = step.id < currentStep;

                return (
                  <div
                    key={step.id}
                    className={`flex flex-col items-center gap-2 ${isActive
                      ? "text-primary"
                      : isCompleted
                        ? "text-primary/60"
                        : "text-muted-foreground"
                      }`}
                  >
                    <div
                      className={`
                      w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors
                      ${isActive
                          ? "border-primary bg-primary text-primary-foreground"
                          : isCompleted
                            ? "border-primary bg-primary/10 text-primary"
                            : "border-muted-foreground/30 bg-background"
                        }
                    `}
                    >
                      {isCompleted ? (
                        <CheckCircle2 className="h-5 w-5" />
                      ) : (
                        <Icon className="h-4 w-4" />
                      )}
                    </div>
                    <span className="text-xs font-medium">{step.title}</span>
                  </div>
                );
              })}
            </div>
          </div>

          {/* Form content */}
          <div className="grid gap-6">
            <AnimatePresence mode="wait">
              <motion.div
                key={currentStep}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: -20 }}
                transition={{ duration: 0.3 }}
              >
                <Card className="border-t-4 border-t-primary">
                  <CardHeader>
                    <CardTitle>{steps[currentStep - 1].title}</CardTitle>
                    <CardDescription>
                      Fill in the information below to continue.
                    </CardDescription>
                  </CardHeader>

                  <CardContent className="space-y-6">
                    {/* Step 1: Personal Details */}
                    {currentStep === 1 && (
                      <div className="space-y-4">
                        <div className="grid md:grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor="fullName">Full name *</Label>
                            <Input
                              id="fullName"
                              placeholder="Your full name"
                              value={formData.fullName}
                              onChange={(e) =>
                                handleInputChange("fullName", e.target.value)
                              }
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="email">Email *</Label>
                            <Input
                              id="email"
                              type="email"
                              placeholder="you@email.com"
                              value={formData.email}
                              onChange={(e) =>
                                handleInputChange("email", e.target.value)
                              }
                            />
                          </div>
                        </div>

                        <div className="grid md:grid-cols-2 gap-4">
                          <div className="space-y-2">
                            <Label htmlFor="phone">Phone / WhatsApp *</Label>
                            <Input
                              id="phone"
                              placeholder="(00) 00000-0000"
                              value={formData.phone}
                              onChange={(e) =>
                                handleInputChange("phone", e.target.value)
                              }
                            />
                          </div>
                          <div className="space-y-2">
                            <Label htmlFor="linkedin">LinkedIn (URL)</Label>
                            <Input
                              id="linkedin"
                              placeholder="linkedin.com/in/your-profile"
                              value={formData.linkedin}
                              onChange={(e) =>
                                handleInputChange("linkedin", e.target.value)
                              }
                            />
                          </div>
                        </div>

                        <div className="flex items-center space-x-2 pt-4">
                          <Checkbox
                            id="privacy"
                            checked={formData.privacyAccepted}
                            onCheckedChange={(checked) =>
                              handleInputChange("privacyAccepted", checked)
                            }
                          />
                          <Label
                            htmlFor="privacy"
                            className="text-sm font-normal text-muted-foreground"
                          >
                            I have read and agree to the{" "}
                            <Link href="/privacy" className="text-primary underline">
                              Privacy Policy
                            </Link>{" "}
                            and authorize the processing of my data for recruitment purposes.
                          </Label>
                        </div>
                      </div>
                    )}

                    {/* Step 2: Documents */}
                    {currentStep === 2 && (
                      <div className="space-y-6">
                        <div className="space-y-3">
                          <Label>Resume (CV) *</Label>
                          <div className="border-2 border-dashed border-muted-foreground/25 rounded-lg p-8 text-center hover:bg-muted/50 transition-colors cursor-pointer">
                            <div className="flex flex-col items-center gap-2">
                              <div className="p-3 bg-primary/10 rounded-full text-primary">
                                <Upload className="h-6 w-6" />
                              </div>
                              <div className="space-y-1">
                                <p className="text-sm font-medium">
                                  Click to upload or drag the file here
                                </p>
                                <p className="text-xs text-muted-foreground">
                                  PDF, DOCX, or TXT (Max 5MB)
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>

                        <div className="space-y-2">
                          <Label htmlFor="portfolio">
                            Portfolio / Personal Website (Optional)
                          </Label>
                          <Input
                            id="portfolio"
                            placeholder="https://..."
                            value={formData.portfolioUrl}
                            onChange={(e) =>
                              handleInputChange("portfolioUrl", e.target.value)
                            }
                          />
                        </div>

                        <div className="space-y-2">
                          <Label htmlFor="coverLetter">
                            Cover Letter (Optional)
                          </Label>
                          <Textarea
                            id="coverLetter"
                            placeholder="Write a short introduction about yourself..."
                            className="min-h-[150px]"
                            value={formData.coverLetter}
                            onChange={(e) =>
                              handleInputChange("coverLetter", e.target.value)
                            }
                          />
                        </div>
                      </div>
                    )}

                    {/* Step 3: Experience */}
                    {currentStep === 3 && (
                      <div className="space-y-6">
                        <div className="space-y-2">
                          <Label htmlFor="salary">Salary expectation *</Label>
                          <Select
                            value={formData.salaryExpectation}
                            onValueChange={(val) =>
                              handleInputChange("salaryExpectation", val)
                            }
                          >
                            <SelectTrigger>
                              <SelectValue placeholder="Select a range" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="up-to-3k">
                                Up to R$ 3,000
                              </SelectItem>
                              <SelectItem value="3k-5k">
                                R$ 3,000 - R$ 5,000
                              </SelectItem>
                              <SelectItem value="5k-8k">
                                R$ 5,000 - R$ 8,000
                              </SelectItem>
                              <SelectItem value="8k-12k">
                                R$ 8,000 - R$ 12,000
                              </SelectItem>
                              <SelectItem value="12k-plus">
                                Above R$ 12,000
                              </SelectItem>
                            </SelectContent>
                          </Select>
                        </div>

                        <div className="space-y-3">
                          <Label>
                            Do you have the minimum experience required for the
                            role? *
                          </Label>
                          <div className="flex gap-4">
                            <div className="flex items-center space-x-2 border p-3 rounded-md flex-1 hover:bg-muted/50 cursor-pointer">
                              <input
                                type="radio"
                                name="experience"
                                id="exp-yes"
                                className="accent-primary h-4 w-4"
                                checked={formData.hasExperience === "yes"}
                                onChange={() =>
                                  handleInputChange("hasExperience", "yes")
                                }
                              />
                              <Label
                                htmlFor="exp-yes"
                                className="cursor-pointer flex-1"
                              >
                                Yes, I do
                              </Label>
                            </div>
                            <div className="flex items-center space-x-2 border p-3 rounded-md flex-1 hover:bg-muted/50 cursor-pointer">
                              <input
                                type="radio"
                                name="experience"
                                id="exp-no"
                                className="accent-primary h-4 w-4"
                                checked={formData.hasExperience === "no"}
                                onChange={() =>
                                  handleInputChange("hasExperience", "no")
                                }
                              />
                              <Label
                                htmlFor="exp-no"
                                className="cursor-pointer flex-1"
                              >
                                Not yet
                              </Label>
                            </div>
                          </div>
                        </div>
                      </div>
                    )}

                    {/* Step 4: Additional */}
                    {currentStep === 4 && (
                      <div className="space-y-6">
                        <div className="space-y-2">
                          <Label htmlFor="whyUs">
                            Why do you want to work at {job.companyName || 'this company'}? *
                          </Label>
                          <Textarea
                            id="whyUs"
                            placeholder="Tell us what attracts you to this company and role..."
                            className="min-h-[150px]"
                            maxLength={1000}
                            value={formData.whyUs}
                            onChange={(e) =>
                              handleInputChange("whyUs", e.target.value)
                            }
                          />
                          <div className="text-xs text-right text-muted-foreground">
                            {formData.whyUs.length}/1000 characters
                          </div>
                        </div>

                        <div className="space-y-3">
                          <Label>Availability *</Label>
                          <div className="grid gap-2">
                            {[
                              "On-site work",
                              "Remote work",
                              "Travel",
                              "Immediate start",
                            ].map((item) => (
                              <div
                                key={item}
                                className="flex items-center space-x-2"
                              >
                                <Checkbox
                                  id={`avail-${item}`}
                                  checked={formData.availability.includes(item)}
                                  onCheckedChange={(checked) => {
                                    if (checked) {
                                      handleInputChange("availability", [
                                        ...formData.availability,
                                        item,
                                      ]);
                                    } else {
                                      handleInputChange(
                                        "availability",
                                        formData.availability.filter(
                                          (i) => i !== item
                                        )
                                      );
                                    }
                                  }}
                                />
                                <Label htmlFor={`avail-${item}`}>{item}</Label>
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    )}
                  </CardContent>

                  <CardFooter className="flex justify-between border-t pt-6">
                    <Button
                      variant="outline"
                      onClick={handleBack}
                      disabled={currentStep === 1 || isSubmitting}
                    >
                      <ChevronLeft className="mr-2 h-4 w-4" />
                      Back
                    </Button>

                    <div className="flex gap-2">
                      <Button
                        variant="ghost"
                        onClick={handleSaveDraft}
                        disabled={isSubmitting}
                        className="hidden sm:flex"
                      >
                        <Save className="mr-2 h-4 w-4" />
                        Save draft
                      </Button>

                      <Button
                        onClick={handleNext}
                        disabled={isSubmitting}
                        className="min-w-[120px]"
                      >
                        {isSubmitting ? (
                          "Submitting..."
                        ) : currentStep === steps.length ? (
                          <>
                            Submit application{" "}
                            <CheckCircle2 className="ml-2 h-4 w-4" />
                          </>
                        ) : (
                          <>
                            Next step{" "}
                            <ChevronRight className="ml-2 h-4 w-4" />
                          </>
                        )}
                      </Button>
                    </div>
                  </CardFooter>
                </Card>
              </motion.div>
            </AnimatePresence>
          </div>
        </div>
      </main>

      <Footer />
    </div>
  );
}
