// import React, { useState, useEffect } from 'react';
// import { useNavigate, useParams } from 'react-router-dom';
// import { ICountry, IState, ICity } from 'country-state-city';
// import { Country, State, City } from 'country-state-city';
// import Swal from 'sweetalert2';
// import { editInsurasnce, updateInsurance } from '../../API';

// interface CompanyData {
//   _id: string;
//   company_name: string;
//   insurance_type: string;
//   contact: string;
//   email: string;
//   address: string;
//   country: string;
//   state: string;
//   city: string;
//   pincode: string;
//   website: string;
//   status: boolean;
// }

// const EditInsuranceCompany = () => {
//   const { id } = useParams();
//   const navigate = useNavigate();
//   const [loading, setLoading] = useState(false);
//   const [fetching, setFetching] = useState(true);
//   const [error, setError] = useState<string | null>(null);

//   const [companyData, setCompanyData] = useState<CompanyData>({
//     _id: "",
//     company_name: "",
//     insurance_type: "Health",
//     contact: "",
//     email: "",
//     address: "",
//     country: "",
//     state: "",
//     city: "",
//     pincode: "",
//     website: "",
//     status: true
//   });

//   const [countries, setCountries] = useState<ICountry[]>([]);
//   const [states, setStates] = useState<IState[]>([]);
//   const [cities, setCities] = useState<ICity[]>([]);

//   useEffect(() => {
//     setCountries(Country.getAllCountries());
//     fetchCompanyData();
//   }, [id]);

//   const fetchCompanyData = async () => {
//     try {
//       const response = await editInsurasnce(id);
//       if (response.status) {
//         const data = {
//           ...response.data,
//           status: response.data.status === "active"
//         };
//         setCompanyData(data);
//         loadGeoData(data);
//       } else {
//         throw new Error(response.message || 'Failed to fetch company data');
//       }
//     } catch (error: any) {
//       handleError(error);
//     } finally {
//       setFetching(false);
//     }
//   };

//   const loadGeoData = (data: CompanyData) => {
//     if (data.country) {
//       const countryCode = Country.getAllCountries().find(c => c.name === data.country)?.isoCode;
//       if (countryCode) {
//         const countryStates = State.getStatesOfCountry(countryCode);
//         setStates(countryStates);

//         if (data.state) {
//           const stateCode = countryStates.find(s => s.name === data.state)?.isoCode;
//           if (stateCode) {
//             const stateCities = City.getCitiesOfState(countryCode, stateCode);
//             setCities(stateCities);
//           }
//         }
//       }
//     }
//   };

//   useEffect(() => {
//     if (companyData.country) {
//       const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
//       if (countryCode) {
//         setStates(State.getStatesOfCountry(countryCode));
//       }
//     }
//   }, [companyData.country]);

//   useEffect(() => {
//     if (companyData.country && companyData.state) {
//       const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
//       const stateCode = states.find(s => s.name === companyData.state)?.isoCode;

//       if (countryCode && stateCode) {
//         setCities(City.getCitiesOfState(countryCode, stateCode));
//       }
//     }
//   }, [companyData.state]);

//   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
//     const { name, value, type } = e.target;
//     const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : null;

//     setCompanyData(prev => ({
//       ...prev,
//       [name]: type === 'checkbox' ? checked : value
//     }));
//   };

//   const handleSubmit = async (e: React.FormEvent) => {
//     e.preventDefault();
//     setLoading(true);
//     setError(null);

//     try {
//       const payload = {
//         ...companyData,
//         status: companyData.status ? "active" : "inactive"
//       };

//       const response = await updateInsurance(payload);
//       if (response.status) {
//         Swal.fire({
//           title: 'Success!',
//           text: 'Insurance company updated successfully',
//           icon: 'success',
//           confirmButtonText: 'OK'
//         }).then(() => navigate('/insurance'));
//       } else {
//         throw new Error(response.message || 'Failed to update insurance company');
//       }
//     } catch (error: any) {
//       handleError(error);
//     } finally {
//       setLoading(false);
//     }
//   };

//   const handleError = (error: any) => {
//     setError(error.message);
//     Swal.fire({
//       title: 'Error!',
//       text: error.message || 'Operation failed',
//       icon: 'error',
//       confirmButtonText: 'OK'
//     });
//   };

//   if (fetching) {
//     return (
//       <div className="flex justify-center items-center h-40">
//         <div className="w-12 h-12 border-t-4 border-blue-500 border-solid rounded-full animate-spin"></div>
//       </div>
//     );
//   }

