import React, { useState } from 'react';
import { User, Mail, Phone, MapPin, Building, Shield, Activity, Settings, Edit3, Lock, Bell, Download } from 'lucide-react';
import { Button, Card, Badge, Avatar, Input, ProgressBar } from '../../../../components/ui';
import { PageHeader } from '../../../../components/layout';
import { ProfileSettings } from '../../../../components/domain/auth';

const ProfilePage: React.FC = () => {
  const [activeTab, setActiveTab] = useState('profile');
  const [isEditing, setIsEditing] = useState(false);
  const [userInfo, setUserInfo] = useState({
    name: 'María González',
    email: 'maria.gonzalez@panaderia.com',
    phone: '+34 123 456 789',
    address: 'Calle Mayor 123, Madrid',
    bakery: 'Panadería La Tradicional',
    role: 'Propietario'
  });

  const mockProfileStats = {
    profileCompletion: 85,
    securityScore: 94,
    lastLogin: '2 horas',
    activeSessions: 2,
    twoFactorEnabled: false,
    passwordLastChanged: '2 meses'
  };

  const handleSave = () => {
    setIsEditing(false);
    console.log('Profile updated:', userInfo);
  };

  const handleCancel = () => {
    setIsEditing(false);
  };

  const handleEnable2FA = () => {
    console.log('Enabling 2FA');
  };

  const handleChangePassword = () => {
    console.log('Change password');
  };

  const handleManageSessions = () => {
    console.log('Manage sessions');
  };

  return (
    <div className="p-6 space-y-6">
      <PageHeader
        title="Mi Perfil"
        description="Gestiona tu información personal y configuración de cuenta"
        action={
          <Button onClick={() => setIsEditing(!isEditing)}>
            <Edit3 className="w-4 h-4 mr-2" />
            {isEditing ? 'Guardar Cambios' : 'Editar Perfil'}
          </Button>
        }
      />

      {/* Profile Stats */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-4">
        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Perfil Completado</p>
              <p className="text-2xl font-bold text-[var(--color-success)]">{mockProfileStats.profileCompletion}%</p>
            </div>
            <User className="h-8 w-8 text-[var(--color-success)]" />
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Seguridad</p>
              <p className="text-2xl font-bold text-[var(--color-info)]">{mockProfileStats.securityScore}%</p>
            </div>
            <Shield className="h-8 w-8 text-[var(--color-info)]" />
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Último Acceso</p>
              <p className="text-2xl font-bold text-[var(--text-primary)]">{mockProfileStats.lastLogin}</p>
            </div>
            <Activity className="h-8 w-8 text-[var(--color-primary)]" />
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Sesiones</p>
              <p className="text-2xl font-bold text-purple-600">{mockProfileStats.activeSessions}</p>
            </div>
            <div className="h-8 w-8 bg-purple-100 rounded-full flex items-center justify-center">
              <Settings className="h-5 w-5 text-purple-600" />
            </div>
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">2FA</p>
              <p className="text-lg font-bold text-[var(--color-warning)]">{mockProfileStats.twoFactorEnabled ? 'Activo' : 'Pendiente'}</p>
            </div>
            <Lock className="h-8 w-8 text-[var(--color-warning)]" />
          </div>
        </Card>

        <Card className="p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--text-secondary)]">Contraseña</p>
              <p className="text-lg font-bold text-indigo-600">{mockProfileStats.passwordLastChanged}</p>
            </div>
            <div className="h-8 w-8 bg-indigo-100 rounded-full flex items-center justify-center">
              <Shield className="h-5 w-5 text-indigo-600" />
            </div>
          </div>
        </Card>
      </div>

      {/* Tabs Navigation */}
      <div className="border-b border-[var(--border-primary)]">
        <nav className="-mb-px flex space-x-8">
          <button
            onClick={() => setActiveTab('profile')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'profile'
                ? 'border-orange-500 text-[var(--color-primary)]'
                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
            }`}
          >
            Información Personal
          </button>
          <button
            onClick={() => setActiveTab('security')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'security'
                ? 'border-orange-500 text-[var(--color-primary)]'
                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
            }`}
          >
            Seguridad
          </button>
          <button
            onClick={() => setActiveTab('activity')}
            className={`py-2 px-1 border-b-2 font-medium text-sm ${
              activeTab === 'activity'
                ? 'border-orange-500 text-[var(--color-primary)]'
                : 'border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:border-[var(--border-secondary)]'
            }`}
          >
            Actividad
          </button>
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'profile' && (
        <Card>
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-medium text-[var(--text-primary)]">Información Personal</h3>
              <div className="flex space-x-2">
                <Button variant="outline" size="sm">
                  <Download className="w-4 h-4 mr-2" />
                  Exportar Datos
                </Button>
              </div>
            </div>
            
            {/* Avatar and Basic Info */}
            <div className="flex items-center gap-6 mb-8">
              <Avatar 
                src="/api/placeholder/120/120" 
                alt={userInfo.name}
                size="lg"
                className="w-20 h-20"
              />
              <div className="flex-1">
                <h2 className="text-xl font-semibold text-[var(--text-primary)]">{userInfo.name}</h2>
                <p className="text-[var(--text-secondary)]">{userInfo.role}</p>
                <div className="flex items-center gap-2 mt-2">
                  <Badge variant="success">Verificado</Badge>
                  <Badge variant="info">Premium</Badge>
                </div>
              </div>
            </div>

            {/* Form Fields */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  <User className="w-4 h-4 inline mr-2" />
                  Nombre Completo
                </label>
                <Input 
                  value={userInfo.name}
                  onChange={(e) => setUserInfo({...userInfo, name: e.target.value})}
                  disabled={!isEditing}
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  <Mail className="w-4 h-4 inline mr-2" />
                  Email
                </label>
                <Input 
                  value={userInfo.email}
                  onChange={(e) => setUserInfo({...userInfo, email: e.target.value})}
                  disabled={!isEditing}
                  type="email"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  <Phone className="w-4 h-4 inline mr-2" />
                  Teléfono
                </label>
                <Input 
                  value={userInfo.phone}
                  onChange={(e) => setUserInfo({...userInfo, phone: e.target.value})}
                  disabled={!isEditing}
                  type="tel"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  <Building className="w-4 h-4 inline mr-2" />
                  Panadería
                </label>
                <Input 
                  value={userInfo.bakery}
                  onChange={(e) => setUserInfo({...userInfo, bakery: e.target.value})}
                  disabled={!isEditing}
                />
              </div>
              
              <div className="md:col-span-2">
                <label className="block text-sm font-medium text-[var(--text-primary)] mb-2">
                  <MapPin className="w-4 h-4 inline mr-2" />
                  Dirección
                </label>
                <Input 
                  value={userInfo.address}
                  onChange={(e) => setUserInfo({...userInfo, address: e.target.value})}
                  disabled={!isEditing}
                />
              </div>
            </div>

            {/* Action Buttons */}
            {isEditing && (
              <div className="flex gap-3 pt-6 mt-6 border-t border-[var(--border-primary)]">
                <Button onClick={handleSave}>Guardar Cambios</Button>
                <Button variant="outline" onClick={handleCancel}>Cancelar</Button>
              </div>
            )}
          </div>
        </Card>
      )}

      {activeTab === 'security' && (
        <Card>
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-medium text-[var(--text-primary)]">Configuración de Seguridad</h3>
            </div>
            
            <div className="space-y-6">
              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="flex items-center gap-3">
                  <Shield className="w-5 h-5 text-[var(--color-info)]" />
                  <div>
                    <p className="font-medium text-[var(--text-primary)]">Autenticación de Dos Factores</p>
                    <p className="text-sm text-[var(--text-secondary)]">Protege tu cuenta con 2FA</p>
                  </div>
                </div>
                <div className="flex items-center gap-3">
                  <Badge variant={mockProfileStats.twoFactorEnabled ? "success" : "warning"}>
                    {mockProfileStats.twoFactorEnabled ? "Activo" : "Pendiente"}
                  </Badge>
                  <Button variant="outline" size="sm" onClick={handleEnable2FA}>
                    {mockProfileStats.twoFactorEnabled ? "Desactivar" : "Activar"}
                  </Button>
                </div>
              </div>
              
              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="flex items-center gap-3">
                  <Lock className="w-5 h-5 text-[var(--color-primary)]" />
                  <div>
                    <p className="font-medium text-[var(--text-primary)]">Contraseña</p>
                    <p className="text-sm text-[var(--text-secondary)]">Actualizada hace {mockProfileStats.passwordLastChanged}</p>
                  </div>
                </div>
                <Button variant="outline" size="sm" onClick={handleChangePassword}>
                  Cambiar
                </Button>
              </div>
              
              <div className="flex items-center justify-between p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="flex items-center gap-3">
                  <Settings className="w-5 h-5 text-purple-600" />
                  <div>
                    <p className="font-medium text-[var(--text-primary)]">Sesiones Activas</p>
                    <p className="text-sm text-[var(--text-secondary)]">{mockProfileStats.activeSessions} dispositivos conectados</p>
                  </div>
                </div>
                <Button variant="outline" size="sm" onClick={handleManageSessions}>
                  Gestionar
                </Button>
              </div>
            </div>
          </div>
        </Card>
      )}

      {activeTab === 'activity' && (
        <Card>
          <div className="p-6">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-lg font-medium text-[var(--text-primary)]">Actividad Reciente</h3>
            </div>
            
            <div className="space-y-4">
              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <Activity className="w-5 h-5 text-green-500" />
                <div className="flex-1">
                  <p className="font-medium text-[var(--text-primary)]">Inicio de sesión</p>
                  <p className="text-sm text-[var(--text-secondary)]">Hace 2 horas desde Chrome en Madrid, España</p>
                </div>
                <span className="text-xs text-[var(--text-tertiary)]">Hoy 14:30</span>
              </div>
              
              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                <User className="w-5 h-5 text-blue-500" />
                <div className="flex-1">
                  <p className="font-medium text-[var(--text-primary)]">Perfil actualizado</p>
                  <p className="text-sm text-[var(--text-secondary)]">Se modificó la información de contacto</p>
                </div>
                <span className="text-xs text-[var(--text-tertiary)]">Ayer 09:15</span>
              </div>
              
              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                <Shield className="w-5 h-5 text-orange-500" />
                <div className="flex-1">
                  <p className="font-medium text-[var(--text-primary)]">Contraseña cambiada</p>
                  <p className="text-sm text-[var(--text-secondary)]">Contraseña actualizada exitosamente</p>
                </div>
                <span className="text-xs text-[var(--text-tertiary)]">Hace 2 meses</span>
              </div>
              
              <div className="flex items-center gap-4 p-4 border border-[var(--border-primary)] rounded-lg">
                <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                <Bell className="w-5 h-5 text-purple-500" />
                <div className="flex-1">
                  <p className="font-medium text-[var(--text-primary)]">Configuración de notificaciones</p>
                  <p className="text-sm text-[var(--text-secondary)]">Se habilitaron las notificaciones por email</p>
                </div>
                <span className="text-xs text-[var(--text-tertiary)]">Hace 1 semana</span>
              </div>
            </div>
          </div>
        </Card>
      )}
    </div>
  );
};

export default ProfilePage;