import { useState } from 'react';
import { useAppContext } from '../context/AppContext';
import { SettingsTab } from '../tabs/SettingsTab';
import { AdminTab } from '../tabs/AdminTab';
import { ConfigTab } from '../tabs/ConfigTab';
import { PageHeader } from '../components/ui/page-header';

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>
      <PageHeader
        title="Settings"
        description="Manage your account, credentials, and runtime configuration from one place."
      />

      <div className="tab-strip" style={{ marginBottom: 24 }}>
        {sections.map(s => (
          <button
            key={s}
            onClick={() => setSection(s)}
            className="tab-button"
            data-active={section === s}
          >
            {s}
          </button>
        ))}
      </div>

      <div
        className="settings-legacy-surface"
        style={{
          background: 'var(--card)',
          border: '1px solid var(--border)',
          borderRadius: 24,
          padding: 24,
          boxShadow: 'var(--card-shadow)',
          color: 'var(--foreground)',
        }}
      >
        {section === 'Account'     && <SettingsTab botState={botState} />}
        {section === 'Bot Config'  && isAdmin && <ConfigTab />}
        {section === 'Admin Panel' && isAdmin && <AdminTab botState={botState} socket={socket} />}
      </div>
    </div>
  );
}