import { useState } from 'react';
import { useAppContext } from '../context/AppContext';
import { SettingsTab } from '../tabs/SettingsTab';
import { AdminTab } from '../tabs/AdminTab';
import { ConfigTab } from '../tabs/ConfigTab';

type SettingsSection = 'Account' | 'Bot Config' | 'Admin Panel';

export function SettingsView() {
  const { botState, isAdmin, socket } = useAppContext();
  const sections: SettingsSection[] = [
    'Account',
    ...(isAdmin ? ['Bot Config' as SettingsSection] : []),
    ...(isAdmin ? ['Admin Panel' as SettingsSection] : []),
  ];
  const [section, setSection] = useState<SettingsSection>('Account');

  return (
    <div>
      <h2 style={{ fontSize: 22, fontWeight: 800, color: '#111827', margin: '0 0 20px' }}>Settings</h2>

      <div style={{
        display: 'flex', gap: 4, marginBottom: 24,
        borderBottom: '1px solid #E5E7EB',
      }}>
        {sections.map(s => (
          <button
            key={s}
            onClick={() => setSection(s)}
            style={{
              padding: '8px 16px',
              border: 'none',
              borderBottom: section === s ? '2px solid #2563EB' : '2px solid transparent',
              background: 'transparent',
              color: section === s ? '#2563EB' : '#6B7280',
              fontSize: 13,
              fontWeight: section === s ? 700 : 500,
              cursor: 'pointer',
              marginBottom: -1,
              transition: 'all 0.15s',
            }}
          >
            {s}
          </button>
        ))}
      </div>

      <div
        className="settings-legacy-surface"
        style={{
          background: 'linear-gradient(145deg, #101116 0%, #171922 100%)',
          border: '1px solid rgba(255, 255, 255, 0.08)',
          borderRadius: 24,
          padding: 24,
          boxShadow: '0 24px 70px rgba(15, 23, 42, 0.22)',
          color: '#F9FAFB',
        }}
      >
        {section === 'Account'     && <SettingsTab botState={botState} />}
        {section === 'Bot Config'  && isAdmin && <ConfigTab />}
        {section === 'Admin Panel' && isAdmin && <AdminTab botState={botState} socket={socket} />}
      </div>
    </div>
  );
}
