import React, { useState } from 'react';
import { useAppDispatch, useAppSelector, logoutAsync } from '../store';

export default function SettingsPage() {
  const dispatch = useAppDispatch();
  const { user } = useAppSelector(state => state.auth);
  const [activeTab, setActiveTab] = useState('profile');

  const handleLogout = () => {
    dispatch(logoutAsync());
  };

  const tabs = [
    { id: 'profile', label: 'Profile', icon: '👤' },
    { id: 'privacy', label: 'Privacy & Security', icon: '🔒' },
    { id: 'notifications', label: 'Notifications', icon: '🔔' },
    { id: 'appearance', label: 'Appearance', icon: '🎨' },
    { id: 'about', label: 'About', icon: 'ℹ️' },
  ];

  return (
    <div className="p-8 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold text-white mb-8">Settings</h1>

      <div className="flex gap-8">
        {/* Sidebar Navigation */}
        <div className="w-48">
          <nav className="space-y-2">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`w-full text-left px-4 py-3 rounded-lg transition ${
                  activeTab === tab.id
                    ? 'bg-purple-600 text-white'
                    : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                }`}
              >
                <span className="mr-2">{tab.icon}</span>
                {tab.label}
              </button>
            ))}
          </nav>
        </div>

        {/* Content Area */}
        <div className="flex-1">
          {activeTab === 'profile' && (
            <div className="space-y-6">
              <div>
                <h2 className="text-2xl font-bold text-white mb-4">Profile Settings</h2>
                <div className="bg-gray-800 rounded-lg p-6 space-y-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">Display Name</label>
                    <input
                      type="text"
                      defaultValue={user?.email || ''}
                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-purple-500"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
                    <input
                      type="email"
                      defaultValue={user?.email || ''}
                      disabled
                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-gray-400 cursor-not-allowed"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-300 mb-2">Bio</label>
                    <textarea
                      placeholder="Tell us about yourself..."
                      className="w-full px-4 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:border-purple-500"
                      rows={4}
                    />
                  </div>
                  <button className="px-6 py-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition">
                    Save Changes
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'privacy' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-white mb-4">Privacy & Security</h2>
              <div className="bg-gray-800 rounded-lg p-6 space-y-4">
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-white font-semibold">Two-Factor Authentication</h3>
                    <p className="text-gray-400 text-sm">Add an extra layer of security to your account</p>
                  </div>
                  <button className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition">
                    Enable
                  </button>
                </div>
                <hr className="border-gray-700" />
                <div className="flex items-center justify-between">
                  <div>
                    <h3 className="text-white font-semibold">E2E Encryption</h3>
                    <p className="text-gray-400 text-sm">Your messages are end-to-end encrypted</p>
                  </div>
                  <span className="text-green-400">✓ Enabled</span>
                </div>
                <hr className="border-gray-700" />
                <div>
                  <button className="text-red-400 hover:text-red-300 transition font-semibold">
                    Change Password
                  </button>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'notifications' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-white mb-4">Notification Preferences</h2>
              <div className="bg-gray-800 rounded-lg p-6 space-y-4">
                {['Messages', 'Calls', 'Friend Requests', 'Community Updates'].map((item) => (
                  <div key={item} className="flex items-center justify-between">
                    <span className="text-gray-300">{item}</span>
                    <label className="relative inline-flex items-center cursor-pointer">
                      <input type="checkbox" defaultChecked className="sr-only peer" />
                      <div className="w-11 h-6 bg-gray-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600"></div>
                    </label>
                  </div>
                ))}
              </div>
            </div>
          )}

          {activeTab === 'appearance' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-white mb-4">Appearance</h2>
              <div className="bg-gray-800 rounded-lg p-6 space-y-4">
                <div>
                  <h3 className="text-white font-semibold mb-4">Theme</h3>
                  <div className="space-y-2">
                    {['Dark', 'Light', 'Auto'].map((theme) => (
                      <label key={theme} className="flex items-center gap-3 cursor-pointer">
                        <input
                          type="radio"
                          name="theme"
                          defaultChecked={theme === 'Dark'}
                          className="w-4 h-4"
                        />
                        <span className="text-gray-300">{theme}</span>
                      </label>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {activeTab === 'about' && (
            <div className="space-y-6">
              <h2 className="text-2xl font-bold text-white mb-4">About AeThex Connect</h2>
              <div className="bg-gray-800 rounded-lg p-6 space-y-4 text-gray-300">
                <div>
                  <p className="font-semibold text-white mb-2">Version</p>
                  <p>1.0.0</p>
                </div>
                <div>
                  <p className="font-semibold text-white mb-2">Build Date</p>
                  <p>February 3, 2026</p>
                </div>
                <div>
                  <p className="font-semibold text-white mb-2">Features</p>
                  <ul className="space-y-1 text-sm">
                    <li>✓ Real-time messaging with E2E encryption</li>
                    <li>✓ WebRTC voice and video calls</li>
                    <li>✓ Blockchain domain verification</li>
                    <li>✓ GameForge community integration</li>
                    <li>✓ Premium subscriptions</li>
                  </ul>
                </div>
              </div>
            </div>
          )}

          {/* Logout Button at Bottom */}
          <div className="mt-8 pt-8 border-t border-gray-700">
            <button
              onClick={handleLogout}
              className="px-6 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition"
            >
              Sign Out
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
