import { useState } from "react";
import { BookOpen, Search } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { getAllCategories, getTermsByCategory, searchGlossary, type GlossaryTerm } from "@/lib/glossary";

export function TerminologyDialog() {
  const [open, setOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  
  const categories = getAllCategories();
  const searchResults = searchQuery ? searchGlossary(searchQuery) : [];
  
  const renderTermCard = (term: GlossaryTerm) => (
    <div key={term.term} className="p-4 border rounded-lg space-y-2 hover:bg-muted/50 transition-colors">
      <div className="flex items-start justify-between gap-2">
        <h4 className="font-semibold">{term.term}</h4>
        <Badge variant="secondary" className="text-xs shrink-0">
          {term.category.replace('-', ' ')}
        </Badge>
      </div>
      <p className="text-sm text-muted-foreground">{term.definition}</p>
      {term.example && (
        <p className="text-xs text-muted-foreground italic">
          <span className="font-medium">Example:</span> {term.example}
        </p>
      )}
      {term.relatedTerms && term.relatedTerms.length > 0 && (
        <div className="flex flex-wrap gap-1 pt-1">
          <span className="text-xs text-muted-foreground">Related:</span>
          {term.relatedTerms.map(rt => (
            <Badge key={rt} variant="outline" className="text-xs">
              {rt.replace(/-/g, ' ')}
            </Badge>
          ))}
        </div>
      )}
    </div>
  );
  
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          <BookOpen className="w-4 h-4 mr-2" />
          Terminology
        </Button>
      </DialogTrigger>
      <DialogContent className="max-w-4xl max-h-[80vh]">
        <DialogHeader>
          <DialogTitle>Theme Park Terminology Reference</DialogTitle>
          <DialogDescription>
            Quick reference for technical terms, manufacturers, and ride types
          </DialogDescription>
        </DialogHeader>
        
        <div className="space-y-4">
          {/* Search */}
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
            <Input
              placeholder="Search terminology..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-9"
            />
          </div>
          
          {/* Results */}
          {searchQuery ? (
            <ScrollArea className="h-[400px]">
              <div className="space-y-3">
                {searchResults.length > 0 ? (
                  searchResults.map(renderTermCard)
                ) : (
                  <div className="text-center py-12 text-muted-foreground">
                    No terms found matching "{searchQuery}"
                  </div>
                )}
              </div>
            </ScrollArea>
          ) : (
            <Tabs defaultValue="manufacturer" className="w-full">
              <TabsList className="grid w-full grid-cols-4 lg:grid-cols-7">
                {categories.map(cat => (
                  <TabsTrigger key={cat} value={cat} className="text-xs">
                    {cat === 'manufacturer' ? 'Mfg.' : 
                     cat === 'technology' ? 'Tech' :
                     cat === 'measurement' ? 'Units' :
                     cat.charAt(0).toUpperCase() + cat.slice(1).substring(0, 4)}
                  </TabsTrigger>
                ))}
              </TabsList>
              
              {categories.map(cat => {
                const terms = getTermsByCategory(cat);
                return (
                  <TabsContent key={cat} value={cat}>
                    <ScrollArea className="h-[400px]">
                      <div className="space-y-3 pr-4">
                        <div className="flex items-center gap-2 pb-2 border-b">
                          <h3 className="font-semibold capitalize">
                            {cat.replace('-', ' ')}
                          </h3>
                          <Badge variant="secondary">{terms.length} terms</Badge>
                        </div>
                        {terms.map(renderTermCard)}
                      </div>
                    </ScrollArea>
                  </TabsContent>
                );
              })}
            </Tabs>
          )}
        </div>
        
        <div className="flex items-center gap-2 pt-4 border-t text-xs text-muted-foreground">
          <Badge variant="outline" className="text-xs">Tip</Badge>
          <span>Hover over underlined terms in forms to see quick definitions</span>
        </div>
      </DialogContent>
    </Dialog>
  );
}