import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Search, BookOpen } from 'lucide-react';
import { nbr6123Glossary } from '@/data/glossary';

const Glossary: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');

  const filteredTerms = useMemo(() => {
    const termLower = searchTerm.toLowerCase();
    return nbr6123Glossary.filter(item => {
      if (item.term.toLowerCase().includes(termLower)) return true;
      if (item.definition.toLowerCase().includes(termLower)) return true;
      if (item.tags.some(t => t.toLowerCase().includes(termLower))) return true;
      if (item.reference.toLowerCase().includes(termLower)) return true;
      return false;
    });
  }, [searchTerm]);

  return (
    <div className="space-y-6">
      <Card className="border-border shadow-sm bg-card/50">
        <CardHeader className="pb-4">
          <div className="flex items-center gap-2">
            <div className="p-2 bg-primary/10 rounded-lg">
              <BookOpen className="w-5 h-5 text-primary" />
            </div>
            <div>
              <CardTitle className="text-xl">Glossário NBR 6123</CardTitle>
              <CardDescription>
                Dicionário técnico com termos aerodinâmicos e variáveis normativas explicadas de forma didática.
              </CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <div className="relative">
            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
            <Input
              placeholder="Buscar termo, sigla (ex: Cpe, S1) ou conceito..."
              className="pl-10 max-w-full"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      <div className="grid gap-4 md:grid-cols-2">
        {filteredTerms.length > 0 ? (
          filteredTerms.map((item) => (
            <Card key={item.id} className="overflow-hidden hover:border-primary/50 transition-colors">
              <CardHeader className="p-4 bg-muted/20 border-b pb-3">
                <CardTitle className="text-base text-primary flex items-center justify-between">
                  {item.term}
                </CardTitle>
                <CardDescription className="text-xs text-muted-foreground font-mono mt-1">
                  {item.reference}
                </CardDescription>
              </CardHeader>
              <CardContent className="p-4">
                <p className="text-sm leading-relaxed text-foreground/90">
                  {item.definition}
                </p>
                <div className="flex flex-wrap gap-1.5 mt-4">
                  {item.tags.map((tag, idx) => (
                    <Badge key={idx} variant="secondary" className="text-[10px] font-normal px-2 py-0 h-5">
                      {tag}
                    </Badge>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))
        ) : (
          <div className="col-span-1 md:col-span-2 py-12 text-center text-muted-foreground border border-dashed rounded-lg">
            Nenhum termo encontrado para "{searchTerm}".
          </div>
        )}
      </div>
    </div>
  );
};

export default Glossary;