import React, { useState } from 'react';
import { User, Mail, Phone, Lock, Globe, Clock, Camera, Save, X } from 'lucide-react';
import { Button, Card, Avatar, Input, Select } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { useAuthUser } from '../../../../stores/auth.store';
import { useToast } from '../../../../hooks/ui/useToast';

interface ProfileFormData {
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  language: string;
  timezone: string;
}

interface PasswordData {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

const ProfilePage: React.FC = () => {
  const user = useAuthUser();
  const { showToast } = useToast();
  
  const [isEditing, setIsEditing] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [showPasswordForm, setShowPasswordForm] = useState(false);
  
  const [profileData, setProfileData] = useState<ProfileFormData>({
    first_name: 'María',
    last_name: 'González Pérez',
    email: 'admin@bakery.com',
    phone: '+34 612 345 678',
    language: 'es',
    timezone: 'Europe/Madrid'
  });

  const [passwordData, setPasswordData] = useState<PasswordData>({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
  });

  const [errors, setErrors] = useState<Record<string, string>>({});

  const languageOptions = [
    { value: 'es', label: 'Español' },
    { value: 'ca', label: 'Català' },
    { value: 'en', label: 'English' }
  ];

  const timezoneOptions = [
    { value: 'Europe/Madrid', label: 'Madrid (CET/CEST)' },
    { value: 'Atlantic/Canary', label: 'Canarias (WET/WEST)' },
    { value: 'Europe/London', label: 'Londres (GMT/BST)' }
  ];

  const validateProfile = (): boolean => {
    const newErrors: Record<string, string> = {};
    
    if (!profileData.first_name.trim()) {
      newErrors.first_name = 'El nombre es requerido';
    }
    
    if (!profileData.last_name.trim()) {
      newErrors.last_name = 'Los apellidos son requeridos';
    }
    
    if (!profileData.email.trim()) {
      newErrors.email = 'El email es requerido';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileData.email)) {
      newErrors.email = 'Email inválido';
    }

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

  const validatePassword = (): boolean => {
    const newErrors: Record<string, string> = {};
    
    if (!passwordData.currentPassword) {
      newErrors.currentPassword = 'Contraseña actual requerida';
    }
    
    if (!passwordData.newPassword) {
      newErrors.newPassword = 'Nueva contraseña requerida';
    } else if (passwordData.newPassword.length < 8) {
      newErrors.newPassword = 'Mínimo 8 caracteres';
    }
    
    if (passwordData.newPassword !== passwordData.confirmPassword) {
      newErrors.confirmPassword = 'Las contraseñas no coinciden';
    }

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

  const handleSaveProfile = async () => {
    if (!validateProfile()) return;
    
    setIsLoading(true);
    
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      setIsEditing(false);
      showToast({
        type: 'success',
        title: 'Perfil actualizado',
        message: 'Tu información ha sido guardada correctamente'
      });
    } catch (error) {
      showToast({
        type: 'error',
        title: 'Error',
        message: 'No se pudo actualizar tu perfil'
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleChangePassword = async () => {
    if (!validatePassword()) return;
    
    setIsLoading(true);
    
    try {
      // Simulate API call
      await new Promise(resolve => setTimeout(resolve, 1000));
      
      setShowPasswordForm(false);
      setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
      showToast({
        type: 'success',
        title: 'Contraseña actualizada',
        message: 'Tu contraseña ha sido cambiada correctamente'
      });
    } catch (error) {
      showToast({
        type: 'error',
        title: 'Error',
        message: 'No se pudo cambiar tu contraseña'
      });
    } finally {
      setIsLoading(false);
    }
  };

  const handleInputChange = (field: keyof ProfileFormData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setProfileData(prev => ({ ...prev, [field]: e.target.value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  const handleSelectChange = (field: keyof ProfileFormData) => (value: string) => {
    setProfileData(prev => ({ ...prev, [field]: value }));
  };

  const handlePasswordChange = (field: keyof PasswordData) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setPasswordData(prev => ({ ...prev, [field]: e.target.value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: '' }));
    }
  };

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Mi Perfil"
        description="Gestiona tu información personal y configuración de cuenta"
      />

      {/* Profile Header */}
      <Card className="p-6">
        <div className="flex items-center gap-6">
          <div className="relative">
            <Avatar
              src="https://images.unsplash.com/photo-1494790108755-2616b612b372?w=150&h=150&fit=crop&crop=face"
              name={`${profileData.first_name} ${profileData.last_name}`}
              size="xl"
              className="w-20 h-20"
            />
            <button className="absolute -bottom-1 -right-1 bg-color-primary text-white rounded-full p-2 shadow-lg hover:bg-color-primary-dark transition-colors">
              <Camera className="w-4 h-4" />
            </button>
          </div>
          <div className="flex-1">
            <h1 className="text-2xl font-bold text-text-primary mb-1">
              {profileData.first_name} {profileData.last_name}
            </h1>
            <p className="text-text-secondary">{profileData.email}</p>
            <div className="flex items-center gap-2 mt-2">
              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
              <span className="text-sm text-text-tertiary">En línea</span>
            </div>
          </div>
          <div className="flex gap-2">
            {!isEditing && (
              <Button
                variant="outline"
                onClick={() => setIsEditing(true)}
                className="flex items-center gap-2"
              >
                <User className="w-4 h-4" />
                Editar Perfil
              </Button>
            )}
            <Button
              variant="outline"
              onClick={() => setShowPasswordForm(!showPasswordForm)}
              className="flex items-center gap-2"
            >
              <Lock className="w-4 h-4" />
              Cambiar Contraseña
            </Button>
          </div>
        </div>
      </Card>

      {/* Profile Form */}
      <Card className="p-6">
        <h2 className="text-lg font-semibold mb-4">Información Personal</h2>
        
        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
          <Input
            label="Nombre"
            value={profileData.first_name}
            onChange={handleInputChange('first_name')}
            error={errors.first_name}
            disabled={!isEditing || isLoading}
            leftIcon={<User className="w-4 h-4" />}
          />
          
          <Input
            label="Apellidos"
            value={profileData.last_name}
            onChange={handleInputChange('last_name')}
            error={errors.last_name}
            disabled={!isEditing || isLoading}
          />
          
          <Input
            type="email"
            label="Correo Electrónico"
            value={profileData.email}
            onChange={handleInputChange('email')}
            error={errors.email}
            disabled={!isEditing || isLoading}
            leftIcon={<Mail className="w-4 h-4" />}
          />
          
          <Input
            type="tel"
            label="Teléfono"
            value={profileData.phone}
            onChange={handleInputChange('phone')}
            error={errors.phone}
            disabled={!isEditing || isLoading}
            placeholder="+34 600 000 000"
            leftIcon={<Phone className="w-4 h-4" />}
          />
          
          <Select
            label="Idioma"
            options={languageOptions}
            value={profileData.language}
            onChange={handleSelectChange('language')}
            disabled={!isEditing || isLoading}
            leftIcon={<Globe className="w-4 h-4" />}
          />
          
          <Select
            label="Zona Horaria"
            options={timezoneOptions}
            value={profileData.timezone}
            onChange={handleSelectChange('timezone')}
            disabled={!isEditing || isLoading}
            leftIcon={<Clock className="w-4 h-4" />}
          />
        </div>
        
        {isEditing && (
          <div className="flex gap-3 mt-6 pt-4 border-t">
            <Button
              variant="outline"
              onClick={() => setIsEditing(false)}
              disabled={isLoading}
              className="flex items-center gap-2"
            >
              <X className="w-4 h-4" />
              Cancelar
            </Button>
            <Button
              variant="primary"
              onClick={handleSaveProfile}
              isLoading={isLoading}
              loadingText="Guardando..."
              className="flex items-center gap-2"
            >
              <Save className="w-4 h-4" />
              Guardar Cambios
            </Button>
          </div>
        )}
      </Card>

      {/* Password Change Form */}
      {showPasswordForm && (
        <Card className="p-6">
          <h2 className="text-lg font-semibold mb-4">Cambiar Contraseña</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-4xl">
            <Input
              type="password"
              label="Contraseña Actual"
              value={passwordData.currentPassword}
              onChange={handlePasswordChange('currentPassword')}
              error={errors.currentPassword}
              disabled={isLoading}
              leftIcon={<Lock className="w-4 h-4" />}
            />
            
            <Input
              type="password"
              label="Nueva Contraseña"
              value={passwordData.newPassword}
              onChange={handlePasswordChange('newPassword')}
              error={errors.newPassword}
              disabled={isLoading}
              leftIcon={<Lock className="w-4 h-4" />}
            />
            
            <Input
              type="password"
              label="Confirmar Nueva Contraseña"
              value={passwordData.confirmPassword}
              onChange={handlePasswordChange('confirmPassword')}
              error={errors.confirmPassword}
              disabled={isLoading}
              leftIcon={<Lock className="w-4 h-4" />}
            />
          </div>
            
          <div className="flex gap-3 pt-6 mt-6 border-t">
            <Button
              variant="outline"
              onClick={() => {
                setShowPasswordForm(false);
                setPasswordData({ currentPassword: '', newPassword: '', confirmPassword: '' });
                setErrors({});
              }}
              disabled={isLoading}
            >
              Cancelar
            </Button>
            <Button
              variant="primary"
              onClick={handleChangePassword}
              isLoading={isLoading}
              loadingText="Cambiando..."
            >
              Cambiar Contraseña
            </Button>
          </div>
        </Card>
      )}
    </div>
  );
};

export default ProfilePage;