import React, { useState } from 'react';
import { AdminCategories } from './AdminCategories';
import { AdminStandards } from './AdminStandards';
import type { AIProvider } from '../types/providers';

interface AdminPanelProps {
  apiKey: string;
  provider: AIProvider;
  model: string;
  endpoint?: string;
  adminApiKey: string;
  adminModel: string;
  onAdminConfigSave: (key: string, model: string) => void;
}

export const AdminPanel: React.FC<AdminPanelProps> = (props) => {
  const [activeTab, setActiveTab] = useState<'categories' | 'standards'>('categories');

  return (
    <div className="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8 animate-fade-in">
      <div className="mb-8 border-b border-slate-200 dark:border-slate-700">
        <div className="flex gap-8">
          <button
            onClick={() => setActiveTab('categories')}
            className={`pb-4 text-sm font-bold transition-all border-b-2 ${
              activeTab === 'categories'
                ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
                : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
            }`}
          >
            1. Categorias Base
          </button>
          <button
            onClick={() => setActiveTab('standards')}
            className={`pb-4 text-sm font-bold transition-all border-b-2 flex items-center gap-2 ${
              activeTab === 'standards'
                ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
                : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300'
            }`}
          >
            2. Construtor de Normas IA
            <span className="bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200 text-[10px] px-2 py-0.5 rounded-full">Beta</span>
          </button>
        </div>
      </div>

      {activeTab === 'categories' ? <AdminCategories /> : <AdminStandards {...props} />}
    </div>
  );
};