"use client";

import { useState } from "react";
import { useAuthStore } from "@/hooks/useAuthStore";
import { useChatStore } from "@/hooks/useChatStore";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Search, User, Tag } from "lucide-react";
import { cn } from "@/lib/utils";

interface EntityMention {
  id: string;
  type: string;
  name: string;
  description?: string;
}

export function EntityMentions() {
  const { user } = useAuthStore();
  const { sendMessage } = useChatStore();
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedEntity, setSelectedEntity] = useState<EntityMention | null>(null);

  if (!user) return null;

  // Mock entity data - in a real implementation, this would come from API
  const mockEntities: EntityMention[] = [
    { id: "1", type: "product", name: "Laptop Pro", description: "High-performance laptop" },
    { id: "2", type: "customer", name: "John Doe", description: "Premium customer" },
    { id: "3", type: "order", name: "ORD-12345", description: "Pending order" },
    { id: "4", type: "category", name: "Electronics", description: "Electronic products" },
  ];

  const filteredEntities = mockEntities.filter(entity =>
    entity.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    entity.type.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleEntitySelect = (entity: EntityMention) => {
    setSelectedEntity(entity);
  };

  const handleQuoteEntity = () => {
    if (selectedEntity) {
      const message = `@${selectedEntity.type}:${selectedEntity.id} ${selectedEntity.name}`;
      sendMessage(message);
      setSelectedEntity(null);
    }
  };

  return (
    <Card className="border-t border-border">
      <CardContent className="p-3">
        <div className="flex items-center gap-2 mb-3">
          <Search className="h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search entities to mention..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            className="h-8"
          />
        </div>
        
        {selectedEntity && (
          <div className="mb-3 p-2 bg-muted rounded">
            <div className="flex items-center gap-2">
              <Tag className="h-4 w-4" />
              <span className="text-sm font-medium">{selectedEntity.name}</span>
              <Badge variant="secondary" className="text-xs">
                {selectedEntity.type}
              </Badge>
            </div>
            {selectedEntity.description && (
              <p className="text-xs text-muted-foreground mt-1">
                {selectedEntity.description}
              </p>
            )}
            <div className="flex gap-2 mt-2">
              <Button
                size="sm"
                variant="default"
                onClick={handleQuoteEntity}
              >
                Quote
              </Button>
              <Button
                size="sm"
                variant="outline"
                onClick={() => setSelectedEntity(null)}
              >
                Clear
              </Button>
            </div>
          </div>
        )}

        <div className="space-y-2 max-h-40 overflow-y-auto">
          {filteredEntities.map((entity) => (
            <div
              key={entity.id}
              className={cn(
                "flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-muted",
                selectedEntity?.id === entity.id && "bg-muted"
              )}
              onClick={() => handleEntitySelect(entity)}
            >
              <div className="flex items-center gap-2 flex-1">
                <Tag className="h-4 w-4 text-muted-foreground" />
                <div>
                  <div className="text-sm font-medium">{entity.name}</div>
                  <div className="text-xs text-muted-foreground">{entity.type}</div>
                </div>
              </div>
              {entity.description && (
                <div className="text-xs text-muted-foreground">
                  {entity.description}
                </div>
              )}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}