import React from 'react';
import { User as UserIcon, Shield, CreditCard, Mail, Phone, Calendar, ArrowLeft } from 'lucide-react';
import { User } from '../types';

interface ProfileViewProps {
  user: User;
  onBack: () => void;
}

export default function ProfileView({ user, onBack }: ProfileViewProps) {
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'ACTIVE': return 'bg-emerald-500/20 text-emerald-400 border-emerald-500/50';
      case 'TRIAL': return 'bg-amber-500/20 text-amber-400 border-amber-500/50';
      case 'OVERDUE': return 'bg-red-500/20 text-red-400 border-red-500/50';
      case 'CANCELED': return 'bg-zinc-800 text-zinc-400 border-zinc-700';
      default: return 'bg-zinc-800 text-white border-zinc-700';
    }
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case 'ACTIVE': return 'Assinatura Ativa';
      case 'TRIAL': return 'Período de Teste';
      case 'OVERDUE': return 'Pagamento Pendente';
      case 'CANCELED': return 'Assinatura Cancelada';
      default: return status;
    }
  };

  return (
    <div className="space-y-6 max-w-4xl mx-auto">
      <button 
        onClick={onBack}
        className="flex items-center space-x-2 text-zinc-400 hover:text-white transition-colors text-sm font-bold"
      >
        <ArrowLeft className="w-4 h-4" />
        <span>Voltar</span>
      </button>

      <div className="glass-card rounded-2xl overflow-hidden shadow-2xl border border-white/10 p-8">
        <div className="flex flex-col md:flex-row items-start gap-8">
          
          {/* Avatar Area */}
          <div className="flex flex-col items-center space-y-4">
            <div className="w-32 h-32 bg-zinc-800 rounded-full flex items-center justify-center border-4 border-[#E50914]/20">
              <UserIcon className="w-16 h-16 text-zinc-400" />
            </div>
            <div className={`px-3 py-1 rounded-full text-xs font-bold border uppercase tracking-wider ${getStatusColor(user.subscriptionStatus)}`}>
              {getStatusLabel(user.subscriptionStatus)}
            </div>
          </div>

          {/* User Info */}
          <div className="flex-1 space-y-6 w-full">
            <div>
              <h2 className="text-2xl font-bold text-white">{user.name}</h2>
              <p className="text-zinc-400 text-sm">{user.role === 'admin' ? 'Administrador do Sistema' : 'Aluno'}</p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
                <Mail className="w-5 h-5 text-zinc-500" />
                <div>
                  <p className="text-[10px] uppercase font-bold text-zinc-500">Email</p>
                  <p className="text-sm font-medium text-white">{user.email}</p>
                </div>
              </div>

              <div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
                <Phone className="w-5 h-5 text-zinc-500" />
                <div>
                  <p className="text-[10px] uppercase font-bold text-zinc-500">WhatsApp</p>
                  <p className="text-sm font-medium text-white">{user.whatsapp || 'Não informado'}</p>
                </div>
              </div>

              <div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
                <Calendar className="w-5 h-5 text-zinc-500" />
                <div>
                  <p className="text-[10px] uppercase font-bold text-zinc-500">Data de Nascimento</p>
                  <p className="text-sm font-medium text-white">
                    {user.birthDate ? new Date(user.birthDate).toLocaleDateString('pt-BR') : 'Não informado'}
                  </p>
                </div>
              </div>

              <div className="bg-black/30 p-4 rounded-xl border border-white/5 flex items-center space-x-3">
                <CreditCard className="w-5 h-5 text-zinc-500" />
                <div>
                  <p className="text-[10px] uppercase font-bold text-zinc-500">Membro desde</p>
                  <p className="text-sm font-medium text-white">
                    {new Date(user.createdAt).toLocaleDateString('pt-BR')}
                  </p>
                </div>
              </div>
            </div>

            {user.role === 'admin' && (
              <div className="mt-4 p-4 bg-[#E50914]/10 border border-[#E50914]/30 rounded-xl flex items-start space-x-3">
                <Shield className="w-5 h-5 text-[#E50914] mt-0.5" />
                <div>
                  <p className="text-sm font-bold text-[#E50914]">Acesso Administrativo</p>
                  <p className="text-xs text-zinc-300 mt-1">Você tem permissão total para gerenciar cursos, alunos e assinaturas.</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}