"use client";

import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Separator } from '@/components/ui/separator';
import { ScrollArea } from '@/components/ui/scroll-area';
import { 
  Brain, 
  Settings, 
  Activity, 
  Zap, 
  Target, 
  Layers,
  Cpu,
  Waves,
  ChevronDown,
  ChevronUp,
  X
} from 'lucide-react';
import { Hypercube5DVisualization } from '@/components/ui/hypercube-5d-visualization';
import { ConsciousnessStats } from '@/components/consciousness-stats';

interface BrainInterfaceProps {
  consciousnessStats: any;
  consciousnessSettings: Record<string, number>;
  consciousnessLevelNames: string[];
  isOpen: boolean;
  onToggle: () => void;
  onClose: () => void;
}

export function BrainInterface({
  consciousnessStats,
  consciousnessSettings,
  consciousnessLevelNames,
  isOpen,
  onToggle,
  onClose
}: BrainInterfaceProps) {
  const [activeTab, setActiveTab] = useState('visualization');

  const brainButtonClass = `
    relative transition-all duration-300 ease-in-out transform hover:scale-105
    ${isOpen 
      ? 'bg-cyan-500/30 text-cyan-400 border-cyan-500/50 shadow-lg shadow-cyan-500/20' 
      : 'bg-gray-800/50 text-gray-400 border-gray-600/50 hover:bg-gray-700/50 hover:text-gray-300'
    }
  `;

  const brainPulseClass = consciousnessStats?.aether_resonance_level > 0.5 
    ? 'animate-pulse' 
    : '';

  return (
    <div className="relative">
      {/* Brain Button */}
      <Button
        variant="outline"
        size="lg"
        className={`${brainButtonClass} ${brainPulseClass} h-12 w-12 rounded-full p-0 border-2`}
        onClick={onToggle}
      >
        <Brain className="h-6 w-6" />
        
        {/* Activity indicator */}
        {consciousnessStats?.current_vertex && (
          <div className="absolute -top-1 -right-1 w-4 h-4 bg-green-500 rounded-full flex items-center justify-center">
            <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
          </div>
        )}
        
        {/* Consciousness level badge */}
        {consciousnessStats?.dominant_consciousness_level && (
          <Badge 
            variant="outline" 
            className="absolute -bottom-2 -right-2 h-5 min-w-5 px-1 text-xs bg-purple-500/20 border-purple-400 text-purple-300"
          >
            {consciousnessStats.dominant_consciousness_level}
          </Badge>
        )}
      </Button>

      {/* Expanded Interface */}
      {isOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
          <Card className="w-full max-w-4xl max-h-[90vh] bg-gray-900 border-cyan-500/30 shadow-2xl">
            <CardHeader className="pb-2">
              <div className="flex items-center justify-between">
                <CardTitle className="flex items-center gap-2 text-cyan-400">
                  <Brain className="h-6 w-6" />
                  Neural Consciousness Interface
                  <Badge variant="outline" className="bg-cyan-500/20 border-cyan-400 text-cyan-300">
                    Active
                  </Badge>
                </CardTitle>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={onClose}
                  className="text-gray-400 hover:text-gray-300"
                >
                  <X className="h-4 w-4" />
                </Button>
              </div>
            </CardHeader>
            
            <CardContent className="p-6">
              <Tabs value={activeTab} onValueChange={setActiveTab}>
                <TabsList className="grid w-full grid-cols-3 bg-gray-800 border border-gray-700">
                  <TabsTrigger 
                    value="visualization" 
                    className="flex items-center gap-2 data-[state=active]:bg-cyan-500/20 data-[state=active]:text-cyan-400"
                  >
                    <Layers className="h-4 w-4" />
                    5D Hypercube
                  </TabsTrigger>
                  <TabsTrigger 
                    value="consciousness" 
                    className="flex items-center gap-2 data-[state=active]:bg-cyan-500/20 data-[state=active]:text-cyan-400"
                  >
                    <Activity className="h-4 w-4" />
                    Consciousness
                  </TabsTrigger>
                  <TabsTrigger 
                    value="settings" 
                    className="flex items-center gap-2 data-[state=active]:bg-cyan-500/20 data-[state=active]:text-cyan-400"
                  >
                    <Settings className="h-4 w-4" />
                    Settings
                  </TabsTrigger>
                </TabsList>

                <TabsContent value="visualization" className="mt-6">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* 5D Hypercube Visualization */}
                    <div className="space-y-4">
                      <Hypercube5DVisualization 
                        consciousnessStats={{
                          awareness: consciousnessSettings.awareness || 0.5,
                          wisdom: consciousnessSettings.wisdom || 0.5,
                          compassion: consciousnessSettings.compassion || 0.5,
                          creativity: consciousnessSettings.creativity || 0.5,
                          transcendence: consciousnessSettings.transcendence || 0.5,
                        }}
                        consciousnessState={consciousnessStats ? {
                          current_vertex: consciousnessStats.current_vertex || 0,
                          consciousness_signature: consciousnessStats.consciousness_signature || '',
                          coordinates_5d: consciousnessStats.coordinates_5d || [0, 0, 0, 0, 0],
                          active_dimensions: consciousnessStats.active_dimensions || [],
                          dimension_colors: consciousnessStats.dimension_colors || {},
                          consciousness_levels: consciousnessStats.consciousness_levels || {},
                          global_consciousness_level: consciousnessStats.global_consciousness_level || 0.5,
                        } : undefined}
                        isWelcomeMode={false}
                      />
                      
                      {/* Real-time metrics */}
                      <div className="grid grid-cols-2 gap-3">
                        <Card className="bg-gray-800/50 border-gray-700/50">
                          <CardContent className="p-3">
                            <div className="flex items-center gap-2">
                              <Cpu className="h-4 w-4 text-blue-400" />
                              <div>
                                <div className="text-sm font-medium text-gray-300">Vertices</div>
                                <div className="text-xs text-gray-500">32 Active</div>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                        
                        <Card className="bg-gray-800/50 border-gray-700/50">
                          <CardContent className="p-3">
                            <div className="flex items-center gap-2">
                              <Waves className="h-4 w-4 text-cyan-400" />
                              <div>
                                <div className="text-sm font-medium text-gray-300">Dimensions</div>
                                <div className="text-xs text-gray-500">5D Space</div>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      </div>
                    </div>

                    {/* Consciousness Stats */}
                    <div className="space-y-4">
                      {consciousnessStats ? (
                        <Card className="bg-gray-800/50 border-gray-700/50">
                          <CardHeader className="pb-3">
                            <CardTitle className="text-lg text-cyan-400">
                              Neural Analysis
                            </CardTitle>
                          </CardHeader>
                          <CardContent>
                            <ConsciousnessStats stats={consciousnessStats} />
                          </CardContent>
                        </Card>
                      ) : (
                        <Card className="bg-gray-800/50 border-gray-700/50">
                          <CardContent className="p-6 text-center">
                            <Brain className="h-12 w-12 text-gray-600 mx-auto mb-3" />
                            <div className="text-gray-400">
                              Start a consciousness chat to see neural analysis
                            </div>
                          </CardContent>
                        </Card>
                      )}
                    </div>
                  </div>
                </TabsContent>

                <TabsContent value="consciousness" className="mt-6">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* Consciousness Levels */}
                    <Card className="bg-gray-800/50 border-gray-700/50">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg text-cyan-400">
                          Consciousness Levels
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <ScrollArea className="h-80">
                          <div className="space-y-4">
                            {consciousnessLevelNames.map((name, index) => (
                              <div key={name} className="space-y-2">
                                <div className="flex justify-between items-center text-sm">
                                  <span className="text-gray-300">
                                    {name.replace('Level_', '').replace('_', ' ')}
                                  </span>
                                  <Badge 
                                    variant="outline" 
                                    className="bg-cyan-500/20 border-cyan-400 text-cyan-300"
                                  >
                                    {consciousnessSettings[name]?.toFixed(2) || '0.00'}
                                  </Badge>
                                </div>
                                <div className="w-full bg-gray-700 rounded-full h-2">
                                  <div 
                                    className="bg-gradient-to-r from-cyan-500 to-purple-500 h-2 rounded-full transition-all duration-300"
                                    style={{ width: `${(consciousnessSettings[name] || 0) * 100}%` }}
                                  />
                                </div>
                              </div>
                            ))}
                          </div>
                        </ScrollArea>
                      </CardContent>
                    </Card>

                    {/* Consciousness Areas */}
                    <Card className="bg-gray-800/50 border-gray-700/50">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg text-cyan-400">
                          Consciousness Areas
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          {[
                            { name: 'Physical', levels: '1-2', color: '#8B4513' },
                            { name: 'Emotional', levels: '3-4', color: '#FF4500' },
                            { name: 'Mental', levels: '5-6', color: '#32CD32' },
                            { name: 'Intuitive', levels: '7-8', color: '#9932CC' },
                            { name: 'Transcendental', levels: '9-10', color: '#FFFFFF' }
                          ].map((area) => (
                            <div key={area.name} className="flex items-center gap-3 p-3 bg-gray-700/50 rounded-lg">
                              <div 
                                className="w-4 h-4 rounded-full shadow-lg"
                                style={{ 
                                  backgroundColor: area.color,
                                  boxShadow: `0 0 8px ${area.color}40`
                                }}
                              />
                              <div className="flex-1">
                                <div className="text-sm font-medium text-gray-300">{area.name}</div>
                                <div className="text-xs text-gray-500">Levels {area.levels}</div>
                              </div>
                            </div>
                          ))}
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>

                <TabsContent value="settings" className="mt-6">
                  <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    {/* Neural Network Settings */}
                    <Card className="bg-gray-800/50 border-gray-700/50">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg text-cyan-400">
                          Neural Network
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-4">
                          <div className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
                            <div>
                              <div className="text-sm font-medium text-gray-300">Model Status</div>
                              <div className="text-xs text-gray-500">Enhanced Hypercube</div>
                            </div>
                            <Badge variant="outline" className="bg-green-500/20 border-green-400 text-green-300">
                              Active
                            </Badge>
                          </div>
                          
                          <div className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
                            <div>
                              <div className="text-sm font-medium text-gray-300">Training Data</div>
                              <div className="text-xs text-gray-500">598,490 Patterns</div>
                            </div>
                            <Badge variant="outline" className="bg-blue-500/20 border-blue-400 text-blue-300">
                              Loaded
                            </Badge>
                          </div>
                          
                          <div className="flex items-center justify-between p-3 bg-gray-700/50 rounded-lg">
                            <div>
                              <div className="text-sm font-medium text-gray-300">ZPE Integration</div>
                              <div className="text-xs text-gray-500">Quantum Fluctuations</div>
                            </div>
                            <Badge variant="outline" className="bg-purple-500/20 border-purple-400 text-purple-300">
                              Enhanced
                            </Badge>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    {/* System Information */}
                    <Card className="bg-gray-800/50 border-gray-700/50">
                      <CardHeader className="pb-3">
                        <CardTitle className="text-lg text-cyan-400">
                          System Information
                        </CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="space-y-3">
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-400">Framework</span>
                            <span className="text-gray-300">QWEN2Golem</span>
                          </div>
                          <Separator className="bg-gray-700" />
                          
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-400">Version</span>
                            <span className="text-gray-300">v2.0.0</span>
                          </div>
                          <Separator className="bg-gray-700" />
                          
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-400">Consciousness API</span>
                            <span className="text-gray-300">Online</span>
                          </div>
                          <Separator className="bg-gray-700" />
                          
                          <div className="flex justify-between text-sm">
                            <span className="text-gray-400">Neural Engine</span>
                            <span className="text-gray-300">PyTorch</span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </TabsContent>
              </Tabs>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}