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
} from 'lucide-react';
import { navigateTo } from './Router';

export function SelfLearnerSignIn() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [showPassword, setShowPassword] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const handleSignIn = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    
    // Simulate authentication
    setTimeout(() => {
      setIsLoading(false);
      // Navigate to dashboard or success page
      navigateTo('/dashboard');
    }, 1500);
  };

  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: 'Expert-Led Programs',
      description: 'Learn from industry leaders and world-class faculty'
    },
    {
      icon: Users,
      title: 'Peer Learning Network',
      description: 'Connect with like-minded professionals and expand your network'
    },
    {
      icon: Target,
      title: 'Personalized Growth',
      description: 'Tailored learning paths to accelerate your leadership journey'
    },
    {
      icon: Award,
      title: 'Recognized Certification',
      description: 'Industry-recognized credentials to advance your career'
    }
  ];

  return (
    <div style={{ backgroundColor: '#FFFFFF' }}>
      {/* Main Content */}
      <div className="section-margin-x py-16">
        <div className="max-w-6xl mx-auto">
          
          {/* Header Section */}
          <div className="text-center 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)'
                }}
              >
                <User className="w-4 h-4" />
                Individual Learning
              </span>
            </div>
            
            <h1 
              className="mb-6"
              style={{
                fontSize: 'var(--font-h2)',
                fontWeight: 'var(--font-weight-h2)',
                lineHeight: 'var(--line-height-h2)',
                color: 'var(--color-black)',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              Welcome Back to Your Leadership Journey
            </h1>
            
            <p 
              className="mb-12 max-w-2xl mx-auto"
              style={{
                fontSize: 'var(--font-body-lg)',
                color: 'var(--color-gray-muted)',
                fontFamily: 'var(--font-family-base)',
                lineHeight: 'var(--line-height-body-lg)'
              }}
            >
              Continue your transformation with KLC's world-class leadership development 
              programs. Access your personalized learning dashboard and connect with a global 
              community of leaders.
            </p>
          </div>

          {/* 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 className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  {transformationFeatures.map((feature, index) => (
                    <div key={index} className="flex items-start gap-3">
                      <div 
                        className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
                        style={{ backgroundColor: 'var(--color-primary)' }}
                      >
                        <feature.icon className="w-4 h-4 text-white" />
                      </div>
                      <div className="flex-1">
                        <h3 
                          className="font-medium mb-1"
                          style={{
                            fontSize: 'var(--font-small)',
                            color: 'var(--color-black)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        >
                          {feature.title}
                        </h3>
                        <p 
                          style={{
                            fontSize: '0.75rem',
                            color: 'var(--color-gray-muted)',
                            fontFamily: 'var(--font-family-base)',
                            lineHeight: '1.3'
                          }}
                        >
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Your Learning Experience */}
              <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
                </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>

                {/* Existing Account Note */}
                <div 
                  className="mt-8 p-4 rounded-lg border"
                  style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
                >
                  <p 
                    className="mb-2"
                    style={{
                      fontSize: 'var(--font-small)',
                      fontWeight: '500',
                      color: 'var(--color-black)',
                      fontFamily: 'var(--font-family-base)'
                    }}
                  >
                    Already have an account?
                  </p>
                  <div className="space-y-2">
                    <button
                      onClick={() => navigateTo('/self-learner-signin')}
                      className="block text-blue-600 hover:text-blue-700 transition-colors"
                      style={{
                        fontSize: 'var(--font-small)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Sign in to your account
                    </button>
                    <button
                      onClick={() => navigateTo('/corporate-login')}
                      className="block text-blue-600 hover:text-blue-700 transition-colors"
                      style={{
                        fontSize: 'var(--font-small)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Corporate sign in
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Column - Sign In 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)'
                      }}
                    >
                      Welcome Back
                    </h2>
                    <p 
                      style={{
                        fontSize: 'var(--font-small)',
                        color: 'var(--color-gray-muted)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      Sign in to your KLC account
                    </p>
                  </div>

                  {/* Sign In Form */}
                  <form onSubmit={handleSignIn} className="space-y-6">
                    
                    {/* Email Field */}
                    <div>
                      <Label 
                        htmlFor="email"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontWeight: '500',
                          color: 'var(--color-black)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Email Address *
                      </Label>
                      <Input
                        id="email"
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        placeholder="you@example.com"
                        required
                        className="mt-2 h-12"
                        style={{
                          fontSize: 'var(--font-body)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      />
                    </div>

                    {/* Password Field */}
                    <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">
                        <Input
                          id="password"
                          type={showPassword ? 'text' : 'password'}
                          value={password}
                          onChange={(e) => setPassword(e.target.value)}
                          placeholder="Enter your password"
                          required
                          className="h-12 pr-12"
                          style={{
                            fontSize: 'var(--font-body)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        />
                        <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>

                    {/* Remember Me & Forgot Password */}
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-2">
                        <Checkbox
                          id="remember"
                          checked={rememberMe}
                          onCheckedChange={setRememberMe}
                        />
                        <Label 
                          htmlFor="remember"
                          style={{
                            fontSize: 'var(--font-small)',
                            color: 'var(--color-black)',
                            fontFamily: 'var(--font-family-base)'
                          }}
                        >
                          Remember me
                        </Label>
                      </div>
                      <button
                        type="button"
                        onClick={() => navigateTo('/forgot-password')}
                        className="text-blue-600 hover:text-blue-700 transition-colors"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Forgot password?
                      </button>
                    </div>

                    {/* Sign In 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" />
                      ) : (
                        <>
                          Sign In
                          <ArrowRight className="w-5 h-5" />
                        </>
                      )}
                    </Button>
                  </form>

                  {/* Demo Credentials */}
                  <div 
                    className="mt-8 p-4 rounded-lg border"
                    style={{ backgroundColor: 'rgba(0, 0, 0, 0.02)' }}
                  >
                    <h4 
                      className="mb-2 flex items-center gap-2"
                      style={{
                        fontSize: 'var(--font-small)',
                        fontWeight: '500',
                        color: 'var(--color-black)',
                        fontFamily: 'var(--font-family-base)'
                      }}
                    >
                      <div className="w-4 h-4 rounded-full bg-gray-300 flex items-center justify-center">
                        <span className="text-xs text-gray-600">i</span>
                      </div>
                      Demo credentials:
                    </h4>
                    <div 
                      style={{
                        fontSize: 'var(--font-small)',
                        color: 'var(--color-gray-muted)',
                        fontFamily: 'var(--font-family-base)',
                        lineHeight: 'var(--line-height-small)'
                      }}
                    >
                      Email: demo@klc.edu.in | Password: demo123
                    </div>
                  </div>

                  {/* Sign Up Links */}
                  <div className="text-center mt-8 space-y-3">
                    <div>
                      <span 
                        className="text-gray-600"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Don't have an account?{' '}
                      </span>
                      <button
                        onClick={() => navigateTo('/self-learner-signup')}
                        className="text-blue-600 hover:text-blue-700 transition-colors font-medium"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Sign up here
                      </button>
                    </div>
                    <div>
                      <span 
                        className="text-gray-600"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Looking for corporate access?{' '}
                      </span>
                      <button
                        onClick={() => navigateTo('/corporate-login')}
                        className="text-blue-600 hover:text-blue-700 transition-colors font-medium"
                        style={{
                          fontSize: 'var(--font-small)',
                          fontFamily: 'var(--font-family-base)'
                        }}
                      >
                        Corporate Sign In
                      </button>
                    </div>
                  </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)'
            }}
          >
            Need Help Getting Started?
          </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>
  );
}