"use client";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { useLanguage } from "@/store/language-context";
import { Loader, Paperclip } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import Breadcrumb from "@/ui/breadcrumb";
import imglogo from "@/assets/icons/contract.png";
import { Link } from "react-router-dom";
import axios from "axios";
import "./diploma-registration-form.css"

interface DiplomaFormData {
  email: string;
  fullName: string;
  nationalId: string;
  phoneNumber: string;
  qualification: string;
  diplomaName: string;
  qualificationDocument: File | null;
  nationalIdDocument: File | null;
  agreeToTerms: boolean;
}

const DiplomaRegistrationForm = () => {
  const { t } = useTranslation();
  const { URL } = useLanguage();
  const { toast } = useToast();

  const [formData, setFormData] = useState<DiplomaFormData>({
    email: "",
    fullName: "",
    nationalId: "",
    phoneNumber: "",
    qualification: "",
    diplomaName: "",
    qualificationDocument: null,
    nationalIdDocument: null,
    agreeToTerms: false,
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [loading, setLoading] = useState(false);

  // Available diploma options
  const diplomaOptions = [
    { value: "leadership_management", label: t('diploma_form.diploma_options.leadership_management') },
    { value: "project_management", label: t('diploma_form.diploma_options.project_management') },
    { value: "human_resources", label: t('diploma_form.diploma_options.human_resources') },
    { value: "financial_management", label: t('diploma_form.diploma_options.financial_management') },
    { value: "marketing_sales", label: t('diploma_form.diploma_options.marketing_sales') },
    { value: "operations_management", label: t('diploma_form.diploma_options.operations_management') },
  ];

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: "" }));
    }
  };

  const handleFileUpload = (field: 'qualificationDocument' | 'nationalIdDocument', file: File | null) => {
    setFormData(prev => ({ ...prev, [field]: file }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: "" }));
    }
  };

  const validateForm = (): boolean => {
    const newErrors: Record<string, string> = {};

    if (!formData.email) newErrors.email = t('diploma_form.errors.email_required');
    if (!formData.fullName.trim()) newErrors.fullName = t('diploma_form.errors.full_name_required');
    if (!formData.nationalId) newErrors.nationalId = t('diploma_form.errors.national_id_required');
    if (!formData.phoneNumber) newErrors.phoneNumber = t('diploma_form.errors.phone_required');
    if (!formData.qualification.trim()) newErrors.qualification = t('diploma_form.errors.qualification_required');
    if (!formData.diplomaName) newErrors.diplomaName = t('diploma_form.errors.diploma_name_required');
    if (!formData.qualificationDocument) newErrors.qualificationDocument = t('diploma_form.errors.qualification_document_required');
    if (!formData.nationalIdDocument) newErrors.nationalIdDocument = t('diploma_form.errors.national_id_document_required');
    if (!formData.agreeToTerms) newErrors.agreeToTerms = t('diploma_form.errors.terms_required');

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!validateForm()) return;

    setLoading(true);
    try {
      const submitData = new FormData();
      Object.entries(formData).forEach(([key, value]) => {
        if (value !== null && key !== 'agreeToTerms') {
          submitData.append(key, value);
        }
      });

      await axios.post(`${URL}/diploma-registration`, submitData, {
        headers: { "Content-Type": "multipart/form-data" }
      });

      toast({
        variant: 'success',
        title: `🎉 ${t('diploma_form.success.title')}`,
        description: t('diploma_form.success.description')
      });

      // Reset form
      setFormData({
        email: "", fullName: "", nationalId: "", phoneNumber: "", qualification: "",
        diplomaName: "", qualificationDocument: null, nationalIdDocument: null, agreeToTerms: false
      });
    } catch (error) {
      toast({
        variant: "destructive",
        title: t('diploma_form.error.title'),
        description: t('diploma_form.error.description')
      });
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    setFormData({
      email: "", fullName: "", nationalId: "", phoneNumber: "", qualification: "",
      diplomaName: "", qualificationDocument: null, nationalIdDocument: null, agreeToTerms: false
    });
    setErrors({});
  };

  const styles = {
    input: {
      width: "100%",
      padding: "6px",
      borderRadius: "4px",
      border: "1px solid #ccc",
      boxSizing: "border-box" as const,
      backgroundColor: "#F5F5F5",
      color: "#333",
    },
    select: {
      width: "100%",
      padding: "6px",
      borderRadius: "4px",
      border: "1px solid #ccc",
      boxSizing: "border-box" as const,
      backgroundColor: "#F5F5F5",
      color: "#333",
      height: "45px",
    }
  };

  return (
    <>
      <Breadcrumb pages={[t('diploma_form.title')]} />
      
      <div className="centeral-form-new layout">
        <div className="">
          <form onSubmit={handleSubmit}>
            
            {/* Email Field */}
            <div className="client-section w-full">
              <div className="contral-field !w-full">
                <label>
                  <img src={imglogo} alt="" />
                  <span>{t('diploma_form.email')}</span>
                </label>
                <input
                  type="email"
                  name="email"
                  value={formData.email}
                  onChange={handleInputChange}
                  style={styles.input}
                  placeholder={t('diploma_form.email_placeholder')}
                  required
                />
                {errors.email && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.email}</p>}
              </div>
            </div>

            {/* Basic Information Section */}
            <div className="client-section w-full">
              <p className="text-secondary-tw text-xl ltr:text-left rtl:text-start mb-4">
                {t('diploma_form.basic_info.title')} :
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                
                {/* Full Name */}
                <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.basic_info.full_name')}</span>
                  </label>
                  <input
                    type="text"
                    name="fullName"
                    value={formData.fullName}
                    onChange={handleInputChange}
                    style={styles.input}
                    placeholder={t('diploma_form.basic_info.full_name_placeholder')}
                    required
                  />
                  {errors.fullName && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.fullName}</p>}
                </div>

                {/* National ID */}
                <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.basic_info.national_id')}</span>
                  </label>
                  <input
                    type="text"
                    name="nationalId"
                    value={formData.nationalId}
                    onChange={handleInputChange}
                    style={styles.input}
                    placeholder={t('diploma_form.basic_info.national_id_placeholder')}
                    required
                  />
                  {errors.nationalId && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.nationalId}</p>}
                </div>

                {/* Phone Number */}
                <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.basic_info.phone_number')}</span>
                  </label>
                  <input
                    type="number"
                    name="phoneNumber"
                    value={formData.phoneNumber}
                    onChange={handleInputChange}
                    style={styles.input}
                    placeholder={t('diploma_form.basic_info.phone_placeholder')}
                    required
                  />
                  {errors.phoneNumber && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.phoneNumber}</p>}
                </div>

                {/* Qualification */}
                <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.basic_info.qualification')}</span>
                  </label>
                  <input
                    type="text"
                    name="qualification"
                    value={formData.qualification}
                    onChange={handleInputChange}
                    style={styles.input}
                    placeholder={t('diploma_form.basic_info.qualification_placeholder')}
                    required
                  />
                  {errors.qualification && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.qualification}</p>}
                </div>
              </div>
            </div>

            {/* Training Program Information Section */}
            <div className="client-section w-full">
              <p className="text-secondary-tw text-xl ltr:text-left rtl:text-start mb-4">
                {t('diploma_form.program_info.title')} :
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4">
                
              

                {/* File Uploads */}
                <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.program_info.qualification_document')}</span>
                  </label>
                  <div className="input-container  contral-field" style={styles.input}
                >
                    <input
                      id="qualificationFileInput"
                      type="file"
                      className="d-none !border-none"
                      accept="image/*,.pdf"
                      onChange={(e) => {
                        const selectedFile = e.target.files?.[0] || null;
                        handleFileUpload('qualificationDocument', selectedFile);
                      }}
                    />
                    {formData.qualificationDocument && (
                      <p style={{ color: "#333", fontSize: "14px", textAlign: "start" }}>
                        {formData.qualificationDocument.name}
                      </p>
                    )}
                    <button
                      type="button"
                      className="bg-primary-tw attachment-icon grid place-items-center"
                      onClick={() => document.getElementById("qualificationFileInput")?.click()}
                    >
                      <Paperclip />
                    </button>
                  </div>
                  {errors.qualificationDocument && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.qualificationDocument}</p>}
                </div>

                <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.program_info.national_id_document')}</span>
                  </label>
                  <div className="input-container contral-field" style={styles.input}>
                    <input
                      id="nationalIdFileInput"
                      type="file"
                      className="d-none !border-none"
                      accept="image/*,.pdf"
                      onChange={(e) => {
                        const selectedFile = e.target.files?.[0] || null;
                        handleFileUpload('nationalIdDocument', selectedFile);
                      }}
                    />
                    {formData.nationalIdDocument && (
                      <p style={{ color: "#333", fontSize: "14px", textAlign: "start" }}>
                        {formData.nationalIdDocument.name}
                      </p>
                    )}
                    <button
                      type="button"
                      className="bg-primary-tw attachment-icon grid place-items-center"
                      onClick={() => document.getElementById("nationalIdFileInput")?.click()}
                    >
                      <Paperclip />
                    </button>
                  </div>
                  {errors.nationalIdDocument && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.nationalIdDocument}</p>}
                </div>
                  {/* Diploma Name Selection */}
                  <div className="contral-field !w-full">
                  <label>
                    <img src={imglogo} alt="" />
                    <span>{t('diploma_form.program_info.diploma_name')}</span>
                  </label>
                  <select
                    name="diplomaName"
                    value={formData.diplomaName}
                    onChange={handleInputChange}
                    style={styles.select}
                    required
                  >
                    <option value="">{t('diploma_form.program_info.select_diploma')}</option>
                    {diplomaOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </option>
                    ))}
                  </select>
                  {errors.diplomaName && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.diplomaName}</p>}
                </div>
              </div>
            </div>

            {/* IVORY Instructions Section */}
            <div className="client-section w-full">
              <p className="text-secondary-tw text-xl ltr:text-left rtl:text-start mb-4">
                {t('diploma_form.instructions.ivory_title')} :
              </p>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div className="bg-gray-50 p-4 rounded-lg">
                  <ul className="space-y-2 text-sm text-gray-700">
                    <li>• {t('diploma_form.instructions.no_smoking')}</li>
                    <li>• {t('diploma_form.instructions.no_equipment_tampering')}</li>
                    <li>• {t('diploma_form.instructions.maintain_quiet')}</li>
                    <li>• {t('diploma_form.instructions.no_food_drinks')}</li>
                    <li>• {t('diploma_form.instructions.silent_phone')}</li>
                    <li>• {t('diploma_form.instructions.non_refundable_fees')}</li>
                  </ul>
                </div>
                <div className="bg-blue-50 p-4 rounded-lg">
                  <h2 className="font-semibold text-blue-800 mb-2">
                    {t('diploma_form.instructions.civil_training_title')}
                  </h2>
                  <ul className="space-y-2 text-sm text-blue-700">
                    <li>• {t('diploma_form.instructions.attendance_required')}</li>
                    <li>• {t('diploma_form.instructions.academic_guidance')}</li>
                    <li>• {t('diploma_form.instructions.comply_regulations')}</li>
                    <li>• {t('diploma_form.instructions.exam_fee')}</li>
                    <li>• {t('diploma_form.instructions.certificate_issuance')}</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Terms Agreement */}
            <div>
              <label className="terms d-block p-1">
                <input
                  type="checkbox"
                  required
                  className="m-1"
                  checked={formData.agreeToTerms}
                  onChange={(e) => setFormData(prev => ({ ...prev, agreeToTerms: e.target.checked }))}
                />
                <span>{t('diploma_form.terms_agreement')}</span>
              </label>
              {errors.agreeToTerms && <p style={{ color: "#D4AD89", fontSize: "12px", marginTop: "5px" }}>{errors.agreeToTerms}</p>}
            </div>

            {/* Action Buttons */}
            <div className="two-form-btn flex flex-col md:flex-row justify-center items-center gap-4 mt-6">
              <button
                type="submit"
                disabled={loading}
                className="submit-button w-full md:w-auto"
              >
                {loading ? (
                  <>
                    <Loader className="animate-spin mr-2 h-4 w-4 inline" />
                    {t('diploma_form.submitting')}
                  </>
                ) : (
                  t('diploma_form.submit')
                )}
              </button>
              <button
                className="reset-btn w-full md:w-auto"
                type="button"
                onClick={handleReset}
              >
                {t('diploma_form.cancel')}
              </button>
            </div>
          </form>
        </div>
      </div>
    </>
  );
};

export default DiplomaRegistrationForm;