'use client';

import React, { useState } from 'react';
import { useAuth } from '../../contexts/AuthContext';
import { Button } from '../ui/Button';
import { User, LogOut, Settings, Crown, Heart, Wind, X, Shield } from 'lucide-react';
import { MembershipTier, UserRole } from '../../types/auth';
import Link from 'next/link';

interface UserProfileProps {
  isOpen: boolean;
  onClose: () => void;
}

const getMembershipIcon = (tier: MembershipTier) => {
  switch (tier) {
    case MembershipTier.WOLNOŚĆ:
      return <Crown className="text-yellow-500" size={16} />;
    case MembershipTier.CZUŁOŚĆ:
      return <Heart className="text-pink-500" size={16} />;
    case MembershipTier.ODDECH:
      return <Wind className="text-blue-500" size={16} />;
    default:
      return <User className="text-neutral-500" size={16} />;
  }
};

const getMembershipColor = (tier: MembershipTier) => {
  switch (tier) {
    case MembershipTier.WOLNOŚĆ:
      return 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-white';
    case MembershipTier.CZUŁOŚĆ:
      return 'bg-gradient-to-r from-pink-400 to-pink-600 text-white';
    case MembershipTier.ODDECH:
      return 'bg-gradient-to-r from-blue-400 to-blue-600 text-white';
    default:
      return 'bg-neutral-200 text-neutral-700';
  }
};

export function UserProfile({ isOpen, onClose }: UserProfileProps) {
  const { user, logout, loading } = useAuth();
  const [isLoggingOut, setIsLoggingOut] = useState(false);

  const handleLogout = async () => {
    setIsLoggingOut(true);
    try {
      await logout();
      onClose();
    } catch (error) {
      console.error('Logout error:', error);
    } finally {
      setIsLoggingOut(false);
    }
  };

  if (!isOpen || !user) return null;

  return (
    <div 
      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
      onClick={onClose}
    >
      <div
        className="bg-white rounded-2xl p-6 w-full max-w-md relative animate-scale-in max-h-[90vh] overflow-y-auto"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          onClick={onClose}
          className="absolute top-4 right-4 p-2 rounded-full hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary transition-colors cursor-pointer z-10"
          aria-label="Zamknij modal"
          type="button"
        >
          <X size={20} className="pointer-events-none" />
        </button>

        <div className="text-center mb-6">
          <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white text-2xl font-bold">
            {user.avatar ? (
              <img
                src={user.avatar}
                alt={user.name}
                className="w-full h-full rounded-full object-cover"
              />
            ) : (
              user.name.charAt(0).toUpperCase()
            )}
          </div>
          <h2 className="font-display text-2xl font-bold text-primary mb-1">{user.name}</h2>
          <p className="text-neutral-600 text-sm">{user.email}</p>
        </div>

        <div className="space-y-4">
          {/* Admin Status */}
          {user.role === UserRole.SUPER_ADMIN && (
            <div className="bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200 rounded-lg p-4">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-purple-700">Status administratora</span>
                <Shield className="text-purple-600" size={16} />
              </div>
              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-purple-600 to-pink-600 text-white">
                <Crown size={14} />
                Super Administrator
              </div>
              <p className="text-xs text-purple-600 mt-2">
                Masz pełny dostęp do wszystkich funkcji administracyjnych
              </p>
            </div>
          )}

          {/* Membership Status */}
          <div className="bg-neutral-50 rounded-lg p-4">
            <div className="flex items-center justify-between mb-2">
              <span className="text-sm font-medium text-neutral-700">Status członkostwa</span>
              {getMembershipIcon(user.membershipTier)}
            </div>
            <div className={`inline-flex items-center gap-2 px-3 py-1 rounded-full text-sm font-semibold ${getMembershipColor(user.membershipTier)}`}>
              {user.membershipTier}
            </div>
            <p className="text-xs text-neutral-500 mt-2">
              {user.membershipTier === MembershipTier.ODDECH && 'Darmowe konto z podstawowym dostępem'}
              {user.membershipTier === MembershipTier.CZUŁOŚĆ && 'Premium - pełny dostęp do treści'}
              {user.membershipTier === MembershipTier.WOLNOŚĆ && 'VIP - ekskluzywne treści i wsparcie'}
            </p>
          </div>

          {/* Account Info */}
          <div className="bg-neutral-50 rounded-lg p-4">
            <h3 className="font-medium text-neutral-700 mb-2">Informacje o koncie</h3>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-neutral-600">Data utworzenia:</span>
                <span className="text-neutral-800">
                  {user.createdAt.toLocaleDateString('pl-PL')}
                </span>
              </div>
              <div className="flex justify-between">
                <span className="text-neutral-600">Email zweryfikowany:</span>
                <span className={user.isEmailVerified ? 'text-green-600' : 'text-red-600'}>
                  {user.isEmailVerified ? 'Tak' : 'Nie'}
                </span>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="space-y-2">
            {/* Admin Panel Link for Super Admins */}
            {user.role === UserRole.SUPER_ADMIN && (
              <Link href="/admin">
                <Button
                  variant="primary"
                  className="w-full justify-center gap-2 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700"
                  onClick={() => onClose()}
                >
                  <Shield size={16} />
                  Panel Administracyjny
                </Button>
              </Link>
            )}
            
            <Button
              variant="secondary"
              className="w-full justify-center gap-2"
              onClick={() => {
                onClose();
              }}
            >
              <Settings size={16} />
              Ustawienia konta
            </Button>
            
            <Button
              variant="primary"
              className="w-full justify-center gap-2"
              onClick={() => {
                onClose();
              }}
            >
              <Crown size={16} />
              Ulepsz członkostwo
            </Button>

            <Button
              onClick={handleLogout}
              disabled={isLoggingOut || loading}
              className="w-full justify-center gap-2 bg-neutral-100 text-neutral-700 hover:bg-neutral-200"
            >
              <LogOut size={16} />
              {isLoggingOut ? 'Wylogowywanie...' : 'Wyloguj się'}
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}