import React from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { SettingsTab } from '../types';
import { SettingsHeader } from './settings/SettingsHeader';
import { GeneralTab } from './settings/GeneralTab';
import { AITab } from './settings/AITab';
import { AppearanceTab } from './settings/AppearanceTab';
import { BillingTab } from './settings/BillingTab';
import { ProfileTab } from './settings/ProfileTab';

interface SettingsViewProps {
  activeSettingsTab: SettingsTab;
  setActiveSettingsTab: (tab: SettingsTab) => void;
  accentColor: string;
  onAccentColorChange: (color: string) => void;
  onLogout: () => void;
  onOpenSidebar?: () => void;
}

export const SettingsView: React.FC<SettingsViewProps> = ({
  activeSettingsTab,
  setActiveSettingsTab,
  accentColor,
  onAccentColorChange,
  onLogout,
  onOpenSidebar
}) => {
  return (
    <div className="h-full flex flex-col bg-paper dark:bg-dark-paper overflow-y-auto custom-scrollbar relative font-sans">
      <div className="absolute inset-0 opacity-[0.04] pointer-events-none grainy-bg mix-blend-multiply dark:mix-blend-overlay" />
      
      <div className="relative z-10 flex flex-col min-h-full">
        <SettingsHeader 
          activeTab={activeSettingsTab} 
          setActiveTab={setActiveSettingsTab} 
          onOpenSidebar={onOpenSidebar}
        />

        <div className="flex-1 px-6 sm:px-12 pb-24 h-full">
          <div className="max-w-6xl mx-auto">
            <AnimatePresence mode="wait">
              {activeSettingsTab === 'general' && (
                <GeneralTab key="general" />
              )}

              {activeSettingsTab === 'ai' && (
                <AITab key="ai" />
              )}

              {activeSettingsTab === 'billing' && (
                <BillingTab key="billing" />
              )}

              {activeSettingsTab === 'appearance' && (
                <AppearanceTab 
                  key="appearance" 
                  accentColor={accentColor}
                  onAccentColorChange={onAccentColorChange}
                />
              )}

              {activeSettingsTab === 'profile' && (
                <ProfileTab 
                  key="profile" 
                  onLogout={onLogout}
                />
              )}

              {['data', 'mcp', 'about'].includes(activeSettingsTab) && (
                <motion.div 
                  key="placeholder"
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: -10 }}
                  className="h-[50vh] flex flex-col items-center justify-center border border-dashed border-border rounded-[32px] space-y-6 bg-white/20 dark:bg-white/5"
                >
                  <div className="w-16 h-16 rounded-3xl border border-dashed border-concrete/20 flex items-center justify-center text-concrete/40 bg-paper/50">
                    <span className="text-2xl font-serif italic text-concrete">?</span>
                  </div>
                  <div className="text-center space-y-1">
                    <p className="text-ink font-bold text-sm tracking-tight">Section en développement</p>
                    <p className="text-concrete italic text-[11px] font-light">Le module {activeSettingsTab} sera disponible prochainement.</p>
                  </div>
                </motion.div>
              )}
            </AnimatePresence>
          </div>
        </div>
      </div>
    </div>
  );
};