"use client"

import type React from "react"
import { useHistory } from "react-router-dom"
import BottomNavigation from "../components/BottomNavigation"

const Settings: React.FC = () => {
  const history = useHistory()

  const handleLogout = () => {
    // Simulate logout
    history.push("/login")
  }

  return (
    <div className=" bg-gray-50 min-h-screen mx-auto pb-50" style={{ overflow: 'auto' }}>
      {/* Header */}
      <div className="bg-gradient-to-r from-gray-600 to-gray-800 px-4 pt-20 pb-16 w-full ">
        <div className="flex items-center justify-between mb-4 max-w-4xl mx-auto">
          <div>
            <h1 className="text-2xl font-bold text-white">Настройки</h1>
            <p className="text-gray-300">Профиль пациента</p>
          </div>
          <div className="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-full flex items-center justify-center border border-white/30">
            <span className="text-2xl font-bold text-white">+

            </span>
          </div>
        </div>
      </div>

      <div className="max-w-4xl mx-auto">
        {/* Profile Information */}
        <div className="px-4 -mt-6 mb-6 ">
          <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg glass-morphism">
            <h2 className="text-lg font-semibold text-gray-800 mb-4">Личная информация</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">Логин</label>
                <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <span className="text-gray-800">alex_petrov</span>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">Дата регистрации</label>
                <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <span className="text-gray-800">15 марта 2024</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        {/* Medical Information */}
        {/* <div className="px-4 mb-6">
          <div className="bg-white/80 backdrop-blur-lg rounded-2xl p-6 border border-gray-200/50 shadow-lg ">
            <h2 className="text-lg font-semibold text-gray-800 mb-4">Медицинская информация</h2>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">Описание травмы</label>
                <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <p className="text-gray-800 text-sm leading-relaxed">
                    Повреждение передней крестообразной связки левого колена. Получена во время игры в футбол 12 февраля
                    2024 года. Проведена артроскопическая операция 20 февраля 2024 года.
                  </p>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">Лечащий врач</label>
                <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
                  <span className="text-gray-800">Доктор Иванов И.И.</span>
                </div>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-600 mb-1">Стадия восстановления</label>
                <div className="bg-cyan-50 rounded-lg p-3 border border-cyan-200">
                  <div className="flex items-center justify-between">
                    <span className="text-cyan-800 font-medium">Активная реабилитация</span>
                    <span className="text-cyan-600 text-sm">75% завершено</span>
                  </div>
                  <div className="mt-2 bg-cyan-200 rounded-full h-2">
                    <div className="bg-cyan-500 h-2 rounded-full" style={{ width: "75%" }}></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div> */}
        {/* Logout Button */}
        <div className="px-4 mb-8">
          <button
            onClick={handleLogout}
            className="w-full bg-gray-400 hover:bg-gray-500 text-white font-semibold py-4 px-6 rounded-2xl transition-all duration-200 transform hover:scale-105 shadow-lg"
          >
            Выйти из аккаунта
          </button>
        </div>
        <BottomNavigation />
      </div>
    </div>
  )
}

export default Settings