import { TranslationWithDetails } from "@/lib/types";
import { Translation } from "@shared/schema";
import { Button } from "@/components/ui/button";
import { Link } from "wouter";
import { Languages, ChevronDown, Globe, BookOpen, BookMarked } from "lucide-react";
import { 
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  SelectGroup,
  SelectLabel
} from "@/components/ui/select";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import { useState } from "react";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";

interface TranslationSelectorProps {
  translations: TranslationWithDetails[];
  currentTranslationId?: number;
  workSlug: string;
  workLanguage: string;
  onSelectTranslation: (translationId: number) => void;
  onViewOriginal: () => void;
  isOriginalSelected: boolean;
}

// Language display names for common languages
const languageNames: Record<string, string> = {
  'en': 'English',
  'fr': 'French (Français)',
  'es': 'Spanish (Español)',
  'de': 'German (Deutsch)',
  'it': 'Italian (Italiano)',
  'pt': 'Portuguese (Português)',
  'ru': 'Russian (Русский)',
  'zh': 'Chinese (中文)',
  'ja': 'Japanese (日本語)',
  'ko': 'Korean (한국어)',
  'ar': 'Arabic (العربية)',
  'hi': 'Hindi (हिन्दी)',
  'bn': 'Bengali (বাংলা)',
};

// Helper function to get display name
const getLanguageDisplayName = (code: string): string => {
  return languageNames[code.toLowerCase()] || code;
};