//   return (
//     <div className="mx-auto p-4 ">
//       {error ? (
//         <div className="flex justify-center items-center h-40">
//           <p className="text-red-500">{error}</p>
//         </div>
//       ) : (
//         <form onSubmit={handleSubmit} className="space-y-6 w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md">
//           <h2 className="text-2xl font-semibold mb-4 text-gray-800 dark:text-white">Edit Insurance Company</h2>

//           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
//             {/* Company Name */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Company Name</label>
//               <input
//                 type="text"
//                 name="company_name"
//                 value={companyData.company_name}
//                 onChange={handleChange}
//                 required
//                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                 placeholder="Enter company name"
//               />
//             </div>

//             {/* Insurance Type */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Insurance Type</label>
//               <select
//                 name="insurance_type"
//                 value={companyData.insurance_type}
//                 onChange={handleChange}
//                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//               >
//                 <option value="Health">Health</option>
//                 <option value="Life">Life</option>
//                 <option value="Auto">Auto</option>
//                 <option value="Property">Property</option>
//                 <option value="Travel">Travel</option>
//               </select>
//             </div>

//             {/* Contact */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Contact Number</label>
//               <input
//                 type="tel"
//                 name="contact"
//                 value={companyData.contact}
//                 onChange={handleChange}
//                 required
//                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                 placeholder="Enter contact number"
//               />
//             </div>

//             {/* Email */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Email</label>
//               <input
//                 type="email"
//                 name="email"
//                 value={companyData.email}
//                 onChange={handleChange}
//                 required
//                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                 placeholder="Enter email"
//               />
//             </div>

//             {/* Address */}
//             <div className="md:col-span-2">
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Address</label>
//               <input
//                 type="text"
//                 name="address"
//                 value={companyData.address}
//                 onChange={handleChange}
//                 required
//                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                 placeholder="Enter address"
//               />
//             </div>

//             {/* Country */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Country</label>
//               <select
//                 name="country"
//                 value={companyData.country}
//                 onChange={handleChange}
//                 required
//                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//               >
//                 <option value="">Select Country</option>
//                 {countries.map(country => (
//                   <option key={country.isoCode} value={country.name}>
//                     {country.name}
//                   </option>
//                 ))}
//               </select>
//             </div>

//             {/* State */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">State</label>
//               <select
//                 name="state"
//                 value={companyData.state}
//                 onChange={handleChange}
//                 required
//                 disabled={!companyData.country}
//                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//               >
//                 <option value="">Select State</option>
//                 {states.map(state => (
//                   <option key={state.isoCode} value={state.name}>
//                     {state.name}
//                   </option>
//                 ))}
//               </select>
//             </div>

//             {/* City */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">City</label>
//               <select
//                 name="city"
//                 value={companyData.city}
//                 onChange={handleChange}
//                 required
//                 disabled={!companyData.state}
//                 className="form-select w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//               >
//                 <option value="">Select City</option>
//                 {cities.map(city => (
//                   <option key={city.name} value={city.name}>
//                     {city.name}
//                   </option>
//                 ))}
//               </select>
//             </div>

//             {/* Pincode */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Pincode</label>
//               <input
//                 type="text"
//                 name="pincode"
//                 value={companyData.pincode}
//                 onChange={handleChange}
//                 required
//                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                 placeholder="Enter pincode"
//               />
//             </div>

//             {/* Website */}
//             <div>
//               <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Website</label>
//               <input
//                 type="url"
//                 name="website"
//                 value={companyData.website}
//                 onChange={handleChange}
//                 className="form-input w-full dark:bg-gray-700 dark:border-gray-600 dark:text-white"
//                 placeholder="Enter website URL"
//               />
//             </div>

//             {/* Status */}
//             <div className="flex items-center">
//               <input
//                 type="checkbox"
//                 name="status"
//                 id="status"
//                 checked={companyData.status}
//                 onChange={handleChange}
//                 className="form-checkbox h-5 w-5 text-blue-600"
//               />
//               <label htmlFor="status" className="ml-2 block text-gray-700 dark:text-gray-300 font-semibold">
//                 Active
//               </label>
//             </div>
//           </div>

//           <div className="flex justify-end space-x-4 mt-6">
//             <button
//               type="button"
//               onClick={() => navigate('/insurance')}
//               className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700"
//             >
//               Cancel
//             </button>
//             <button
//               type="submit"
//               className="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
//               disabled={loading}
//             >
//               {loading ? 'Updating...' : 'Update Company'}
//             </button>
//           </div>
//         </form>
//       )}
//     </div>
//   );
// };

// export default EditInsuranceCompany;




