'use client';

import React, { useState } from 'react';
import Link from 'next/link';
import { 
  User, Phone, Mail, CreditCard, Lock, 
  AlertCircle, CheckCircle, Shield, ArrowRight 
} from 'lucide-react';

export default function RegisterPage() {
  const [formData, setFormData] = useState({
    fullName: '',
    phone: '',
    email: '',
    idType: 'ghana_card',
    idNumber: '',
    password: '',
    confirmPassword: '',
    agreeToTerms: false
  });

  const [errors, setErrors] = useState<Record<string, string>>({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  const validateForm = () => {
    const newErrors: Record<string, string> = {};

    // Name validation
    if (formData.fullName.trim().length < 3) {
      newErrors.fullName = "Full name must be at least 3 characters";
    }

    // Ghanaian Phone validation (10 digits starting with 0)
    const phoneRegex = /^0[2345]\d{8}$/;
    if (!phoneRegex.test(formData.phone)) {
      newErrors.phone = "Enter a valid 10-digit Ghanaian mobile number (e.g., 024XXXXXXX)";
    }

    // Email validation (optional but good for recovery)
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (formData.email && !emailRegex.test(formData.email)) {
      newErrors.email = "Please enter a valid email address";
    }

    // ID validation
    if (formData.idNumber.trim().length < 6) {
      newErrors.idNumber = "Please enter a valid ID number";
    }
    if (formData.idType === 'ghana_card' && !/^GHA-\d{9}-\d$/.test(formData.idNumber)) {
      newErrors.idNumber = "Ghana Card format should be GHA-XXXXXXXXX-X";
    }

    // Password validation
    if (formData.password.length < 8) {
      newErrors.password = "Password must be at least 8 characters long";
    }
    if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = "Passwords do not match";
    }

    // Terms validation
    if (!formData.agreeToTerms) {
      newErrors.agreeToTerms = "You must agree to the Terms and Conditions";
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value, type } = e.target;
    const val = type === 'checkbox' ? (e.target as HTMLInputElement).checked : value;
    
    setFormData(prev => ({ ...prev, [name]: val }));
    // Clear error when user starts typing
    if (errors[name]) {
      setErrors(prev => ({ ...prev, [name]: '' }));
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (validateForm()) {
      setIsSubmitting(true);
      
      // Simulate API call - In production, this data goes directly to your PHP backend
      // Ensure the payload strictly matches formData with no arbitrary values appended
      try {
        await new Promise(resolve => setTimeout(resolve, 1500));
        setSubmitSuccess(true);
      } catch (error) {
        setErrors({ submit: "Registration failed. Please try again." });
      } finally {
        setIsSubmitting(false);
      }
    }
  };

  if (submitSuccess) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-50 p-6">
        <div className="bg-white rounded-3xl p-8 max-w-md w-full text-center shadow-xl border border-gray-100">
          <div className="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
            <CheckCircle size={40} />
          </div>
          <h2 className="text-3xl font-bold mb-4 text-gray-900">Account Created!</h2>
          <p className="text-gray-600 mb-8">
            Your SwiftKash account has been successfully registered. You can now log in to apply for your first loan.
          </p>
          <Link href="/login" className="block w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-full transition-all">
            Proceed to Login
          </Link>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col md:flex-row font-sans">
      {/* Left Column - Form */}
      <div className="w-full md:w-1/2 flex flex-col justify-center px-6 py-12 md:px-16 lg:px-24 bg-white shadow-2xl z-10">
        <Link href="/" className="text-blue-600 font-bold text-2xl tracking-tight mb-12 inline-block">
          SwiftKash
        </Link>
        
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Create an Account</h1>
        <p className="text-gray-600 mb-8">Fill in your details to start applying for loans.</p>

        {errors.submit && (
          <div className="bg-red-50 text-red-600 p-4 rounded-xl flex items-start gap-3 mb-6">
            <AlertCircle className="mt-0.5 flex-shrink-0" size={18} />
            <p className="text-sm font-medium">{errors.submit}</p>
          </div>
        )}

        <form onSubmit={handleSubmit} className="space-y-5">
          {/* Full Name */}
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Full Legal Name</label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                <User size={18} />
              </div>
              <input
                type="text"
                name="fullName"
                value={formData.fullName}
                onChange={handleInputChange}
                className={`w-full pl-11 pr-4 py-3 rounded-xl border ${errors.fullName ? 'border-red-500 bg-red-50' : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200'} transition-all outline-none`}
                placeholder="As it appears on your ID"
              />
            </div>
            {errors.fullName && <p className="text-red-500 text-xs mt-1 font-medium">{errors.fullName}</p>}
          </div>

          {/* Phone Number */}
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Mobile Number (Mobile Money Registered)</label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                <Phone size={18} />
              </div>
              <input
                type="tel"
                name="phone"
                value={formData.phone}
                onChange={handleInputChange}
                className={`w-full pl-11 pr-4 py-3 rounded-xl border ${errors.phone ? 'border-red-500 bg-red-50' : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200'} transition-all outline-none`}
                placeholder="024 XXX XXXX"
              />
            </div>
            {errors.phone && <p className="text-red-500 text-xs mt-1 font-medium">{errors.phone}</p>}
          </div>

          {/* Email (Optional) */}
          <div>
            <label className="block text-sm font-bold text-gray-700 mb-1">Email Address (Optional)</label>
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none text-gray-400">
                <Mail size={18} />
              </div>
              <input
                type="email"
                name="email"
                value={formData.email}
                onChange={handleInputChange}
                className={`w-full pl-11 pr-4 py-3 rounded-xl border ${errors.email ? 'border-red-500 bg-red-50' : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200'} transition-all outline-none`}
                placeholder="you@example.com"
              />
            </div>
            {errors.email && <p className="text-red-500 text-xs mt-1 font-medium">{errors.email}</p>}
          </div>

          {/* ID Details */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">ID Type</label>
              <select
                name="idType"
                value={formData.idType}
                onChange={handleInputChange}
                className="w-full px-4 py-3 rounded-xl border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none bg-white"
              >
                <option value="ghana_card">Ghana Card</option>
                <option value="voter_id">Voter ID</option>
                <option value="passport">Passport</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">ID Number</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                  <CreditCard size={18} />
                </div>
                <input
                  type="text"
                  name="idNumber"
                  value={formData.idNumber}
                  onChange={handleInputChange}
                  className={`w-full pl-10 pr-4 py-3 rounded-xl border ${errors.idNumber ? 'border-red-500 bg-red-50' : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200'} transition-all outline-none`}
                  placeholder={formData.idType === 'ghana_card' ? 'GHA-000000000-0' : 'ID Number'}
                />
              </div>
              {errors.idNumber && <p className="text-red-500 text-xs mt-1 font-medium">{errors.idNumber}</p>}
            </div>
          </div>

          {/* Passwords */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Password</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                  <Lock size={18} />
                </div>
                <input
                  type="password"
                  name="password"
                  value={formData.password}
                  onChange={handleInputChange}
                  className={`w-full pl-10 pr-4 py-3 rounded-xl border ${errors.password ? 'border-red-500 bg-red-50' : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200'} transition-all outline-none`}
                  placeholder="Min 8 characters"
                />
              </div>
              {errors.password && <p className="text-red-500 text-xs mt-1 font-medium">{errors.password}</p>}
            </div>
            <div>
              <label className="block text-sm font-bold text-gray-700 mb-1">Confirm Password</label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                  <Lock size={18} />
                </div>
                <input
                  type="password"
                  name="confirmPassword"
                  value={formData.confirmPassword}
                  onChange={handleInputChange}
                  className={`w-full pl-10 pr-4 py-3 rounded-xl border ${errors.confirmPassword ? 'border-red-500 bg-red-50' : 'border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200'} transition-all outline-none`}
                  placeholder="Repeat password"
                />
              </div>
              {errors.confirmPassword && <p className="text-red-500 text-xs mt-1 font-medium">{errors.confirmPassword}</p>}
            </div>
          </div>

          {/* Terms Checkbox */}
          <div className="pt-2">
            <label className="flex items-start gap-3 cursor-pointer">
              <input
                type="checkbox"
                name="agreeToTerms"
                checked={formData.agreeToTerms}
                onChange={handleInputChange}
                className="mt-1 w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
              />
              <span className="text-sm text-gray-600 leading-relaxed">
                I agree to the <Link href="/terms" className="text-blue-600 font-bold hover:underline">Terms & Conditions</Link> and consent to my data being processed according to the <Link href="/privacy" className="text-blue-600 font-bold hover:underline">Privacy Policy</Link>.
              </span>
            </label>
            {errors.agreeToTerms && <p className="text-red-500 text-xs mt-1 font-medium ml-8">{errors.agreeToTerms}</p>}
          </div>

          {/* Submit Button */}
          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-bold py-4 rounded-xl transition-all flex items-center justify-center gap-2 mt-4"
          >
            {isSubmitting ? 'Creating Account...' : 'Create Account'}
            {!isSubmitting && <ArrowRight size={20} />}
          </button>
          
          <p className="text-center text-sm text-gray-600 mt-6">
            Already have an account? <Link href="/login" className="text-blue-600 font-bold hover:underline">Log in here</Link>
          </p>
        </form>
      </div>

      {/* Right Column - Value Prop & Trust */}
      <div className="hidden md:flex md:w-1/2 bg-gray-900 text-white flex-col justify-center px-16 lg:px-24 relative overflow-hidden">
        {/* Background Pattern/Image Overlay */}
        <div 
          className="absolute inset-0 z-0 opacity-20 bg-cover bg-center"
          style={{ backgroundImage: "url('https://images.unsplash.com/photo-1556761175-5973dc0f32b7?auto=format&fit=crop&q=80')" }} 
        />
        
        <div className="relative z-10">
          <h2 className="text-4xl lg:text-5xl font-bold mb-8 leading-tight">
            Fast access to funds when it matters most.
          </h2>
          
          <div className="space-y-8">
            <div className="flex items-start gap-5">
              <div className="w-12 h-12 rounded-full bg-blue-600/20 border border-blue-500 flex items-center justify-center flex-shrink-0">
                <Shield className="text-blue-400" size={24} />
              </div>
              <div>
                <h3 className="text-xl font-bold mb-1">Secure & Private</h3>
                <p className="text-gray-400">Your personal and financial data is encrypted and handled with the highest security standards.</p>
              </div>
            </div>
            
            <div className="flex items-start gap-5">
              <div className="w-12 h-12 rounded-full bg-blue-600/20 border border-blue-500 flex items-center justify-center flex-shrink-0">
                <CheckCircle className="text-blue-400" size={24} />
              </div>
              <div>
                <h3 className="text-xl font-bold mb-1">Clear Requirements</h3>
                <p className="text-gray-400">Only request the exact loan amount you need. We process exactly what you submit.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}