// 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 } from '../../API';

// const ViewInsurance = () => {
//     const { id } = useParams();
//     const navigate = useNavigate();
//     const [fetching, setFetching] = useState(true);
//     const [error, setError] = useState<string | null>(null);
    
//     const [companyData, setCompanyData] = useState({
//         _id: "",
//         company_name: "",
//         insurance_type: "Health",
//         contact: "",
//         email: "",
//         address: "",
//         country: "",
//         state: "",
//         city: "",
//         pincode: "",
//         website: "",
//         status: true
//     });

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

//     useEffect(() => {
//         // Load countries on component mount
//         setCountries(Country.getAllCountries());
        
//         // Fetch existing company data
//         const fetchCompanyData = async () => {
//             try {
//                 const response = await editInsurasnce(id);
//                 if (response.status) {
//                     setCompanyData({
//                         _id: response.data._id,
//                         company_name: response.data.company_name,
//                         insurance_type: response.data.insurance_type,
//                         contact: response.data.contact,
//                         email: response.data.email,
//                         address: response.data.address,
//                         country: response.data.country,
//                         state: response.data.state,
//                         city: response.data.city,
//                         pincode: response.data.pincode,
//                         website: response.data.website,
//                         status: response.data.status === "active"
//                     });
                    
//                     // Load states and cities based on the fetched data
//                     const countryCode = Country.getAllCountries().find(c => c.name === response.data.country)?.isoCode;
//                     if (countryCode) {
//                         const countryStates = State.getStatesOfCountry(countryCode);
//                         setStates(countryStates);
                        
//                         const stateCode = countryStates.find(s => s.name === response.data.state)?.isoCode;
//                         if (stateCode) {
//                             setCities(City.getCitiesOfState(countryCode, stateCode));
//                         }
//                     }
//                 } 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',
//                     confirmButtonText: 'OK'
//                 }).then(() => {
//                     navigate('/insurance');
//                 });
//             } finally {
//                 setFetching(false);
//             }
//         };

//         fetchCompanyData();
//     }, [id]);

//     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>
//             ) : (
//                 <div 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">View 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>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.company_name}
//                             </div>
//                         </div>

//                         {/* Insurance Type */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Insurance Type</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.insurance_type}
//                             </div>
//                         </div>

//                         {/* Contact */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Contact Number</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.contact}
//                             </div>
//                         </div>

//                         {/* Email */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Email</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.email}
//                             </div>
//                         </div>

//                         {/* Address */}
//                         <div className="md:col-span-2">
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Address</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.address}
//                             </div>
//                         </div>

//                         {/* Country */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Country</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.country}
//                             </div>
//                         </div>

//                         {/* State */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">State</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.state}
//                             </div>
//                         </div>

//                         {/* City */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">City</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.city}
//                             </div>
//                         </div>

//                         {/* Pincode */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Pincode</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.pincode}
//                             </div>
//                         </div>

//                         {/* Website */}
//                         <div>
//                             <label className="block text-gray-700 dark:text-gray-300 font-semibold mb-2">Website</label>
//                             <div className="p-2 bg-gray-100 dark:bg-gray-700 rounded-md">
//                                 {companyData.website || 'N/A'}
//                             </div>
//                         </div>

//                         {/* Status */}
//                         <div className="flex items-center">
//                             <div className="h-5 w-5 rounded border border-gray-300 dark:border-gray-600 flex items-center justify-center">
//                                 {companyData.status && (
//                                     <svg className="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
//                                         <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
//                                     </svg>
//                                 )}
//                             </div>
//                             <label className="ml-2 block text-gray-700 dark:text-gray-300 font-semibold">
//                                 {companyData.status ? 'Active' : 'Inactive'}
//                             </label>
//                         </div>
//                     </div>

//                     {/* Button */}
//                     <div className="flex justify-end mt-6">
//                         <button
//                             type="button"
//                             onClick={() => navigate('/insurance')}
//                             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"
//                         >
//                             Back to List
//                         </button>
//                     </div>
//                 </div>
//             )}
//         </div>
//     );
// };

// export default ViewInsurance;




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 } from '../../API';
import { FaBuilding, FaPhone, FaEnvelope, FaMapMarkerAlt, FaGlobe, FaCheck } 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 ViewInsurance = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [fetching, setFetching] = useState(false);
  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[]>([]);
     const { showLoader, hideLoader } = useLoader();

  useEffect(() => {
    setCountries(Country.getAllCountries());
    const fetchCompanyData = async () => {
      try {
        showLoader()
        const response = await editInsurasnce(id);
        if (response.status) {
          const data = {
            ...response.data,
            status: response.data.status === "active"
          };
          setCompanyData(data);

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

            const stateCode = countryStates.find(s => s.name === response.data.state)?.isoCode;
            if (stateCode) {
              setCities(City.getCitiesOfState(countryCode, stateCode));
            }
          }
        } 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'
        }).then(() => {
          navigate('/insurance');
        });
      } finally {
        hideLoader()
      }
    };

    fetchCompanyData();
  }, [id, navigate]);

  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>
      ) : (
        <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">
              Insurance Company Details
          </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">
                <FaBuilding className="text-primary" />
                <span className="w-full text-secondary dark:text-white">
                  {companyData.company_name}
                </span>
              </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="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">
                <span className="w-full text-secondary dark:text-white">
                  {companyData.insurance_type}
                </span>
              </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">
                <FaPhone className="text-primary" />
                <span className="w-full text-secondary dark:text-white">
                  {companyData.contact}
                </span>
              </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">
                <FaEnvelope className="text-primary" />
                <span className="w-full text-secondary dark:text-white">
                  {companyData.email}
                </span>
              </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">
                <FaMapMarkerAlt className="text-primary" />
                <span className="w-full text-secondary dark:text-white">
                  {companyData.address}
                </span>
              </div>
            </div>

            {/* Country */}
            <div className="w-full">
              <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                Country
              </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">
                <span className="w-full text-secondary dark:text-white">
                  {companyData.country}
                </span>
              </div>
            </div>

            {/* State */}
            <div className="w-full">
              <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                State
              </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">
                <span className="w-full text-secondary dark:text-white">
                  {companyData.state}
                </span>
              </div>
            </div>

            {/* City */}
            <div className="w-full">
              <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                City
              </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">
                <span className="w-full text-secondary dark:text-white">
                  {companyData.city}
                </span>
              </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">
                <span className="w-full text-secondary dark:text-white">
                  {companyData.website || 'N/A'}
                </span>
              </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">
                <FaGlobe className="text-primary" />
                <span className="w-full text-secondary dark:text-white">
                  {companyData.website || 'N/A'}
                </span>
              </div>
            </div>

            {/* Status */}
            <div className="w-full flex items-center">
              <label className="block text-secondary dark:text-gray-300 font-medium mb-1">
                Status
              </label>
              <div className="flex items-center space-x-2">
                <div className="relative w-11 h-6 bg-gray-200 rounded-full dark:bg-gray-700">
                  <div className={`absolute top-[2px] start-[2px] h-5 w-5 rounded-full bg-white border border-gray-300 dark:border-gray-600 transition-all ${companyData.status ? 'translate-x-5 bg-primary' : ''}`}></div>
                </div>
                <span className="ml-3 text-sm font-medium text-secondary dark:text-gray-300">
                  {companyData.status ? 'Active' : 'Inactive'}
                </span>
              </div>
            </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-secondary dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
            >
              Back 
            </button>
          </div>
        </div>
      )}
    </div>
  );
};

export default ViewInsurance;