import { useState } from 'react';
import verificationImage from '/src/images/registration/verification_image.png';
import { Camera } from 'lucide-react';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../app/store';
import { setPurpose, updateFieldAndSaveToAPI } from '../../app/reducers/registrationstep1';

// Add custom CSS for hiding scrollbar
const scrollbarHideStyle = `
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
`;

export default function LookingForNoInfo() {
    const {purpose} = useSelector((state: RootState) => state.registrationstep1);
    const dispatch = useDispatch<AppDispatch>();
    const [guardianImage, setGuardianImage] = useState<string | null>(null);
    const handlePurposeChange = (selectedPurpose: string) => {
        dispatch(setPurpose(selectedPurpose));
        dispatch(updateFieldAndSaveToAPI({ fieldName: 'purpose', value: { purpose: selectedPurpose } }));
    };

    const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = (event) => {
                setGuardianImage(event.target?.result as string);
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    };

    return (
        <div className=" bg-white rounded-lg">
            {/* Add style tag for custom CSS */}
            <style>{scrollbarHideStyle}</style>
            
            {/* Purpose of joining section */}
            <div className="mb-6">
                <h3 className="text-lg font-medium mb-3">Purpose of joining?</h3>
                <div className="overflow-x-auto scrollbar-hide flex items-center space-x-4">
                    <label className="flex items-center space-x-2 cursor-pointer">
                        <div className="relative flex items-center justify-center">
                            <input
                                type="radio"
                                name="purpose"
                                value="agent"
                                checked={ purpose === 'agent'}
                                onChange={() => handlePurposeChange('agent')}
                                className="appearance-none w-5 h-5 border border-gray-300 rounded-full checked:border-primary"
                            />
                            { purpose === 'agent' && (
                                <div className="absolute w-2.5 h-2.5 bg-primary rounded-full"></div>
                            )}
                        </div>
                        <span>Agent</span>
                    </label>
                    
                    <label className="flex items-center space-x-2 cursor-pointer">
                        <div className="relative flex items-center justify-center">
                            <input
                                type="radio"
                                name="purpose"
                                value="business"
                                checked={ purpose === 'business'}
                                onChange={() => handlePurposeChange('business')}
                                className="appearance-none w-5 h-5 border border-gray-300 rounded-full checked:border-primary"
                            />
                            { purpose === 'business' && (
                                <div className="absolute w-2.5 h-2.5 bg-primary rounded-full"></div>
                            )}
                        </div>
                        <span>Business</span>
                    </label>
                    
                    <label className="flex items-center space-x-2 cursor-pointer">
                        <div className="relative flex items-center justify-center">
                            <input
                                type="radio"
                                name="purpose"
                                value="influencer"
                                checked={ purpose === 'influencer'}
                                onChange={() => handlePurposeChange('influencer')}
                                className="appearance-none w-5 h-5 border border-gray-300 rounded-full checked:border-primary"
                            />
                            { purpose === 'influencer' && (
                                <div className="absolute w-2.5 h-2.5 bg-primary rounded-full"></div>
                            )}
                        </div>
                        <span>Influencer</span>
                    </label>
                    
                    <label className="flex items-center space-x-2 cursor-pointer">
                        <div className="relative flex items-center justify-center">
                            <input
                                type="radio"
                                name="purpose"
                                value="visitor"
                                checked={ purpose === 'visitor'}
                                onChange={() => handlePurposeChange('visitor')}
                                className="appearance-none w-5 h-5 border border-gray-300 rounded-full checked:border-primary"
                            />
                            { purpose === 'visitor' && (
                                <div className="absolute w-2.5 h-2.5 bg-primary rounded-full"></div>
                            )}
                        </div>
                        <span>Visitor</span>
                    </label>
                </div>
            </div>

            {/* Guardian Info section */}
            <div className="pb-4">
                <h3 className="font-bold mb-2">User Information</h3>
                <p className="text-sm text-gray-600 mb-4">
                    We will only use this information to verify your account and will not be visible to others.
                </p>

                <div className="flex gap-6 items-center justify-center lg:justify-start">
                    {/* Guardian Picture Upload */}
                    <div className="border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center w-40 h-52 relative">
                        { guardianImage ? (
                            <img 
                                src={guardianImage} 
                                alt="Guardian" 
                                className="w-full h-full object-cover rounded-lg"
                            />
                        ) : (
                            <>
                                <span className="text-xs text-center text-gray-500 mb-2">Add Guardian picture</span>
                                <label htmlFor="guardianImage" className="cursor-pointer absolute bottom-4">
                                    <Camera className="h-6 w-6 text-red-400" />
                                </label>
                            </>
                        )}
                        <input 
                            type="file" 
                            id="guardianImage" 
                            className="hidden" 
                            accept="image/*"
                            onChange={handleImageUpload}
                        />
                    </div>

                    {/* Verification Image */}
                    <div className="flex flex-col items-center h-52">
                        <span className="text-sm mb-2">Verification Image</span>
                        <div className="w-32 h-46 rounded-lg overflow-hidden">
                            <img 
                                src={verificationImage} 
                                alt="Verification" 
                                className="w-full h-full object-cover"
                            />
                        </div>
                        <button className="mt-2 bg-red-400 text-white px-4 py-1 rounded-full text-sm">
                            Change
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
}