import React, { useState, useEffect, useRef } from 'react';
import { X, User, Mail, Phone, Calendar, Lock, Settings, Image as ImageIcon, Loader2, MessageCircle } from 'lucide-react';
import { User as UserType, UserRole } from '../types';
import { backendApi } from '../services/apiClient';

const ROLE_NAMES: Record<UserRole, string> = {
  DIRECTOR: 'Директор',
  ENGINEER: 'Гл. Инженер',
  MASTER: 'Мастер',
  LAWYER: 'Юрист',
  FINANCIER: 'Финансист',
  HR_MANAGER: 'HR-менеджер',
  PR_MANAGER: 'PR-менеджер'
};

const DEFAULT_AVATAR = 'https://api.dicebear.com/7.x/avataaars/svg?seed=default';

type TabId = 'profile' | 'photo' | 'security' | 'preferences' | 'messengers';

interface ProfileSettingsModalProps {
  user: UserType;
  onClose: () => void;
  onSave: (user: UserType) => void;
}

export const ProfileSettingsModal: React.FC<ProfileSettingsModalProps> = ({ user, onClose, onSave }) => {
  const [activeTab, setActiveTab] = useState<TabId>('profile');
  const [form, setForm] = useState({
    name: user.name || '',
    email: user.email || '',
    phone: user.phone || '',
    birthDate: user.birthDate || '',
    language: user.language || 'ru',
    theme: user.theme || 'light',
    notificationEmail: user.notificationEmail !== false,
    notificationPush: user.notificationPush !== false,
  });
  const [passwordForm, setPasswordForm] = useState({
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  });
  const [messengers, setMessengers] = useState<Array<{ messenger: 'Max' | 'Telegram'; login: string }>>(
    user.messengerLogins || []
  );
  const [newMessenger, setNewMessenger] = useState<{ messenger: 'Max' | 'Telegram'; login: string }>({
    messenger: 'Telegram',
    login: ''
  });

  const [photoFile, setPhotoFile] = useState<File | null>(null);
  const [photoPreview, setPhotoPreview] = useState<string | null>(null);
  const [isDragging, setIsDragging] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [isUploadingPhoto, setIsUploadingPhoto] = useState(false);
  const [isChangingPassword, setIsChangingPassword] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const getAvatarUrl = () => {
    if (photoPreview) return photoPreview;
    if (!user.avatar) return DEFAULT_AVATAR;
    if (user.avatar.startsWith('http')) return user.avatar;
    const base = (import.meta.env.VITE_API_BASE_URL || '').replace(/\/api\/?$/, '') || window.location.origin;
    return `${base}${user.avatar.startsWith('/') ? '' : '/'}${user.avatar}`;
  };
  const avatarUrl = getAvatarUrl();

  useEffect(() => {
    setForm({
      name: user.name || '',
      email: user.email || '',
      phone: user.phone || '',
      birthDate: user.birthDate || '',
      language: user.language || 'ru',
      theme: user.theme || 'light',
      notificationEmail: user.notificationEmail !== false,
      notificationPush: user.notificationPush !== false,
    });
    setMessengers(user.messengerLogins || []);
  }, [user]);

  const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
    { id: 'profile', label: 'Основная информация', icon: <User className="w-4 h-4" /> },
    { id: 'photo', label: 'Фото профиля', icon: <ImageIcon className="w-4 h-4" /> },
    { id: 'security', label: 'Безопасность', icon: <Lock className="w-4 h-4" /> },
    { id: 'preferences', label: 'Настройки', icon: <Settings className="w-4 h-4" /> },
    { id: 'messengers', label: 'Мессенджеры', icon: <MessageCircle className="w-4 h-4" /> },
  ];

  const handleSaveProfile = async () => {
    try {
      setIsSaving(true);
      setError(null);
      const updated = await backendApi.updateProfile({
        name: form.name.trim(),
        email: form.email.trim() || undefined,
        phone: form.phone.trim() || undefined,
        birthDate: form.birthDate || undefined,
      });
      onSave(updated);
      setSuccess('Профиль сохранён');
      setTimeout(() => setSuccess(null), 3000);
    } catch (err: any) {
      setError(err.message || 'Ошибка сохранения');
    } finally {
      setIsSaving(false);
    }
  };

  const handleSavePreferences = async () => {
    try {
      setIsSaving(true);
      setError(null);
      await backendApi.updatePreferences({
        language: form.language,
        theme: form.theme,
        notificationEmail: form.notificationEmail,
        notificationPush: form.notificationPush,
      });
      const updated = await backendApi.getMe();
      onSave(updated);
      setSuccess('Настройки сохранены');
      setTimeout(() => setSuccess(null), 3000);
    } catch (err: any) {
      setError(err.message || 'Ошибка сохранения');
    } finally {
      setIsSaving(false);
    }
  };

  const handlePhotoSelect = (file: File | null) => {
    if (!file) {
      setPhotoFile(null);
      setPhotoPreview(null);
      return;
    }
    if (!file.type.startsWith('image/')) {
      setError('Выберите изображение (JPG, PNG, GIF, WEBP)');
      return;
    }
    if (file.size > 5 * 1024 * 1024) {
      setError('Размер файла не должен превышать 5MB');
      return;
    }
    setError(null);
    setPhotoFile(file);
    const reader = new FileReader();
    reader.onloadend = () => setPhotoPreview(reader.result as string);
    reader.readAsDataURL(file);
  };

  const handlePhotoUpload = async () => {
    if (!photoFile) return;
    try {
      setIsUploadingPhoto(true);
      setError(null);
      const { photoUrl } = await backendApi.uploadProfilePhoto(photoFile);
      const updated = await backendApi.getMe();
      onSave({ ...updated, avatar: photoUrl });
      setPhotoFile(null);
      setPhotoPreview(null);
      setSuccess('Фото загружено');
      setTimeout(() => setSuccess(null), 3000);
    } catch (err: any) {
      setError(err.message || 'Ошибка загрузки фото');
    } finally {
      setIsUploadingPhoto(false);
    }
  };

  const handleDeletePhoto = async () => {
    try {
      setIsUploadingPhoto(true);
      setError(null);
      await backendApi.deleteProfilePhoto();
      const updated = await backendApi.getMe();
      onSave(updated);
      setPhotoFile(null);
      setPhotoPreview(null);
      setSuccess('Фото удалено');
      setTimeout(() => setSuccess(null), 3000);
    } catch (err: any) {
      setError(err.message || 'Ошибка удаления');
    } finally {
      setIsUploadingPhoto(false);
    }
  };

  const handleChangePassword = async () => {
    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
      setError('Пароли не совпадают');
      return;
    }
    if (passwordForm.newPassword.length < 8) {
      setError('Пароль должен содержать не менее 8 символов');
      return;
    }
    if (!/^(?=.*[a-zA-Z])(?=.*\d)/.test(passwordForm.newPassword)) {
      setError('Пароль должен содержать буквы и цифры');
      return;
    }
    try {
      setIsChangingPassword(true);
      setError(null);
      await backendApi.changePassword(passwordForm.oldPassword, passwordForm.newPassword);
      setPasswordForm({ oldPassword: '', newPassword: '', confirmPassword: '' });
      setSuccess('Пароль успешно изменён');
      setTimeout(() => setSuccess(null), 3000);
    } catch (err: any) {
      setError(err.message || 'Ошибка смены пароля');
    } finally {
      setIsChangingPassword(false);
    }
  };

  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(false);
    const file = e.dataTransfer.files?.[0];
    if (file) handlePhotoSelect(file);
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    setIsDragging(true);
  };

  const handleDragLeave = () => setIsDragging(false);

  const addMessenger = () => {
    if (!newMessenger.login.trim()) return;
    if (messengers.some(m => m.messenger === newMessenger.messenger)) {
      setError('Этот мессенджер уже добавлен');
      return;
    }
    setMessengers([...messengers, { ...newMessenger }]);
    setNewMessenger({ messenger: 'Telegram', login: '' });
  };

  const removeMessenger = (idx: number) => {
    setMessengers(messengers.filter((_, i) => i !== idx));
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/80 backdrop-blur-md animate-fade-in" onClick={onClose}>
      <div className="bg-white rounded-[2.5rem] w-full max-w-2xl max-h-[90vh] overflow-hidden shadow-2xl animate-slide-up flex flex-col" onClick={e => e.stopPropagation()}>
        <div className="p-6 border-b border-slate-200 flex-shrink-0">
          <div className="flex justify-between items-start">
            <div>
              <h3 className="text-2xl font-black text-slate-900">Профиль и настройки</h3>
              <p className="text-xs text-slate-500 mt-1">Управление вашим аккаунтом</p>
            </div>
            <button onClick={onClose} className="p-2 hover:bg-slate-100 rounded-full">
              <X className="w-6 h-6 text-slate-400" />
            </button>
          </div>

          <div className="flex gap-1 mt-4 overflow-x-auto no-scrollbar">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-colors whitespace-nowrap ${
                  activeTab === tab.id ? 'bg-primary-100 text-primary-700' : 'text-slate-600 hover:bg-slate-100'
                }`}
              >
                {tab.icon}
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        <div className="flex-1 overflow-y-auto p-6 space-y-6">
          {error && (
            <div className="p-3 bg-red-50 border border-red-200 rounded-xl text-sm text-red-700">
              {error}
            </div>
          )}
          {success && (
            <div className="p-3 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700">
              {success}
            </div>
          )}

          {activeTab === 'profile' && (
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">ФИО</label>
                <input
                  type="text"
                  value={form.name}
                  onChange={(e) => setForm(f => ({ ...f, name: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="Иванов Иван Иванович"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Email</label>
                <input
                  type="email"
                  value={form.email}
                  onChange={(e) => setForm(f => ({ ...f, email: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="email@example.com"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Телефон</label>
                <input
                  type="tel"
                  value={form.phone}
                  onChange={(e) => setForm(f => ({ ...f, phone: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="+7 (999) 123-45-67"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Дата рождения</label>
                <input
                  type="date"
                  value={form.birthDate}
                  onChange={(e) => setForm(f => ({ ...f, birthDate: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                />
              </div>
              <p className="text-xs text-slate-500">Роль: {ROLE_NAMES[user.role]}</p>
              <button
                onClick={handleSaveProfile}
                disabled={isSaving}
                className="w-full px-4 py-2.5 bg-primary-600 hover:bg-primary-700 disabled:bg-slate-400 text-white font-bold text-sm rounded-xl transition-colors flex items-center justify-center gap-2"
              >
                {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
                Сохранить
              </button>
            </div>
          )}

          {activeTab === 'photo' && (
            <div className="space-y-4">
              <div className="flex flex-col items-center gap-4">
                <div
                  onDrop={handleDrop}
                  onDragOver={handleDragOver}
                  onDragLeave={handleDragLeave}
                  className={`w-32 h-32 rounded-full border-2 border-dashed flex items-center justify-center overflow-hidden transition-colors ${
                    isDragging ? 'border-primary-500 bg-primary-50' : 'border-slate-200 bg-slate-50'
                  }`}
                >
                  <img
                    src={avatarUrl}
                    alt=""
                    className="w-full h-full object-cover"
                  />
                </div>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept="image/jpeg,image/png,image/gif,image/webp"
                  className="hidden"
                  onChange={(e) => handlePhotoSelect(e.target.files?.[0] || null)}
                />
                <div className="flex gap-3">
                  <button
                    onClick={() => fileInputRef.current?.click()}
                    className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium text-sm rounded-xl"
                  >
                    Выбрать файл
                  </button>
                  {photoFile && (
                    <button
                      onClick={handlePhotoUpload}
                      disabled={isUploadingPhoto}
                      className="px-4 py-2 bg-primary-600 hover:bg-primary-700 disabled:bg-slate-400 text-white font-medium text-sm rounded-xl flex items-center gap-2"
                    >
                      {isUploadingPhoto ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
                      Загрузить
                    </button>
                  )}
                  {(user.avatar || photoPreview) && (
                    <button
                      onClick={handleDeletePhoto}
                      disabled={isUploadingPhoto}
                      className="px-4 py-2 bg-red-50 hover:bg-red-100 text-red-600 font-medium text-sm rounded-xl"
                    >
                      Удалить
                    </button>
                  )}
                </div>
                <p className="text-xs text-slate-500">JPG, PNG, GIF, WEBP до 5MB</p>
              </div>
            </div>
          )}

          {activeTab === 'security' && (
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Текущий пароль</label>
                <input
                  type="password"
                  value={passwordForm.oldPassword}
                  onChange={(e) => setPasswordForm(f => ({ ...f, oldPassword: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="••••••••"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Новый пароль</label>
                <input
                  type="password"
                  value={passwordForm.newPassword}
                  onChange={(e) => setPasswordForm(f => ({ ...f, newPassword: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="Минимум 8 символов, буквы и цифры"
                />
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Подтвердите новый пароль</label>
                <input
                  type="password"
                  value={passwordForm.confirmPassword}
                  onChange={(e) => setPasswordForm(f => ({ ...f, confirmPassword: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                  placeholder="••••••••"
                />
              </div>
              <button
                onClick={handleChangePassword}
                disabled={isChangingPassword || !passwordForm.oldPassword || !passwordForm.newPassword}
                className="w-full px-4 py-2.5 bg-primary-600 hover:bg-primary-700 disabled:bg-slate-400 text-white font-bold text-sm rounded-xl transition-colors flex items-center justify-center gap-2"
              >
                {isChangingPassword ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
                Сменить пароль
              </button>
            </div>
          )}

          {activeTab === 'preferences' && (
            <div className="space-y-4">
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Язык</label>
                <select
                  value={form.language}
                  onChange={(e) => setForm(f => ({ ...f, language: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                >
                  <option value="ru">Русский</option>
                  <option value="en">English</option>
                </select>
              </div>
              <div>
                <label className="block text-xs font-bold text-slate-700 mb-1">Тема</label>
                <select
                  value={form.theme}
                  onChange={(e) => setForm(f => ({ ...f, theme: e.target.value }))}
                  className="w-full px-3 py-2.5 bg-white border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
                >
                  <option value="light">Светлая</option>
                  <option value="dark">Тёмная</option>
                  <option value="system">Системная</option>
                </select>
              </div>
              <div className="flex items-center justify-between py-2">
                <span className="text-sm font-medium text-slate-700">Email уведомления</span>
                <button
                  onClick={() => setForm(f => ({ ...f, notificationEmail: !f.notificationEmail }))}
                  className={`w-12 h-6 rounded-full transition-colors ${form.notificationEmail ? 'bg-primary-600' : 'bg-slate-200'}`}
                >
                  <span className={`block w-5 h-5 bg-white rounded-full shadow transition-transform ${form.notificationEmail ? 'translate-x-6' : 'translate-x-0.5'}`} />
                </button>
              </div>
              <div className="flex items-center justify-between py-2">
                <span className="text-sm font-medium text-slate-700">Push уведомления</span>
                <button
                  onClick={() => setForm(f => ({ ...f, notificationPush: !f.notificationPush }))}
                  className={`w-12 h-6 rounded-full transition-colors ${form.notificationPush ? 'bg-primary-600' : 'bg-slate-200'}`}
                >
                  <span className={`block w-5 h-5 bg-white rounded-full shadow transition-transform ${form.notificationPush ? 'translate-x-6' : 'translate-x-0.5'}`} />
                </button>
              </div>
              <button
                onClick={handleSavePreferences}
                disabled={isSaving}
                className="w-full px-4 py-2.5 bg-primary-600 hover:bg-primary-700 disabled:bg-slate-400 text-white font-bold text-sm rounded-xl transition-colors flex items-center justify-center gap-2"
              >
                {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
                Сохранить настройки
              </button>
            </div>
          )}

          {activeTab === 'messengers' && (
            <div className="space-y-4">
              <p className="text-sm text-slate-600">Логины мессенджеров для связи (информационно)</p>
              {messengers.map((m, idx) => (
                <div key={idx} className="flex items-center gap-3 p-3 bg-slate-50 rounded-xl">
                  <span className="text-sm font-medium text-slate-700">{m.messenger}:</span>
                  <span className="flex-1 text-sm text-slate-600">{m.login}</span>
                  <button onClick={() => removeMessenger(idx)} className="text-red-600 hover:text-red-700 text-sm">
                    Удалить
                  </button>
                </div>
              ))}
              <div className="flex gap-2">
                <select
                  value={newMessenger.messenger}
                  onChange={(e) => setNewMessenger(m => ({ ...m, messenger: e.target.value as 'Max' | 'Telegram' }))}
                  className="px-3 py-2 border border-slate-200 rounded-xl text-sm"
                >
                  <option value="Telegram">Telegram</option>
                  <option value="Max">Max</option>
                </select>
                <input
                  type="text"
                  value={newMessenger.login}
                  onChange={(e) => setNewMessenger(m => ({ ...m, login: e.target.value }))}
                  placeholder="@username"
                  className="flex-1 px-3 py-2 border border-slate-200 rounded-xl text-sm"
                />
                <button onClick={addMessenger} className="px-4 py-2 bg-primary-600 text-white font-medium text-sm rounded-xl">
                  Добавить
                </button>
              </div>
              <p className="text-xs text-slate-500">Мессенджеры пока только отображаются. Сохранение в профиль будет добавлено.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};