import React from 'react';
import InsuCompassLogo from '../../assets/InsuCompass_Logo.png';
import LocationSection from '../../components/LocationSection';
import PersonalInfoSection from '../../components/PersonalInfoSection';
import HouseholdInfoSection from '../../components/HouseholdInfoSection';
import EmploymentSection from '../../components/EmploymentSection';
import { UserProfile } from '../../interface';
import useProfileScreen from './useProfileScreen';

interface ProfilingScreenProps {
  onComplete: (userProfile: UserProfile) => void;
}

const ProfilingScreen: React.FC<ProfilingScreenProps> = ({ onComplete }) => {
  const {
    formData,
    userProfile,
    isValidatingZip,
    zipError,
    isLoading,
    handleZipChange,
    handleFormChange,
    handleSubmit,
  } = useProfileScreen({
    onComplete,
  });

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50">
      {/* Header */}
      <div className="fixed top-0 left-0 w-full bg-white shadow-sm border-b z-50">
        <div className="max-w-10xl mx-auto px-6 py-4">
          <div className="flex items-center space-x-3">
            <img src={InsuCompassLogo} alt="InsuCompass Logo" className="h-12 w-auto" />
            <div>
              <h1 className="text-2xl font-bold text-gray-900">InsuCompass</h1>
              <p className="text-sm text-gray-600">Your AI guide to U.S. Health Insurance</p>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 overflow-y-auto pt-20">
        <div className="max-w-2xl mx-auto px-6 py-12">
          <div className="text-center mb-8">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">Let's Get Started</h2>
            <p className="text-lg text-gray-600">Tell us about yourself to receive personalized insurance guidance</p>
          </div>
          <div className="space-y-6">
            {/* ZIP Code Section */}
            <LocationSection
              formData={formData}
              onChange={handleZipChange}
              isValidatingZip={isValidatingZip}
              zipError={zipError}
              userProfile={userProfile}
            />
            {/* Personal Information */}
            {userProfile.city && (
              <PersonalInfoSection formData={formData} onChange={handleFormChange} />
            )}
            {/* Household Information */}
            {userProfile.city && (
              <HouseholdInfoSection formData={formData} onChange={handleFormChange} />
            )}
            {/* Employment & Citizenship */}
            {userProfile.city && (
              <EmploymentSection formData={formData} onChange={handleFormChange} />
            )}
            {/* Submit Button */}
            {userProfile.city && (
              <button
                onClick={handleSubmit}
                disabled={isLoading}
                className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-8 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isLoading ? 'Starting Session...' : 'Start My Personalized Session'}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ProfilingScreen;