import React from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { LearningModeSelector } from './LearningModeSelector';
import { UserGuide } from './UserGuide';
import { RadioGroup, RadioGroupItem } from './ui/radio-group';
import { Label } from './ui/label';
import { Button } from './ui/button';
import { RotateCcw, Settings, User, Users } from 'lucide-react';
import { Separator } from './ui/separator';
import { GroupMembers } from './GroupMembers';
import type { LearningMode, Language, SpaceType, GroupMember } from '../App';

interface LeftSidebarProps {
  learningMode: LearningMode;
  language: Language;
  onLearningModeChange: (mode: LearningMode) => void;
  onLanguageChange: (lang: Language) => void;
  spaceType: SpaceType;
  onSpaceTypeChange: (type: SpaceType) => void;
  groupMembers: GroupMember[];
}

export function LeftSidebar({
  learningMode,
  language,
  onLearningModeChange,
  onLanguageChange,
  spaceType,
  onSpaceTypeChange,
  groupMembers,
}: LeftSidebarProps) {
  return (
    <div className="flex-1 overflow-auto">
      {/* Space Selector */}
      <div className="p-4 border-b border-border space-y-3">
        <Label>Workspace</Label>
        <RadioGroup value={spaceType} onValueChange={(value) => onSpaceTypeChange(value as SpaceType)}>
          <div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-muted/50 transition-colors">
            <RadioGroupItem value="individual" id="individual" />
            <Label htmlFor="individual" className="cursor-pointer flex items-center gap-2 flex-1">
              <User className="h-4 w-4" />
              Individual Space
            </Label>
          </div>
          <div className="flex items-center space-x-2 p-2 rounded-lg hover:bg-muted/50 transition-colors">
            <RadioGroupItem value="group" id="group" />
            <Label htmlFor="group" className="cursor-pointer flex items-center gap-2 flex-1">
              <Users className="h-4 w-4" />
              Group Space
            </Label>
          </div>
        </RadioGroup>
      </div>

      {/* Group Members - Only show in group mode */}
      {spaceType === 'group' && (
        <div className="p-4 border-b border-border">
          <GroupMembers members={groupMembers} />
        </div>
      )}

      <Tabs defaultValue="settings" className="h-full flex flex-col">
        <div className="px-4 pt-4">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="settings">Settings</TabsTrigger>
            <TabsTrigger value="guide">Guide</TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="settings" className="flex-1 mt-0 p-4 space-y-6">
          <div className="space-y-4">
            <div>
              <h3>Model Settings</h3>
            </div>

            <div className="space-y-2">
              <Label>Model</Label>
              <div className="px-3 py-2 bg-muted rounded-md">
                <code className="text-sm">gpt-4.1-mini</code>
              </div>
            </div>

            <div className="space-y-2">
              <Label>Language</Label>
              <RadioGroup value={language} onValueChange={(value) => onLanguageChange(value as Language)}>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="auto" id="auto" />
                  <Label htmlFor="auto" className="cursor-pointer">Auto</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="en" id="en" />
                  <Label htmlFor="en" className="cursor-pointer">English</Label>
                </div>
                <div className="flex items-center space-x-2">
                  <RadioGroupItem value="zh" id="zh" />
                  <Label htmlFor="zh" className="cursor-pointer">简体中文</Label>
                </div>
              </RadioGroup>
            </div>
          </div>

          <Separator />

          <div className="space-y-3">
            <Button variant="outline" className="w-full gap-2" disabled>
              <Settings className="h-4 w-4" />
              System Settings
            </Button>
            <p className="text-xs text-muted-foreground text-center">
              © 2025 Clare AI Teaching Assistant
            </p>
          </div>
        </TabsContent>

        <TabsContent value="guide" className="flex-1 mt-0 p-4">
          <UserGuide />
        </TabsContent>
      </Tabs>
    </div>
  );
}