export function TranslationSelector({ 
  translations, 
  currentTranslationId, 
  workSlug,
  workLanguage,
  onSelectTranslation,
  onViewOriginal,
  isOriginalSelected
}: TranslationSelectorProps) {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  
  // Group translations by language
  const translationsByLanguage = translations.reduce<Record<string, TranslationWithDetails[]>>((acc, translation) => {
    if (!acc[translation.language]) {
      acc[translation.language] = [];
    }
    acc[translation.language].push(translation);
    return acc;
  }, {});
  
  // Get current translation
  const currentTranslation = translations.find(t => t.id === currentTranslationId);
  
  // Count languages for display
  const languageCount = Object.keys(translationsByLanguage).length;
  
  // Format date/year for display
  const formatYear = (year?: number) => {
    if (!year) return '';
    return year.toString();
  };

  return (
    <div className="mt-4">
      <h3 className="text-xs uppercase tracking-wider text-navy/60 dark:text-cream/60 font-sans font-medium mb-2 flex items-center gap-1">
        <Languages className="h-3.5 w-3.5" />
        <span>Language Options</span>
        <Badge variant="outline" className="ml-1 text-xs py-0 px-1.5 h-4 bg-navy/5 dark:bg-navy/20 border-none">
          {languageCount + 1} languages
        </Badge>
      </h3>
      
      <div className="flex flex-wrap gap-2">
        {/* Original language button */}
        <Button
          variant={isOriginalSelected ? "default" : "outline"}
          size="sm"
          className={`py-1 px-3 rounded-lg flex items-center gap-1 ${
            isOriginalSelected
              ? "bg-russet hover:bg-russet/90 text-white"
              : "border-navy/20 dark:border-cream/20 hover:bg-navy/5 dark:hover:bg-cream/5"
          }`}
          onClick={onViewOriginal}
        >
          <BookOpen className="h-3.5 w-3.5" />
          <span>Original ({getLanguageDisplayName(workLanguage)})</span>
        </Button>
        
        {/* Simple mobile-friendly dropdown for all translations */}
        <Select
          value={currentTranslationId?.toString()}
          onValueChange={(value) => {
            if (value) {
              onSelectTranslation(parseInt(value, 10));
            }
          }}
        >
          <SelectTrigger 
            className="w-auto border-navy/20 dark:border-cream/20 rounded-lg h-8 px-3"
          >
            <SelectValue placeholder="Select translation" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Translations</SelectLabel>
              {translations.map(translation => (
                <SelectItem 
                  key={translation.id} 
                  value={translation.id.toString()}
                  className="cursor-pointer"
                >
                  {getLanguageDisplayName(translation.language)} {translation.year ? `(${translation.year})` : ''}
                </SelectItem>
              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
        
        {/* Advanced translation selector with Popover */}
        <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
          <PopoverTrigger asChild>
            <Button
              variant="outline"
              size="sm"
              className="py-1 px-3 rounded-lg border-navy/20 dark:border-cream/20 flex items-center gap-1"
            >
              <Globe className="h-3.5 w-3.5" />
              <span>All Translations</span>
              <ChevronDown className="h-3.5 w-3.5 ml-1 opacity-70" />
            </Button>
          </PopoverTrigger>
          <PopoverContent className="w-80 p-0" align="start">
            <Tabs defaultValue="languages" className="w-full">
              <TabsList className="grid grid-cols-2 w-full">
                <TabsTrigger value="languages">By Language</TabsTrigger>
                <TabsTrigger value="translators">By Translator</TabsTrigger>
              </TabsList>
              
              <TabsContent value="languages" className="p-0">
                <ScrollArea className="h-60">
                  <div className="p-4 space-y-4">
                    {Object.entries(translationsByLanguage).map(([language, languageTranslations]) => (
                      <div key={language} className="space-y-2">
                        <h4 className="text-sm font-medium">{getLanguageDisplayName(language)}</h4>
                        <div className="ml-4 space-y-1.5">
                          {languageTranslations.map(translation => (
                            <Button
                              key={translation.id}
                              variant="ghost"
                              size="sm"
                              className={`w-full justify-start text-left py-1 h-auto ${
                                translation.id === currentTranslationId
                                  ? "bg-russet/10 text-russet font-medium"
                                  : ""
                              }`}
                              onClick={() => {
                                onSelectTranslation(translation.id);
                                setIsPopoverOpen(false);
                              }}
                            >
                              <div className="flex flex-col items-start">
                                <span>
                                  {translation.translator?.displayName || `Translator ${translation.translatorId}`}
                                  {translation.year ? ` (${translation.year})` : ''}
                                </span>
                              </div>
                            </Button>
                          ))}
                        </div>
                      </div>
                    ))}
                  </div>
                </ScrollArea>
              </TabsContent>
              
              <TabsContent value="translators" className="p-0">
                <ScrollArea className="h-60">
                  <div className="p-4 space-y-2">
                    {translations.map(translation => (
                      <Button
                        key={translation.id}
                        variant="ghost"
                        size="sm"
                        className={`w-full justify-start text-left h-auto ${
                          translation.id === currentTranslationId
                            ? "bg-russet/10 text-russet font-medium"
                            : ""
                        }`}
                        onClick={() => {
                          onSelectTranslation(translation.id);
                          setIsPopoverOpen(false);
                        }}
                      >
                        <div className="flex flex-col items-start">
                          <div className="flex items-center gap-1">
                            <span className="font-medium">
                              {translation.translator?.displayName || `Translator ${translation.translatorId}`}
                            </span>
                          </div>
                          <div className="text-xs flex gap-2 mt-0.5">
                            <span>{getLanguageDisplayName(translation.language)}</span>
                            {translation.year && <span>• {translation.year}</span>}
                          </div>
                        </div>
                      </Button>
                    ))}
                  </div>
                </ScrollArea>
              </TabsContent>
            </Tabs>
            
            <div className="p-2 border-t border-sage/20 dark:border-sage/10">
              <Link href={`/works/${workSlug}/compare${currentTranslationId ? `/${currentTranslationId}` : ''}`}>
                <Button
                  variant="outline"
                  size="sm" 
                  className="w-full flex items-center gap-1 border-navy/20 dark:border-cream/20"
                >
                  <BookMarked className="h-4 w-4" />
                  <span>Compare Translations</span>
                </Button>
              </Link>
            </div>
          </PopoverContent>
        </Popover>
        
        {/* Quick language pills for most common languages */}
        <div className="flex flex-wrap gap-1.5 mt-2">
          {Object.keys(translationsByLanguage).slice(0, 5).map(language => {
            const languageTranslations = translationsByLanguage[language];
            const isLanguageSelected = languageTranslations.some(t => t.id === currentTranslationId);
            
            return (
              <Button
                key={language}
                variant={isLanguageSelected ? "default" : "outline"}
                size="sm"
                className={`py-0.5 px-2 h-7 rounded-full text-xs ${
                  isLanguageSelected
                    ? "bg-russet hover:bg-russet/90 text-white"
                    : "border-navy/20 dark:border-cream/20"
                }`}
                onClick={() => {
                  // Select the first translation for this language
                  if (languageTranslations.length > 0) {
                    onSelectTranslation(languageTranslations[0].id);
                  }
                }}
              >
                {getLanguageDisplayName(language)}
              </Button>
            );
          })}
          
          {Object.keys(translationsByLanguage).length > 5 && (
            <Button
              variant="outline"
              size="sm"
              className="py-0.5 px-2 h-7 rounded-full text-xs border-navy/20 dark:border-cream/20"
              onClick={() => setIsPopoverOpen(true)}
            >
              +{Object.keys(translationsByLanguage).length - 5} more
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}
