/**
 * AI Management Tab
 * Allows administrators to manage AI models, settings, and configurations
 */
import { useState, useEffect } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Textarea } from "@/components/ui/textarea";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { useVisibilityAwareRefetchInterval } from "@/hooks/useVisibilityAwareRefetchInterval";
import { POLL_INTERVALS } from "@/shared/config/polling";
import { apiClient } from "@/shared/api/client";
import { Bot, RefreshCw, Settings, CheckCircle2, AlertCircle, Loader2, Save } from "lucide-react";
import { toast } from "sonner";
import { Skeleton } from "@/components/ui/skeleton";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";

interface HealthStatus {
  ollama: {
    status: string;
    available_models: string[];
  };
}

interface ModelMetadata {
  name: string;
  capabilities: string[];
  role: string;
  todoInstructions: string;
  prohibitionInstructions: string;
}

// Model metadata definitions
const MODEL_METADATA: Record<string, ModelMetadata> = {
  "qwen2.5:3b": {
    name: "Qwen 2.5 3B",
    capabilities: [
      "Hỗ trợ đa ngôn ngữ (Tiếng Việt, Tiếng Anh, và nhiều ngôn ngữ khác)",
      "Hiểu và trả lời câu hỏi về chính sách và tuân thủ",
      "Phân tích và xác minh nội dung theo tiêu chuẩn ISO 27001, NIST, GDPR",
      "Hướng dẫn về quy trình workflow và yêu cầu",
      "Xử lý ngôn ngữ tự nhiên với độ chính xác cao",
      "Tối ưu hóa cho hiệu suất với 3B tham số",
    ],
    role: "Bạn là một trợ lý tuân thủ và chính sách hữu ích. Vai trò của bạn là trả lời câu hỏi về quản trị CNTT, chính sách tuân thủ và yêu cầu quy định. Cung cấp hướng dẫn về ISO 27001, NIST, GDPR và các khung tuân thủ khác. Giúp người dùng hiểu quy trình workflow và yêu cầu. Xác minh nội dung theo tiêu chuẩn tuân thủ. Luôn cung cấp lời khuyên rõ ràng, có thể hành động. Nếu bạn không chắc chắn về điều gì đó, hãy nói như vậy thay vì đoán.",
    todoInstructions: "",
    prohibitionInstructions: "",
  },
  "qwen2.5:4b": {
    name: "Qwen 2.5 4B",
    capabilities: [
      "Hỗ trợ đa ngôn ngữ với hiệu suất cao hơn",
      "Khả năng xử lý ngữ cảnh phức tạp hơn",
      "Phân tích sâu hơn về các yêu cầu tuân thủ",
      "Tối ưu hóa cho các tác vụ chuyên sâu",
    ],
    role: "Bạn là một trợ lý tuân thủ và chính sách hữu ích với khả năng xử lý các tác vụ phức tạp hơn.",
    todoInstructions: "",
    prohibitionInstructions: "",
  },
  "gemma3:270M": {
    name: "Gemma 3 270M",
    capabilities: [
      "Mô hình nhẹ, nhanh chóng",
      "Phù hợp cho các tác vụ đơn giản",
      "Hỗ trợ tiếng Anh chính",
    ],
    role: "Bạn là một trợ lý AI nhẹ và nhanh chóng cho các tác vụ cơ bản.",
    todoInstructions: "",
    prohibitionInstructions: "",
  },
};

const STORAGE_KEY = "ai_model_config";

interface ModelConfig {
  model: string;
  todoInstructions: string;
  prohibitionInstructions: string;
}

