import React, { useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Card, CardContent } from './ui/card';
import { Checkbox } from './ui/checkbox';
import { 
  BookOpen, 
  Users, 
  Target, 
  Award, 
  ArrowRight, 
  Eye, 
  EyeOff,
  User,
  Mail,
  Lock,
  Phone
} from 'lucide-react';
import { navigateTo } from './Router';

export function SelfLearnerSignUp() {
  const [formData, setFormData] = useState({
    fullName: '',
    email: '',
    password: '',
    phoneNumber: ''
  });
  const [showPassword, setShowPassword] = useState(false);
  const [agreeToTerms, setAgreeToTerms] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!agreeToTerms) {
      alert('Please agree to the Terms of Service and Privacy Policy');
      return;
    }
    
    setIsLoading(true);
    
    // Simulate registration
    setTimeout(() => {
      setIsLoading(false);
      // Navigate to dashboard or success page
      navigateTo('https://klc-learner.wdiprojects.com');
    }, 2000);
  };

  const transformationFeatures = [
    {
      icon: BookOpen,
      title: 'World-Class Content',
      description: 'Access premium leadership courses from industry experts'
    },
    {
      icon: Users,
      title: 'Global Community',
      description: 'Join 25,000+ leaders from top organizations worldwide'
    },
    {
      icon: Award,
      title: 'Recognized Credentials',
      description: 'Earn certificates valued by Fortune 500 companies'
    },
    {
      icon: Target,
      title: 'Personalized Path',
      description: 'Get customized learning recommendations based on your goals'
    }
  ];

  const learningFeatures = [
    {
      icon: BookOpen,
      title: 'World-Class Content',
      description: 'Access cutting-edge leadership programs from industry experts and renowned faculty'
    },
    {
      icon: Users,
      title: 'Global Network',
      description: 'Connect with ambitious leaders worldwide and build lasting professional relationships'
    },
    {
      icon: Target,
      title: 'Personalized Learning',
      description: 'Get customized learning paths based on your goals and leadership style'
    },
    {
      icon: Award,
      title: 'Recognized Credentials',
      description: 'Earn certificates and credentials that advance your career and open new opportunities'
    }
  ];

  return (
    <div style={{ backgroundColor: '#FFFFFF' }}>
      {/* Main Content */}
      <div className="section-margin-x py-16">
        <div className="max-w-6xl mx-auto">

          {/* Two Column Layout */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
            
            {/* Left Column - Content */}
            <div>
              {/* Leadership Transformation Section */}
              <div className="mb-12">
                <div className="mb-6">
                  <span 
                    className="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium"
                    style={{
                      backgroundColor: 'rgba(248, 195, 1, 0.15)',
                      color: 'var(--color-black)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    ⭐ Join KLC Community
                  </span>
                </div>
                
                <h2 
                  className="mb-4"
                  style={{
                    fontSize: 'var(--font-h3)',
                    fontWeight: 'var(--font-weight-h3)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Start Your Leadership Transformation
                </h2>
                
                <p 
                  className="mb-8"
                  style={{
                    fontSize: 'var(--font-body)',
                    color: 'var(--color-gray-muted)',
                    fontFamily: 'var(--font-family-base)',
                    lineHeight: 'var(--line-height-body)'
                  }}
                >
                  Join thousands of professionals who have accelerated their careers through KLC's 
                  proven leadership development programs. Your journey to becoming an exceptional leader starts here.
                </p>
              </div>

              {/* Your Learning Experience Awaits */}
              <div>
                <h2 
                  className="mb-8"
                  style={{
                    fontSize: 'var(--font-h4)',
                    fontWeight: 'var(--font-weight-h4)',
                    color: 'var(--color-black)',
                    fontFamily: 'var(--font-family-base)'
                  }}
                >
                  Your Learning Experience Awaits
                </h2>

                <div className="space-y-6">
                  {learningFeatures.map((feature, index) => (
                    <div key={index} className="flex items-start gap-4">
                      <div 
                        className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: 'var(--color-primary)' }}
                      >
                        <feature.icon className="w-6 h-6 text-white" />
                      </div>
                      <div className="flex-1">
                        <h3 
                          className="font-medium mb-2"
                          style={{
                            fontSize: 'var(--font-body)',
                            color: 'var(--color-black)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        >
                          {feature.title}
                        </h3>
                        <p 
                          style={{
                            fontSize: 'var(--font-small)',
                            color: 'var(--color-gray-muted)',
                            fontFamily: 'var(--font-family-base)',
                            lineHeight: 'var(--line-height-small)'
                          }}
                        >
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Right Column - Sign Up Form */}
            <div>
              <Card className="shadow-lg border-0">
                <CardContent className="p-8">
                  
                  {/* Form Header */}
                  <div className="text-center mb-8">
                    <h2 
                      className="mb-2"
                      style={{
                        fontSize: 'var(--font-h4)',
                        fontWeight: 'var(--font-weight-h4)',
                        color: 'var(--color-black)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Create Your Account
                    </h2>
                    <p 
                      style={{
                        fontSize: 'var(--font-small)',
                        color: 'var(--color-gray-muted)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Join KLC and start your leadership journey
                    </p>
                  </div>

                  {/* Sign Up Form */}
                  <form onSubmit={handleSignUp} className="space-y-6">
                    
                    {/* Full Name */}
                    <div>
                      <Label 
                        htmlFor="fullName"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Full Name *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <User className="w-5 h-5" />
                        </div>
                        <Input
                          id="fullName"
                          type="text"
                          value={formData.fullName}
                          onChange={(e) => handleInputChange('fullName', e.target.value)}
                          placeholder="Your full name"
                          required
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Email Address */}
                    <div>
                      <Label 
                        htmlFor="email"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Email Address *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Mail className="w-5 h-5" />
                        </div>
                        <Input
                          id="email"
                          type="email"
                          value={formData.email}
                          onChange={(e) => handleInputChange('email', e.target.value)}
                          placeholder="you@example.com"
                          required
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Password */}
                    <div>
                      <Label 
                        htmlFor="password"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Password *
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Lock className="w-5 h-5" />
                        </div>
                        <Input
                          id="password"
                          type={showPassword ? 'text' : 'password'}
                          value={formData.password}
                          onChange={(e) => handleInputChange('password', e.target.value)}
                          placeholder="Create a strong password"
                          required
                          className="h-12 pl-12 pr-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                        <button
                          type="button"
                          onClick={() => setShowPassword(!showPassword)}
                          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
                        >
                          {showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
                        </button>
                      </div>
                    </div>

                    {/* Phone Number (Optional) */}
                    <div>
                      <Label 
                        htmlFor="phoneNumber"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Phone Number (Optional)
                      </Label>
                      <div className="relative mt-2">
                        <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500">
                          <Phone className="w-5 h-5" />
                        </div>
                        <Input
                          id="phoneNumber"
                          type="tel"
                          value={formData.phoneNumber}
                          onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
                          placeholder="+1 234 567 8900"
                          className="h-12 pl-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)',
                            backgroundColor: '#F3F3F5'
                          }}
                        />
                      </div>
                    </div>

                    {/* Terms and Conditions */}
                    <div className="flex items-start space-x-2">
                      <Checkbox
                        id="agreeToTerms"
                        checked={agreeToTerms}
                        onCheckedChange={setAgreeToTerms}
                        className="mt-1"
                      />
                      <Label 
                        htmlFor="agreeToTerms"
                        className="text-sm leading-relaxed"
                        style={{
                          fontSize: 'var(--font-small)',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)',
                          lineHeight: 'var(--line-height-small)'
                        }}
                      >
                        I agree to the{' '}
                        <span className="text-blue-600 hover:text-blue-700 cursor-pointer"
                        onClick={() => navigateTo('/term-condition')}
                        >
                          Terms of Service
                        </span>{' '}
                        and{' '}
                        <span className="text-blue-600 hover:text-blue-700 cursor-pointer"
                        onClick={() => navigateTo('/privacy-policy')}
                        >
                          Privacy Policy
                        </span>
                      </Label>
                    </div>

                    {/* Create Account Button */}
                    <Button
                      type="submit"
                      disabled={isLoading}
                      className="w-full h-14 text-white font-medium flex items-center justify-center gap-2"
                      style={{
                        backgroundColor: 'var(--color-primary)',
                        fontSize: 'var(--font-body)',
                        fontFamily: 'var(--font-family-base)',
                        borderRadius: '10px'
                      }}
                    >
                      {isLoading ? (
                        <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin" />
                      ) : (
                        <>
                          Create Account
                          <ArrowRight className="w-5 h-5" />
                        </>
                      )}
                    </Button>
                  </form>

                  {/* Sign In Link */}
                  <div className="text-center mt-6">
                    <span 
                      className="text-gray-600"
                      style={{
                        fontSize: 'var(--font-small)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Already have an account?{' '}
                    </span>
                    <button
                      onClick={() => navigateTo('/self-learner-signin')}
                      className="text-blue-600 hover:text-blue-700 transition-colors font-medium"
                      style={{
                        fontSize: 'var(--font-small)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Sign in here
                    </button>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>

      {/* Need Help Section - Separate Section Below */}
      {/* <div 
        className="section-margin-x py-12"
        style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
      >
        <div className="max-w-4xl mx-auto text-center">
          <h3 
            className="mb-4"
            style={{
              fontSize: 'var(--font-h4)',
              fontWeight: 'var(--font-weight-h4)',
              color: 'var(--color-black)',
              fontFamily: 'var(--font-family-base)'
            }}
          >
            Questions About Your Learning Journey?
          </h3>
          <p 
            className="mb-6"
            style={{
              fontSize: 'var(--font-body)',
              color: 'var(--color-gray-muted)',
              fontFamily: 'var(--font-family-base)',
              lineHeight: 'var(--line-height-body)'
            }}
          >
            Our learning advisors are here to help you choose the right programs and get the most out of your leadership development experience.
          </p>
          <Button
            variant="outline"
            className="border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white"
            style={{
              fontSize: 'var(--font-body)',
              fontFamily: 'var(--font-family-base)',
              fontWeight: '500',
              padding: '0.75rem 2rem',
              borderRadius: '10px'
            }}
          >
            Speak with Learning Advisor
          </Button>
        </div>
      </div> */}
    </div>
  );
}