"use client";
import React, { useState, ChangeEvent, FormEvent } from 'react';
import axios from 'axios';
import { useLanguage } from "@/store/language-context";
import { useTranslation } from "react-i18next";
import { useToast } from '@/hooks/use-toast';
import { Bomb } from 'lucide-react';

interface FormData {
  first_name: string;
  last_name: string;
  company_title: string;
  job_title: string;
  phone: string;
  ivory_product_id: number;
  email: string;
  reason: string;
}

const TrainingForm: React.FC = () => {
  const { URL } = useLanguage();
  const { t } = useTranslation();
  const { toast } = useToast();
  const [isSubmitting, setIsSubmitting] = useState(false);

  const [formData, setFormData] = useState<FormData>({
    first_name: '',
    last_name: '',
    company_title: '',
    job_title: '',
    phone: '',
    ivory_product_id: 4,
    email: '',
    reason: '',
  });

  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      await axios.post(`${URL}/ivory-products/store`, formData);

      // Show success toast
      toast({
        variant: 'success',
        title: '🎉 ' + t('custom.done'),
        description: t('custom.done-desc')
      });

      // Reset form
      setFormData({
        first_name: '',
        last_name: '',
        company_title: '',
        job_title: '',
        phone: '',
        ivory_product_id: 4,
        email: '',
        reason: '',
      });

    } catch (error) {
      console.error("Form submission error:", error);

      // Show error toast
      toast({
        variant: 'destructive',
        title: (
          <div className='flex items-center gap-2'>
            <Bomb size={19} />
            <p>{t('custom.failed')}</p>
          </div>
        ),
        description: t('custom.err')
      });
    } finally {
      setIsSubmitting(false);
    }
  };

  // Reusable input field component
  const renderInputField = (
    name: keyof FormData,
    label: string,
    type: string = 'text',
    required: boolean = true
  ) => (
    <div className="mb-4">
      <label htmlFor={name} className="flex items-center text-sm font-medium text-gray-500">
        <img
          src="data:image/svg+xml,%3csvg%20width='18'%20height='14'%20viewBox='0%200%2018%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1387_2790)'%3e%3cg%20style='mix-blend-mode:multiply'%3e%3cmask%20id='mask0_1387_2790'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='0'%20y='-1'%20width='19'%20height='16'%3e%3cpath%20d='M18.2388%20-0.240234H0.0234375V14.1113H18.2388V-0.240234Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_1387_2790)'%3e%3cpath%20d='M13.8026%207.32366L15.4479%208.98729L13.1716%2011.2889L10.4071%208.49614L9.13086%209.7866L13.1716%2013.8698L18.0004%208.98729L15.0788%206.0332L13.8026%207.32366Z'%20fill='%236A2F38'/%3e%3cpath%20d='M9.08277%207.42975L11.5424%202.45813L9.11135%200L6.64453%202.49665L9.08277%207.42975Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M10.6504%208.21254L13.9434%204.88287L12.8458%203.77539L10.6504%208.21254Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M5.34041%203.81445L4.2832%204.88341L7.45958%208.09751L5.34041%203.81445Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M9.1249%2010.8611L7.86719%2012.1328L9.1249%2013.4045L10.3826%2012.1328L9.1249%2010.8611Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M3.83336%2010.0186L2.81425%208.9882L4.46197%207.31975L3.1857%206.0293L0.261719%208.9882L2.55709%2011.3091L3.83336%2010.0186Z'%20fill='%236A2F38'/%3e%3cpath%20d='M7.85517%208.49609L5.78124%2010.5931L3.81445%2012.5793L5.09072%2013.8698L9.13144%209.78414L7.85517%208.49609Z'%20fill='%236A2F38'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1387_2790'%3e%3crect%20width='18'%20height='14'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"
          alt={name}
          className="me-2"
        />
        {label}
      </label>
      <input
        type={type}
        id={name}
        name={name}
        value={formData[name] as string}
        onChange={handleChange}
        placeholder={label}
        required={required}
        className="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 bg-[#F5F5F5]"
      />
    </div>
  );

  return (
    <div className="bg-[#F5F5F5]   layout ">
      <h2 className="text-xl font-semibold text-center mb-6">
        {t('training_form.title')}
      </h2>
      <form
        onSubmit={handleSubmit}
        className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 bg-white p-6 rounded-lg border-[#E5E5E5] border"
      >
        {renderInputField('first_name', t('form.first_name'))}
        {renderInputField('last_name', t('form.last_name'))}
        {renderInputField('email', t('form.email'), 'email')}
        {renderInputField('phone', t('form.phone'), 'number')}
        {renderInputField('job_title', t('form.job_title'))}
        {renderInputField('company_title', t('form.company'))}

        <div className="mb-4">
          <label htmlFor="reason" className="flex items-center text-sm font-medium text-gray-500">
            <img
              src="data:image/svg+xml,%3csvg%20width='18'%20height='14'%20viewBox='0%200%2018%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_1387_2790)'%3e%3cg%20style='mix-blend-mode:multiply'%3e%3cmask%20id='mask0_1387_2790'%20style='mask-type:luminance'%20maskUnits='userSpaceOnUse'%20x='0'%20y='-1'%20width='19'%20height='16'%3e%3cpath%20d='M18.2388%20-0.240234H0.0234375V14.1113H18.2388V-0.240234Z'%20fill='white'/%3e%3c/mask%3e%3cg%20mask='url(%23mask0_1387_2790)'%3e%3cpath%20d='M13.8026%207.32366L15.4479%208.98729L13.1716%2011.2889L10.4071%208.49614L9.13086%209.7866L13.1716%2013.8698L18.0004%208.98729L15.0788%206.0332L13.8026%207.32366Z'%20fill='%236A2F38'/%3e%3cpath%20d='M9.08277%207.42975L11.5424%202.45813L9.11135%200L6.64453%202.49665L9.08277%207.42975Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M10.6504%208.21254L13.9434%204.88287L12.8458%203.77539L10.6504%208.21254Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M5.34041%203.81445L4.2832%204.88341L7.45958%208.09751L5.34041%203.81445Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M9.1249%2010.8611L7.86719%2012.1328L9.1249%2013.4045L10.3826%2012.1328L9.1249%2010.8611Z'%20fill='%23D4AD89'/%3e%3cpath%20d='M3.83336%2010.0186L2.81425%208.9882L4.46197%207.31975L3.1857%206.0293L0.261719%208.9882L2.55709%2011.3091L3.83336%2010.0186Z'%20fill='%236A2F38'/%3e%3cpath%20d='M7.85517%208.49609L5.78124%2010.5931L3.81445%2012.5793L5.09072%2013.8698L9.13144%209.78414L7.85517%208.49609Z'%20fill='%236A2F38'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_1387_2790'%3e%3crect%20width='18'%20height='14'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e"
              alt="reason"
              className="me-2"
            />
            {t('form.reason')}
          </label>
          <select
            id="reason"
            name="reason"
            value={formData.reason}
            onChange={handleChange}
            required
            className="mt-1 p-2 w-full border border-gray-300 rounded-md focus:outline-none focus:ring-2 h-[40px] bg-[#F5F5F5] !text-gray"
          >
            <option value="">{t('form.select_option')}</option>
            <option value="self_development">{t('form.self_development')}</option>
            <option value="institutional_services">{t('form.institutional_services')}</option>
            <option value="training_for_myself">{t('form.training_for_myself')}</option>
          </select>
        </div>

        <input type="hidden" name="productId" value={formData.ivory_product_id} />

        <div className="col-span-full">
          <button
            type="submit"
            disabled={isSubmitting}
            className={`lg:w-[30%] md:w-[100%] w-full py-2 mt-4 bg-primary-tw text-white font-semibold rounded-md block mx-auto ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
              }`}
          >
            {isSubmitting ? t('form.submitting') : t('form.submit')}
          </button>
        </div>
      </form>
    </div>
  );
};

export default TrainingForm;