import React from 'react'
import { useAuth } from './auth/AuthContext'
import packageJson from '../../package.json'

function Profile({ onNavigate }) {
  const { user, logout } = useAuth()

  const integrations = [
    { id: 'todoist-integration', name: 'TODOist' },
    { id: 'telegram-integration', name: 'Telegram' },
    { id: 'fitbit-integration', name: 'Fitbit' },
  ]

  const handleLogout = async () => {
    if (window.confirm('Вы уверены, что хотите выйти?')) {
      await logout()
    }
  }

  return (
    <div className="max-w-2xl mx-auto">
      {/* Profile Header */}
      <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl p-6 mb-6 text-white shadow-lg">
        <div className="flex items-center space-x-4">
          <div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center text-2xl font-bold backdrop-blur-sm">
            {user?.name ? user.name.charAt(0).toUpperCase() : user?.email?.charAt(0).toUpperCase() || '?'}
          </div>
          <div className="flex-1">
            <h1 className="text-xl font-bold">
              {user?.name || 'Пользователь'}
            </h1>
            <p className="text-indigo-100 text-sm">
              {user?.email}
            </p>
          </div>
        </div>
      </div>

      {/* Admin & Tracking Buttons */}
      <div className="mb-6">
        <div className="space-y-3">
          {user?.is_admin && (
            <button
              onClick={() => {
                const adminUrl = window.location.origin + '/admin';
                window.open(adminUrl, '_blank', 'noopener,noreferrer');
              }}
              className="w-full p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all text-left border border-gray-100 hover:border-purple-200 group"
            >
              <div className="flex items-center justify-between">
                <span className="text-gray-800 font-medium group-hover:text-purple-600 transition-colors">
                  Администрирование
                </span>
                <svg
                  className="w-5 h-5 text-gray-400 group-hover:text-purple-500 transition-colors"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
            </button>
          )}
          <button
            onClick={() => onNavigate?.('tracking')}
            className="w-full p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all text-left border border-gray-100 hover:border-indigo-200 group"
          >
            <div className="flex items-center justify-between">
              <span className="text-gray-800 font-medium group-hover:text-indigo-600 transition-colors">
                Отслеживание
              </span>
              <svg
                className="w-5 h-5 text-gray-400 group-hover:text-indigo-500 transition-colors"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </div>
          </button>
        </div>
      </div>

      {/* Features Section */}
      <div className="mb-6">
        <h2 className="text-lg font-semibold text-gray-700 mb-4 px-1">Функционал</h2>
        <div className="space-y-3">
          <button
            onClick={() => onNavigate?.('dictionaries')}
            className="w-full p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all text-left border border-gray-100 hover:border-indigo-200 group"
          >
            <div className="flex items-center justify-between">
              <span className="text-gray-800 font-medium group-hover:text-indigo-600 transition-colors">
                Словари
              </span>
              <svg
                className="w-5 h-5 text-gray-400 group-hover:text-indigo-500 transition-colors"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </div>
          </button>
          <button
            onClick={() => onNavigate?.('shopping')}
            className="w-full p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all text-left border border-gray-100 hover:border-indigo-200 group"
          >
            <div className="flex items-center justify-between">
              <span className="text-gray-800 font-medium group-hover:text-indigo-600 transition-colors">
                Товары
              </span>
              <svg
                className="w-5 h-5 text-gray-400 group-hover:text-indigo-500 transition-colors"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5l7 7-7 7"
                />
              </svg>
            </div>
          </button>
        </div>
      </div>

      {/* Integrations Section */}
      <div className="mb-6">
        <h2 className="text-lg font-semibold text-gray-700 mb-4 px-1">Интеграции</h2>
        <div className="space-y-3">
          {integrations.map((integration) => (
            <button
              key={integration.id}
              onClick={() => onNavigate?.(integration.id)}
              className="w-full p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all text-left border border-gray-100 hover:border-indigo-200 group"
            >
              <div className="flex items-center justify-between">
                <span className="text-gray-800 font-medium group-hover:text-indigo-600 transition-colors">
                  {integration.name}
                </span>
                <svg
                  className="w-5 h-5 text-gray-400 group-hover:text-indigo-500 transition-colors"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Account Section */}
      <div>
        <h2 className="text-lg font-semibold text-gray-700 mb-4 px-1">Аккаунт</h2>
        <button
          onClick={handleLogout}
          className="w-full p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all text-left border border-gray-100 hover:border-red-200 group"
        >
          <div className="flex items-center justify-between">
            <span className="text-gray-800 font-medium group-hover:text-red-600 transition-colors">
              Выйти из аккаунта
            </span>
            <svg
              className="w-5 h-5 text-gray-400 group-hover:text-red-500 transition-colors"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
              />
            </svg>
          </div>
        </button>
      </div>

      {/* Version Info */}
      <div className="mt-8 text-center text-gray-400 text-sm">
        <p>PlayLife v{packageJson.version}</p>
      </div>
    </div>
  )
}

export default Profile