"use client";

import React from "react";
import { motion } from "framer-motion";
import { Card, Row, Col, Form, Stack, Spinner } from "react-bootstrap";
import { useForm } from "react-hook-form";
import { useToast } from '@/context/ToastContext';
import { useRecaptcha } from "@/hooks/useRecaptcha";

type FormData = {
  fname: string;
  lname: string;
  email: string;
  mobile: string;
  qualification: string;
  experience: string;
  message: string;
  cv?: FileList;
};
export default function CareerForm() {
  const { showToast } = useToast();
  const { getToken } = useRecaptcha();
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
    setError,
  } = useForm<FormData>();
  const onSubmit = async (data: FormData) => {
    const file = data.cv?.[0];
    if (!file) {
      setError("cv", { type: "manual", message: "CV is required" });
      return;
    }
    if (
      !["application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"].includes(file.type)
    ) {
      setError("cv", { type: "manual", message: "Only PDF or DOC/DOCX files allowed" });
      return;
    }
    if (file.size > 2 * 1024 * 1024) {
      setError("cv", { type: "manual", message: "File size must be less than 2MB" });
      return;
    }
    const recaptchaToken = await getToken("career_save_form");

    const formData = new FormData();
    Object.entries(data).forEach(([key, value]) => {
      if (key === "cv" && value instanceof FileList && value.length > 0) {
        formData.append("cv", value[0]);
      } else if (typeof value === "string") {
        formData.append(key, value);
      }
    });
    formData.append("recaptchaToken", recaptchaToken || '');

    const res = await fetch("/api/career", {
      method: "POST",
      body: formData,
    });

    const result = await res.json();

    if (res.ok) {
      reset();
      showToast(result.message, "success");
    } else {
      showToast(result.error || "Something went wrong, Please try again later", "danger");
    }
  };
  return (
    <motion.div className="card rounded-4 shadow" whileInView={{y:[100,0]}} transition={{duration:2}}>
      <Card.Body>
        <Form noValidate onSubmit={handleSubmit(onSubmit)}>
          <Row className="g-3">
            <Col md={6}>
              <motion.div whileInView={{x:[-20,0]}} transition={{duration:1.2}}>
                <Form.Label>First name</Form.Label>
                <Form.Control type="text" {...register("fname", {required: "First name is required",pattern: {value: /^[a-zA-Z]+$/,message: "Enter first name",},})} isInvalid={!!errors.fname} />
                <Form.Control.Feedback type="invalid">{errors.fname?.message}</Form.Control.Feedback>
              </motion.div>              
            </Col>
            <Col md={6}>
              <motion.div whileInView={{x:[20,0]}} transition={{duration:1.4}}>
                <Form.Label>Last name</Form.Label>
                <Form.Control type="text" {...register("lname", {required: "Last name is required",pattern: {value: /^[a-zA-Z]+$/,message: "Enter last name",},})} isInvalid={!!errors.lname} />
                <Form.Control.Feedback type="invalid">{errors.lname?.message}</Form.Control.Feedback>
              </motion.div>
            </Col>
            <Col md={12}>
              <motion.div whileInView={{y:[20,0]}} transition={{duration:1.6}}>              
                <Form.Label>Phone number</Form.Label>
                <Form.Control type="tel" {...register("mobile", {required: "Mobile number is required",pattern: {value: /^[6-9]\d{9}$/,message: "Enter a valid 10-digit Indian mobile number",},})} isInvalid={!!errors.mobile} />
                <Form.Control.Feedback type="invalid">{errors.mobile?.message}</Form.Control.Feedback>
              </motion.div>
            </Col>
            <Col md={12}>
              <motion.div whileInView={{y:[20,0]}} transition={{duration:1.4}}>
                <Form.Label>Work email address</Form.Label>
                <Form.Control type="email" placeholder="Email" {...register("email", { required: "Email is required", pattern: { value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, message: "Invalid email format",},})} isInvalid={!!errors.email} />
                <Form.Control.Feedback type="invalid">{errors.email?.message}</Form.Control.Feedback>
              </motion.div>              
            </Col>
            <Col md={6}>
              <motion.div whileInView={{y:[20,0]}} transition={{duration:1.4}}>
                <Form.Label>Qualification</Form.Label>
                <Form.Control type="text" {...register("qualification", { required: "Qualification is required", pattern: { value: /^[a-zA-Z0-9\s\.\+\-]{2,50}$/, message: "Enter a valid qualification",},})} isInvalid={!!errors.qualification} />
                <Form.Control.Feedback type="invalid">{errors.qualification?.message}</Form.Control.Feedback>
              </motion.div>
            </Col>
            <Col md={6}>
              <motion.div whileInView={{y:[20,0]}} transition={{duration:1.4}}>
                <Form.Label>Experience</Form.Label>
                <Form.Control type="text" {...register("experience", { required: "Experience is required", pattern: { value: /^[a-zA-Z0-9\s\+\.\-]{1,30}$/, message: "Enter a valid experience format (e.g. 2 years, 5+ yrs)", },})} isInvalid={!!errors.experience} />
                <Form.Control.Feedback type="invalid">{errors.experience?.message}</Form.Control.Feedback>
              </motion.div>
            </Col>
            <Col md={12}>
              <motion.div whileInView={{y:[20,0]}} transition={{duration:1.4}}>
                <Form.Label>Upload CV</Form.Label>
                <Form.Control
                  type="file"
                  accept=".pdf,.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf"
                  {...register("cv", { required: "CV is required" })}
                  isInvalid={!!errors.cv}
                />
                <Form.Control.Feedback type="invalid">{errors.cv?.message}</Form.Control.Feedback>
              </motion.div>
            </Col>       
            <Col md={12}>
              <motion.div whileInView={{y:[20,0]}} transition={{duration:1.4}}>
                <Form.Label>Message</Form.Label>
                <Form.Control as="textarea" rows={5} placeholder="Enter your message" {...register("message", { required: "Your message is required" })}
                  onPaste={(e) => {
                    e.preventDefault();
                    const text = e.clipboardData.getData("text/plain");
                    const target = e.target as HTMLTextAreaElement;
                    const start = target.selectionStart;
                    const end = target.selectionEnd;
                    const value = target.value;
                    target.value = value.slice(0, start) + text + value.slice(end);
                    target.selectionStart = target.selectionEnd = start + text.length;
                    const event = new Event('input', { bubbles: true });
                    target.dispatchEvent(event);
                  }}
                  isInvalid={!!errors.message}
                />
                <Form.Control.Feedback type="invalid">{errors.message?.message}</Form.Control.Feedback>
              </motion.div>
            </Col>
            <Col md={12}>
                <motion.button className="btn btn-lg btn-outline-danger rounded-pill" type="submit" disabled={isSubmitting} whileInView={{x:[200,0]}} transition={{duration:2}}>
                  {isSubmitting ? (
                    <Stack gap={2} direction="horizontal">
                      <Spinner animation="grow" size="sm" variant="danger" />
                      <Spinner animation="grow" size="sm" variant="primary" />
                      <Spinner animation="grow" size="sm" variant="success" />
                      <span>Submitting...</span>
                    </Stack>
                  ) : (
                    "Submit"
                  )}
                </motion.button>             
            </Col>
          </Row>
        </Form>
      </Card.Body>
    </motion.div>    
  );
}