import React, { useState } from 'react';
import { Button } from '../ui/button';
import {
  Wand2,
  Mic2,
  Layers,
  Cloud,
  Folder,
  Settings,
  Network,
} from 'lucide-react';
import { useToast } from '../../context/ToastContext';
import { CloudFileBrowser } from '../studio/CloudFileBrowser';
import { AIToolsView } from '../studio/AIToolsView';
import { ConnectivityView } from '../studio/ConnectivityView';
import { CloudSettingsView } from '../studio/CloudSettingsView';
import { ProjectsManager } from '../studio/ProjectsManager';

interface StudioViewProps {
  section?: 'cloud' | 'projects';
}

export const StudioView: React.FC<StudioViewProps> = ({
  section: initialSection = 'cloud',
}) => {
  const { addToast } = useToast();
  const [section, setSection] = useState<'cloud' | 'projects'>(initialSection);
  const [activeTab, setActiveTab] = useState<
    'files' | 'tools' | 'connect' | 'settings'
  >('files');

  // --- RENDER PROJECTS ---
  if (section === 'projects') {
    return (
      <>
        <div className="flex justify-end mb-4">
          <Button
            variant="ghost"
            onClick={() => setSection('cloud')}
            icon={<Cloud className="w-4 h-4" />}
          >
            Switch to Cloud Studio
          </Button>
        </div>
        <ProjectsManager />
      </>
    );
  }

  // --- RENDER CLOUD STUDIO ---
  return (
    <div className="flex flex-col h-[calc(100vh-140px)] animate-fadeIn">
      {/* Header */}
      <div className="flex justify-between items-center mb-6 shrink-0">
        <div>
          <h2 className="text-3xl font-display font-bold text-white mb-2">
            CLOUD STUDIO
          </h2>
          <p className="text-gray-400 font-mono text-sm">
            Manage assets, process audio, and sync devices.
          </p>
        </div>
        <div className="flex gap-2">
          <Button
            variant="ghost"
            onClick={() => setSection('projects')}
            icon={<Layers className="w-4 h-4" />}
          >
            Switch to Projects
          </Button>
          <div className="px-4 py-2 bg-kodo-ink border border-kodo-steel rounded-lg flex items-center gap-3">
            <Cloud className="w-4 h-4 text-kodo-cyan" />
            <div className="w-32 h-2 bg-gray-700 rounded-full overflow-hidden">
              <div className="w-[65%] h-full bg-kodo-cyan"></div>
            </div>
            <span className="text-xs font-mono text-gray-400">
              65GB / 100GB
            </span>
          </div>
        </div>
      </div>

      <div className="flex flex-1 gap-6 overflow-hidden">
        {/* Sidebar Navigation */}
        <div className="w-64 flex flex-col gap-2 shrink-0">
          <NavButton
            active={activeTab === 'files'}
            onClick={() => setActiveTab('files')}
            icon={<Folder className="w-4 h-4" />}
            label="File Browser"
          />
          <NavButton
            active={activeTab === 'tools'}
            onClick={() => setActiveTab('tools')}
            icon={<Wand2 className="w-4 h-4" />}
            label="AI Tools"
          />
          <NavButton
            active={activeTab === 'connect'}
            onClick={() => setActiveTab('connect')}
            icon={<Network className="w-4 h-4" />}
            label="Connectivity"
          />
          <NavButton
            active={activeTab === 'settings'}
            onClick={() => setActiveTab('settings')}
            icon={<Settings className="w-4 h-4" />}
            label="Storage Settings"
          />

          <div className="mt-auto p-4 bg-kodo-ink rounded-xl border border-kodo-steel">
            <h4 className="text-xs font-bold text-gray-400 uppercase mb-2">
              Quick Actions
            </h4>
            <div className="space-y-2">
              <Button
                variant="secondary"
                size="sm"
                className="w-full text-xs justify-start"
                icon={<Mic2 className="w-3 h-3" />}
                onClick={() => {
                  setActiveTab('tools');
                  addToast('Vocal Remover Selected');
                }}
              >
                Remove Vocals
              </Button>
              <Button
                variant="secondary"
                size="sm"
                className="w-full text-xs justify-start"
                icon={<Layers className="w-3 h-3" />}
                onClick={() => {
                  setActiveTab('tools');
                  addToast('Stem Splitter Selected');
                }}
              >
                Split Stems
              </Button>
            </div>
          </div>
        </div>

        {/* Main Content Area */}
        <div className="flex-1 bg-kodo-graphite/30 border border-kodo-steel/30 rounded-xl p-6 overflow-hidden">
          {activeTab === 'files' && <CloudFileBrowser />}
          {activeTab === 'tools' && <AIToolsView />}
          {activeTab === 'connect' && <ConnectivityView />}
          {activeTab === 'settings' && <CloudSettingsView />}
        </div>
      </div>
    </div>
  );
};

const NavButton: React.FC<{
  active: boolean;
  onClick: () => void;
  icon: React.ReactNode;
  label: string;
}> = ({ active, onClick, icon, label }) => (
  <button
    onClick={onClick}
    className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-all ${active ? 'bg-kodo-cyan/10 text-kodo-cyan border border-kodo-cyan/30' : 'text-gray-400 hover:text-white hover:bg-white/5 border border-transparent'}`}
  >
    {icon}
    {label}
  </button>
);