/**
 * Ideas Management Tab
 * Allows administrators to add ideas and search for similar ones using vector similarity
 */
import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { apiClient } from "@/shared/api/client";
import { Lightbulb, Search, Plus, Trash2, Loader2, CheckCircle2, AlertCircle } from "lucide-react";
import { toast } from "sonner";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { formatIsoToDdMmYyyyHhMm } from "@/lib/vnDateFormat";

interface Idea {
  id: string;
  title: string;
  description: string;
  category?: string;
  created_at: string;
  similarity_score?: number;
}

export function IdeasManagementTab() {
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [category, setCategory] = useState<string>("");
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState<Idea[]>([]);
  const [isSearching, setIsSearching] = useState(false);
  const queryClient = useQueryClient();

  // Fetch all ideas
  const { data: allIdeas, isLoading: ideasLoading } = useQuery<{ ideas: Idea[]; count: number }>({
    queryKey: ['ideas', 'all'],
    queryFn: async () => {
      return apiClient.get('/api/v1/ideas?limit=100');
    },
  });

  // Add idea mutation
  const addIdeaMutation = useMutation({
    mutationFn: async (idea: { title: string; description: string; category?: string }) => {
      return apiClient.post('/api/v1/ideas', idea);
    },
    onSuccess: () => {
      toast.success("Đã thêm ý tưởng thành công!");
      setTitle("");
      setDescription("");
      setCategory("");
      queryClient.invalidateQueries({ queryKey: ['ideas'] });
    },
    onError: (error: any) => {
      toast.error(`Lỗi thêm ý tưởng: ${error.message || "Không thể thêm"}`);
    },
  });

  // Delete idea mutation
  const deleteIdeaMutation = useMutation({
    mutationFn: async (ideaId: string) => {
      return apiClient.delete(`/api/v1/ideas/${ideaId}`);
    },
    onSuccess: () => {
      toast.success("Đã xóa ý tưởng thành công!");
      queryClient.invalidateQueries({ queryKey: ['ideas'] });
    },
    onError: (error: any) => {
      toast.error(`Lỗi xóa ý tưởng: ${error.message || "Không thể xóa"}`);
    },
  });

  // Initialize UMP ideas mutation
  const initializeUMPMutation = useMutation({
    mutationFn: async () => {
      return apiClient.post('/api/v1/ideas/initialize-ump');
    },
    onSuccess: (data: any) => {
      toast.success(`Đã thêm ${data.count || 10} ý tưởng UMP thành công!`);
      queryClient.invalidateQueries({ queryKey: ['ideas'] });
    },
    onError: (error: any) => {
      toast.error(`Lỗi khởi tạo ý tưởng UMP: ${error.message || "Không thể khởi tạo"}`);
    },
  });

  const handleAddIdea = () => {
    if (!title.trim() || !description.trim()) {
      toast.error("Vui lòng điền đầy đủ tiêu đề và mô tả");
      return;
    }
    addIdeaMutation.mutate({ title, description, category: category || undefined });
  };

  const handleSearch = async () => {
    if (!searchQuery.trim()) {
      toast.error("Vui lòng nhập từ khóa tìm kiếm");
      return;
    }

    setIsSearching(true);
    try {
      const response = await apiClient.post<{ results: Idea[]; count: number }>('/api/v1/ideas/search', {
        query: searchQuery,
        limit: 10,
        score_threshold: 0.5,
      });
      setSearchResults(response.results || []);
      if (response.results.length === 0) {
        toast.info("Không tìm thấy ý tưởng tương tự");
      } else {
        toast.success(`Tìm thấy ${response.results.length} ý tưởng tương tự`);
      }
    } catch (error: any) {
      toast.error(`Lỗi tìm kiếm: ${error.message || "Không thể tìm kiếm"}`);
      setSearchResults([]);
    } finally {
      setIsSearching(false);
    }
  };

  const handleDelete = (ideaId: string) => {
    if (confirm("Bạn có chắc chắn muốn xóa ý tưởng này?")) {
      deleteIdeaMutation.mutate(ideaId);
    }
  };

  const categories = [
    "Giáo dục - AI",
    "Giáo dục - Chuyển đổi số",
    "Giáo dục - AR/VR",
    "Giáo dục - Quản lý chất lượng",
    "Nghiên cứu - AI",
    "Nghiên cứu - Dịch tễ học",
    "Nghiên cứu - Y học chính xác",
    "Tác động xã hội - Telehealth",
    "Tác động xã hội - Sức khỏe",
    "Khởi nghiệp - MedTech",
  ];

  return (
    <div className="space-y-6">
      {/* Add New Idea */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Plus className="h-5 w-5" />
            Thêm Ý tưởng Mới
          </CardTitle>
          <CardDescription>
            Thêm ý tưởng đổi mới sáng tạo vào cơ sở dữ liệu để tìm kiếm tương tự
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="idea-title">Tiêu đề Ý tưởng</Label>
            <Input
              id="idea-title"
              placeholder="Nhập tiêu đề ý tưởng..."
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="idea-description">Mô tả Ý tưởng</Label>
            <Textarea
              id="idea-description"
              placeholder="Nhập mô tả chi tiết về ý tưởng..."
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={5}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="idea-category">Danh mục (Tùy chọn)</Label>
            <Select value={category} onValueChange={setCategory}>
              <SelectTrigger>
                <SelectValue placeholder="Chọn danh mục" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="">Không có danh mục</SelectItem>
                {categories.map((cat) => (
                  <SelectItem key={cat} value={cat}>
                    {cat}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <Button
            onClick={handleAddIdea}
            disabled={addIdeaMutation.isPending || !title.trim() || !description.trim()}
            className="w-full"
          >
            {addIdeaMutation.isPending ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Đang thêm...
              </>
            ) : (
              <>
                <Plus className="h-4 w-4 mr-2" />
                Thêm Ý tưởng
              </>
            )}
          </Button>
        </CardContent>
      </Card>

      {/* Search Similar Ideas */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Search className="h-5 w-5" />
            Tìm kiếm Ý tưởng Tương tự
          </CardTitle>
          <CardDescription>
            Tìm kiếm các ý tưởng tương tự trong cơ sở dữ liệu sử dụng vector similarity
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="search-query">Nhập ý tưởng hoặc mô tả để tìm kiếm</Label>
            <Textarea
              id="search-query"
              placeholder="Nhập mô tả ý tưởng mới của bạn để tìm các ý tưởng tương tự..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              rows={3}
            />
          </div>

          <Button
            onClick={handleSearch}
            disabled={isSearching || !searchQuery.trim()}
            className="w-full"
          >
            {isSearching ? (
              <>
                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                Đang tìm kiếm...
              </>
            ) : (
              <>
                <Search className="h-4 w-4 mr-2" />
                Tìm kiếm
              </>
            )}
          </Button>

          {/* Search Results */}
          {searchResults.length > 0 && (
            <div className="space-y-3 mt-4">
              <h3 className="font-semibold">Kết quả tìm kiếm ({searchResults.length})</h3>
              {searchResults.map((idea) => (
                <Card key={idea.id} className="border-l-4 border-l-primary">
                  <CardContent className="pt-4">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h4 className="font-semibold">{idea.title}</h4>
                          {idea.category && (
                            <Badge variant="outline">{idea.category}</Badge>
                          )}
                          {idea.similarity_score !== undefined && (
                            <Badge variant="default">
                              {(idea.similarity_score * 100).toFixed(1)}% tương tự
                            </Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mb-2">{idea.description}</p>
                        <p className="text-xs text-muted-foreground">
                          Thêm vào: {formatIsoToDdMmYyyyHhMm(idea.created_at)}
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* All Ideas List */}
      <Card>
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
              <CardTitle className="flex items-center gap-2">
                <Lightbulb className="h-5 w-5" />
                Tất cả Ý tưởng ({allIdeas?.count || 0})
              </CardTitle>
              <CardDescription>
                Danh sách tất cả các ý tưởng đã được lưu trong cơ sở dữ liệu
              </CardDescription>
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={() => initializeUMPMutation.mutate()}
              disabled={initializeUMPMutation.isPending}
            >
              {initializeUMPMutation.isPending ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Đang thêm...
                </>
              ) : (
                <>
                  <Plus className="h-4 w-4 mr-2" />
                  Thêm 10 ý tưởng UMP
                </>
              )}
            </Button>
          </div>
        </CardHeader>
        <CardContent>
          {ideasLoading ? (
            <div className="flex items-center justify-center py-8">
              <Loader2 className="h-6 w-6 animate-spin" />
            </div>
          ) : allIdeas && allIdeas.ideas.length > 0 ? (
            <div className="space-y-3">
              {allIdeas.ideas.map((idea) => (
                <Card key={idea.id} className="border">
                  <CardContent className="pt-4">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <h4 className="font-semibold">{idea.title}</h4>
                          {idea.category && (
                            <Badge variant="outline">{idea.category}</Badge>
                          )}
                        </div>
                        <p className="text-sm text-muted-foreground mb-2">{idea.description}</p>
                        <p className="text-xs text-muted-foreground">
                          Thêm vào: {formatIsoToDdMmYyyyHhMm(idea.created_at)}
                        </p>
                      </div>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleDelete(idea.id)}
                        className="text-destructive hover:text-destructive"
                      >
                        <Trash2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              <Lightbulb className="h-12 w-12 mx-auto mb-2 opacity-50" />
              <p>Chưa có ý tưởng nào</p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