import React, { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { ICountry, IState, ICity } from 'country-state-city';
import { Country, State, City } from 'country-state-city';
import Swal from 'sweetalert2';
import { editInsurasnce, updateInsurance } from '../../API';
import { FaBuilding, FaPhone, FaEnvelope, FaMapMarkerAlt, FaGlobe } from 'react-icons/fa';
import { useLoader } from '../../store/LoaderProvider';

interface CompanyData {
  _id: string;
  company_name: string;
  insurance_type: string;
  contact: string;
  email: string;
  address: string;
  country: string;
  state: string;
  city: string;
  pincode: string;
  website: string;
  status: boolean;
}

const EditInsuranceCompany = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [fetching, setFetching] = useState(false);
  const [error, setError] = useState<string | null>(null);
     const { showLoader, hideLoader } = useLoader();

  const [companyData, setCompanyData] = useState<CompanyData>({
    _id: "",
    company_name: "",
    insurance_type: "Health",
    contact: "",
    email: "",
    address: "",
    country: "",
    state: "",
    city: "",
    pincode: "",
    website: "",
    status: true
  });

  const [countries, setCountries] = useState<ICountry[]>([]);
  const [states, setStates] = useState<IState[]>([]);
  const [cities, setCities] = useState<ICity[]>([]);

  useEffect(() => {
    setCountries(Country.getAllCountries());
    fetchCompanyData();
  }, [id]);

  const fetchCompanyData = async () => {
    try {
      showLoader()
      const response = await editInsurasnce(id);
      if (response.status) {
        const data = {
          ...response.data,
          status: response.data.status === "active"
        };
        setCompanyData(data);
        loadGeoData(data);
      } else {
        throw new Error(response.message || 'Failed to fetch company data');
      }
    } catch (error: any) {
      setError(error.message);
      Swal.fire({
        title: 'Error!',
        text: error.message || 'Failed to fetch company data',
        icon: 'error',
        confirmButtonColor: '#A8916A'
      });
    } finally {
      hideLoader()
    }
  };

  const loadGeoData = (data: CompanyData) => {
    if (data.country) {
      const countryCode = Country.getAllCountries().find(c => c.name === data.country)?.isoCode;
      if (countryCode) {
        const countryStates = State.getStatesOfCountry(countryCode);
        setStates(countryStates);

        if (data.state) {
          const stateCode = countryStates.find(s => s.name === data.state)?.isoCode;
          if (stateCode) {
            const stateCities = City.getCitiesOfState(countryCode, stateCode);
            setCities(stateCities);
          }
        }
      }
    }
  };

  useEffect(() => {
    if (companyData.country) {
      const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
      if (countryCode) {
        setStates(State.getStatesOfCountry(countryCode));
      }
    }
  }, [companyData.country]);

  useEffect(() => {
    if (companyData.country && companyData.state) {
      const countryCode = countries.find(c => c.name === companyData.country)?.isoCode;
      const stateCode = states.find(s => s.name === companyData.state)?.isoCode;

      if (countryCode && stateCode) {
        setCities(City.getCitiesOfState(countryCode, stateCode));
      }
    }
  }, [companyData.state]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    const checked = type === 'checkbox' ? (e.target as HTMLInputElement).checked : null;

    setCompanyData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      const payload = {
        ...companyData,
        status: companyData.status ? "active" : "inactive"
      };

      const response = await updateInsurance(payload);
      if (response.status) {
        Swal.fire({
          title: 'Success!',
          text: 'Insurance company updated successfully',
          icon: 'success',
          confirmButtonColor: '#A8916A'
        }).then(() => navigate('/insurance'));
      } else {
        throw new Error(response.message || 'Failed to update insurance company');
      }
    } catch (error: any) {
      setError(error.message);
      Swal.fire({
        title: 'Error!',
        text: error.message || 'Failed to update insurance company',
        icon: 'error',
        confirmButtonColor: '#A8916A'
      });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="  mx-auto p-4">
      {error && (
        <div className="p-4 mb-6 bg-danger-light text-danger rounded-lg">
          {error}
        </div>
      )}

      {fetching ? (
          <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-50 z-[9999]">
            <div className="w-16 h-16 border-t-4 border-primary-DEFAULT border-solid rounded-full animate-spin"></div>
          </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-6">
          <div className="p-6 bg-white rounded-lg shadow-md border border-gray-100 dark:bg-gray-900 dark:border-gray-700">
            <h2 className="text-2xl font-semibold text-secondary dark:text-white mb-4 border-b border-primary-light pb-2">
              Update Insurance Company
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {/* Company Name */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Company Name *
                </label>
                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                  <FaBuilding className="text-primary" />
                  <input
                    type="text"
                    name="company_name"
                    value={companyData.company_name}
                    onChange={handleChange}
                    required
                    className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                    placeholder="Enter company name"
                  />
                </div>
              </div>

              {/* Insurance Type */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Insurance Type *
                </label>
                <div className="relative">
                  <select
                    name="insurance_type"
                    value={companyData.insurance_type}
                    onChange={handleChange}
                    className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                  >
                    <option value="Health">Health</option>
                    <option value="Life">Life</option>
                    <option value="Auto">Auto</option>
                    <option value="Property">Property</option>
                    <option value="Travel">Travel</option>
                  </select>
                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </div>
              </div>

              {/* Contact */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Contact Number *
                </label>
                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                  <FaPhone className="text-primary" />
                  <input
                    type="tel"
                    name="contact"
                    value={companyData.contact}
                    onChange={handleChange}
                    required
                    className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                    placeholder="Enter contact number"
                  />
                </div>
              </div>

              {/* Email */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Email *
                </label>
                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                  <FaEnvelope className="text-primary" />
                  <input
                    type="email"
                    name="email"
                    value={companyData.email}
                    onChange={handleChange}
                    required
                    className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                    placeholder="Enter email"
                  />
                </div>
              </div>

              {/* Address */}
              <div className="w-full md:col-span-2">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Address *
                </label>
                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                  <FaMapMarkerAlt className="text-primary" />
                  <input
                    type="text"
                    name="address"
                    value={companyData.address}
                    onChange={handleChange}
                    required
                    className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                    placeholder="Enter address"
                  />
                </div>
              </div>

              {/* Country */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Country *
                </label>
                <div className="relative">
                  <select
                    name="country"
                    value={companyData.country}
                    onChange={handleChange}
                    required
                    className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                  >
                    <option value="">Select Country</option>
                    {countries.map(country => (
                      <option key={country.isoCode} value={country.name}>
                        {country.name}
                      </option>
                    ))}
                  </select>
                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </div>
              </div>

              {/* State */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  State *
                </label>
                <div className="relative">
                  <select
                    name="state"
                    value={companyData.state}
                    onChange={handleChange}
                    required
                    disabled={!companyData.country}
                    className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                  >
                    <option value="">Select State</option>
                    {states.map(state => (
                      <option key={state.isoCode} value={state.name}>
                        {state.name}
                      </option>
                    ))}
                  </select>
                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </div>
              </div>

              {/* City */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  City *
                </label>
                <div className="relative">
                  <select
                    name="city"
                    value={companyData.city}
                    onChange={handleChange}
                    required
                    disabled={!companyData.state}
                    className="appearance-none w-full bg-gray-50 dark:bg-gray-800 dark:text-white p-2 pr-8 rounded-md border border-gray-200 dark:border-gray-700 focus:border-primary focus:ring-1 focus:ring-primary-light"
                  >
                    <option value="">Select City</option>
                    {cities.map(city => (
                      <option key={city.name} value={city.name}>
                        {city.name}
                      </option>
                    ))}
                  </select>
                  <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                    <svg className="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </div>
              </div>

              {/* Pincode */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Pincode *
                </label>
                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                  <input
                    type="text"
                    name="pincode"
                    value={companyData.pincode}
                    onChange={handleChange}
                    required
                    className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                    placeholder="Enter pincode"
                  />
                </div>
              </div>

              {/* Website */}
              <div className="w-full">
                <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                  Website
                </label>
                <div className="flex items-center space-x-2 bg-gray-50 dark:bg-gray-800 p-2 rounded-md border border-gray-200 dark:border-gray-700 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary-light">
                  <FaGlobe className="text-primary" />
                  <input
                    type="url"
                    name="website"
                    value={companyData.website}
                    onChange={handleChange}
                    className="w-full bg-transparent dark:bg-gray-800 dark:text-white focus:outline-none"
                    placeholder="Enter website URL"
                  />
                </div>
              </div>

              {/* Status */}
              <div className="w-full flex items-center">
                <label className="inline-flex items-center cursor-pointer">
                  <input
                    type="checkbox"
                    name="status"
                    checked={companyData.status}
                    onChange={handleChange}
                    className="sr-only peer"
                  />
                  <div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary-light rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary"></div>
                  <span className="ml-3 text-sm font-medium text-secondary dark:text-gray-300">
                    Active
                  </span>
                </label>
              </div>
            </div>
          </div>

          <div className="flex justify-end space-x-4">
            <button
              type="button"
              onClick={() => navigate('/insurance')}
              className="px-6 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={loading}
              className="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary-light focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-colors disabled:opacity-70 disabled:cursor-not-allowed"
            >
              {loading ? (
                <span className="flex items-center justify-center">
                  <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  Updating...
                </span>
              ) : (
                'Update Company'
              )}
            </button>
          </div>
        </form>
      )}
    </div>
  );
};

export default EditInsuranceCompany;