export function AIManagementTab() {
  const [selectedModel, setSelectedModel] = useState<string>("qwen2.5:3b");
  const [todoInstructions, setTodoInstructions] = useState<string>("");
  const [prohibitionInstructions, setProhibitionInstructions] = useState<string>("");
  const queryClient = useQueryClient();

  // Load saved configuration
  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      try {
        const config: ModelConfig = JSON.parse(saved);
        if (config.model) setSelectedModel(config.model);
        if (config.todoInstructions) setTodoInstructions(config.todoInstructions);
        if (config.prohibitionInstructions) setProhibitionInstructions(config.prohibitionInstructions);
      } catch (error) {
        console.error("Error loading AI config:", error);
      }
    }
  }, []);

  // Update instructions when model changes
  useEffect(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
      try {
        const config: ModelConfig = JSON.parse(saved);
        if (config.model === selectedModel) {
          setTodoInstructions(config.todoInstructions || "");
          setProhibitionInstructions(config.prohibitionInstructions || "");
        } else {
          // Load default for new model
          const metadata = MODEL_METADATA[selectedModel];
          if (metadata) {
            setTodoInstructions(metadata.todoInstructions || "");
            setProhibitionInstructions(metadata.prohibitionInstructions || "");
          }
        }
      } catch (error) {
        console.error("Error loading model config:", error);
      }
    } else {
      // Load defaults
      const metadata = MODEL_METADATA[selectedModel];
      if (metadata) {
        setTodoInstructions(metadata.todoInstructions || "");
        setProhibitionInstructions(metadata.prohibitionInstructions || "");
      }
    }
  }, [selectedModel]);

  // Fetch health status to get available models
  const healthPoll = useVisibilityAwareRefetchInterval(POLL_INTERVALS.adminAiHealth);
  const { data: health, isLoading: healthLoading } = useQuery<HealthStatus>({
    queryKey: ['admin', 'health'],
    queryFn: async () => {
      return apiClient.get('/health');
    },
    staleTime: 30_000,
    refetchInterval: healthPoll,
    refetchOnWindowFocus: true,
  });

  // Save configuration
  const saveConfigMutation = useMutation({
    mutationFn: async (config: ModelConfig) => {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(config));
      return config;
    },
    onSuccess: () => {
      toast.success("Đã lưu cấu hình mô hình AI!");
    },
    onError: (error: any) => {
      toast.error(`Lỗi lưu cấu hình: ${error.message || "Không thể lưu"}`);
    },
  });

  // Test model endpoint
  const testModelMutation = useMutation({
    mutationFn: async (modelName: string) => {
      return apiClient.post('/test_ollama', {
        prompt: "Xin chào, bạn có thể trả lời bằng tiếng Việt không?",
      });
    },
    onSuccess: () => {
      toast.success("Mô hình hoạt động tốt!");
    },
    onError: (error: any) => {
      toast.error(`Lỗi kiểm tra mô hình: ${error.message || "Không thể kết nối"}`);
    },
  });

  const handleTestModel = () => {
    testModelMutation.mutate(selectedModel);
  };

  const handleRefreshModels = () => {
    queryClient.invalidateQueries({ queryKey: ['admin', 'health'] });
    toast.info("Đang làm mới danh sách mô hình...");
  };

  const handleSaveConfig = () => {
    saveConfigMutation.mutate({
      model: selectedModel,
      todoInstructions,
      prohibitionInstructions,
    });
  };

  const availableModels = health?.ollama?.available_models || [];
  const isOllamaConnected = health?.ollama?.status === "connected";
  const currentModelMetadata = MODEL_METADATA[selectedModel] || MODEL_METADATA["qwen2.5:3b"];

  return (
    <div className="space-y-6">
      {/* Model Selection and Configuration */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bot className="h-5 w-5" />
            Cấu hình Mô hình AI
          </CardTitle>
          <CardDescription>
            Chọn và cấu hình mô hình AI cho hệ thống
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Ollama Status */}
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <Label>Trạng thái Ollama</Label>
              {healthLoading ? (
                <Skeleton className="h-6 w-32" />
              ) : (
                <Badge variant={isOllamaConnected ? "default" : "destructive"} className="mt-1">
                  {isOllamaConnected ? (
                    <>
                      <CheckCircle2 className="h-3 w-3 mr-1" />
                      Đã kết nối
                    </>
                  ) : (
                    <>
                      <AlertCircle className="h-3 w-3 mr-1" />
                      Không kết nối
                    </>
                  )}
                </Badge>
              )}
            </div>
            <Button
              variant="outline"
              size="sm"
              onClick={handleRefreshModels}
              disabled={healthLoading}
            >
              <RefreshCw className={`h-4 w-4 mr-2 ${healthLoading ? "animate-spin" : ""}`} />
              Làm mới
            </Button>
          </div>

          {/* Model Selection */}
          <div className="space-y-2">
            <Label>Chọn Mô hình AI</Label>
            <Select value={selectedModel} onValueChange={setSelectedModel}>
              <SelectTrigger>
                <SelectValue placeholder="Chọn mô hình" />
              </SelectTrigger>
              <SelectContent>
                {availableModels.length > 0 ? (
                  availableModels.map((model) => (
                    <SelectItem key={model} value={model}>
                      {model}
                    </SelectItem>
                  ))
                ) : (
                  <SelectItem value="none" disabled>
                    Không có mô hình
                  </SelectItem>
                )}
              </SelectContent>
            </Select>
          </div>

          {/* Model Description - Capabilities */}
          <div className="space-y-2">
            <Label>Khả năng của Mô hình</Label>
            <Card className="bg-muted/50">
              <CardContent className="pt-4">
                {currentModelMetadata?.capabilities && currentModelMetadata.capabilities.length > 0 ? (
                  <ul className="space-y-1.5 text-sm">
                    {currentModelMetadata.capabilities.map((capability, index) => (
                      <li key={index} className="flex items-start gap-2">
                        <span className="text-primary mt-1.5">•</span>
                        <span>{capability}</span>
                      </li>
                    ))}
                  </ul>
                ) : (
                  <p className="text-sm text-muted-foreground">
                    Không có thông tin về khả năng cho mô hình này.
                  </p>
                )}
              </CardContent>
            </Card>
          </div>

          {/* Model Role */}
          <div className="space-y-2">
            <Label>Vai trò của Mô hình AI</Label>
            <Card className="bg-muted/50">
              <CardContent className="pt-4">
                {currentModelMetadata?.role ? (
                  <p className="text-sm whitespace-pre-wrap">{currentModelMetadata.role}</p>
                ) : (
                  <p className="text-sm text-muted-foreground">
                    Không có thông tin về vai trò cho mô hình này.
                  </p>
                )}
              </CardContent>
            </Card>
          </div>

          {/* To-Do Instructions */}
          <div className="space-y-2">
            <Label htmlFor="todo-instructions">Hướng dẫn Nhiệm vụ (To-Do Instructions)</Label>
            <p className="text-xs text-muted-foreground">
              Các hướng dẫn về những việc mô hình AI nên làm. Ví dụ: "Luôn trả lời bằng tiếng Việt", "Cung cấp ví dụ cụ thể khi giải thích"
            </p>
            <Textarea
              id="todo-instructions"
              placeholder="Nhập các hướng dẫn về nhiệm vụ mà mô hình AI nên thực hiện..."
              value={todoInstructions}
              onChange={(e) => setTodoInstructions(e.target.value)}
              rows={4}
              className="font-mono text-sm"
            />
          </div>

          {/* Prohibition Instructions */}
          <div className="space-y-2">
            <Label htmlFor="prohibition-instructions">Hướng dẫn Cấm (Prohibition Instructions)</Label>
            <p className="text-xs text-muted-foreground">
              Các hướng dẫn về những việc mô hình AI không được làm. Ví dụ: "Không được tiết lộ thông tin cá nhân", "Không được đưa ra lời khuyên pháp lý"
            </p>
            <Textarea
              id="prohibition-instructions"
              placeholder="Nhập các hướng dẫn về những việc mô hình AI không được thực hiện..."
              value={prohibitionInstructions}
              onChange={(e) => setProhibitionInstructions(e.target.value)}
              rows={4}
              className="font-mono text-sm"
            />
          </div>

          {/* Action Buttons */}
          <div className="flex gap-2">
            <Button
              onClick={handleSaveConfig}
              disabled={saveConfigMutation.isPending}
              className="flex-1"
            >
              {saveConfigMutation.isPending ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Đang lưu...
                </>
              ) : (
                <>
                  <Save className="h-4 w-4 mr-2" />
                  Lưu Cấu hình
                </>
              )}
            </Button>
            <Button
              onClick={handleTestModel}
              disabled={!isOllamaConnected || testModelMutation.isPending}
              variant="outline"
            >
              {testModelMutation.isPending ? (
                <>
                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
                  Đang kiểm tra...
                </>
              ) : (
                <>
                  <Settings className="h-4 w-4 mr-2" />
                  Kiểm tra
                </>
              )}
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Available Models List */}
      <Card>
        <CardHeader>
          <CardTitle>Mô hình có sẵn</CardTitle>
          <CardDescription>
            Danh sách tất cả các mô hình Ollama đã được tải trên hệ thống
          </CardDescription>
        </CardHeader>
        <CardContent>
          {healthLoading ? (
            <div className="space-y-2">
              <Skeleton className="h-10 w-full" />
              <Skeleton className="h-10 w-full" />
            </div>
          ) : availableModels.length > 0 ? (
            <div className="space-y-2">
              {availableModels.map((model, index) => (
                <div
                  key={index}
                  className="flex items-center justify-between p-3 border rounded-lg"
                >
                  <div className="flex items-center gap-2">
                    <Bot className="h-4 w-4 text-muted-foreground" />
                    <span className="font-medium">{model}</span>
                    {model === selectedModel && (
                      <Badge variant="default" className="text-xs">
                        Đang sử dụng
                      </Badge>
                    )}
                    {MODEL_METADATA[model] && (
                      <Badge variant="outline" className="text-xs">
                        {MODEL_METADATA[model].name}
                      </Badge>
                    )}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="text-center py-8 text-muted-foreground">
              <AlertCircle className="h-12 w-12 mx-auto mb-2 opacity-50" />
              <p>Không có mô hình nào được tải</p>
              <p className="text-xs mt-1">
                Vui lòng kiểm tra kết nối Ollama hoặc tải mô hình mới
              </p>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
