import { Plus, Trash2, Eye, EyeOff, X, Search, Loader2 } from "lucide-react"
import { useState, useRef, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { useLlmProviders, useUpdateLlmProviders } from "@/hooks/useConfig"
import { LlmProvider, LlmModel } from "@/types/config"
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"
import axios from "axios"

export function AIProviderTab() {
  const { data: providers, isLoading } = useLlmProviders();
  const updateProviders = useUpdateLlmProviders();
  const { toast } = useToast();
  
  const [isAddOpen, setIsAddOpen] = useState(false);
  const [formData, setFormData] = useState({ name: '', url: '', key: '' });

  const handleSave = () => {
      if (!formData.name || !formData.url || !formData.key) {
          toast({ title: "Validation Error", description: "All fields are required", type: "error" });
          return;
      }
      
      const id = formData.name.toLowerCase().replace(/\s+/g, '_');
      if (providers && providers[id]) {
          toast({ title: "Validation Error", description: "Provider with this name already exists", type: "error" });
          return;
      }

      const newProvider: LlmProvider = {
          name: formData.name,
          api_base_url: formData.url,
          api_key: formData.key,
          models: []
      };
      
      const newProviders = { ...providers, [id]: newProvider };
      
      updateProviders.mutate(newProviders, {
          onSuccess: () => {
              toast({ title: "Success", description: "Provider added successfully" });
              setIsAddOpen(false);
              setFormData({ name: '', url: '', key: '' });
          },
          onError: (err) => {
             toast({ title: "Error", description: "Failed to add provider: " + err, type: "error" });
          }
      });
  }

  const handleDelete = (id: string) => {
      if (!providers) return;
      const { [id]: removed, ...rest } = providers;
      updateProviders.mutate(rest, {
          onSuccess: () => toast({ title: "Success", description: "Provider removed" }),
          onError: () => toast({ title: "Error", description: "Failed to remove provider", type: "error" })
      });
  }

  const handleUpdateProvider = (id: string, updatedProvider: LlmProvider, showToast: boolean = true) => {
      if (!providers) return;
      const newProviders = { ...providers, [id]: updatedProvider };
      updateProviders.mutate(newProviders, {
          onSuccess: () => {
              if (showToast) {
                  toast({ title: "Success", description: "Provider updated" });
              }
          },
          onError: () => toast({ title: "Error", description: "Failed to update provider", type: "error" })
      });
  }

  if (isLoading) {
    return <div>Loading providers...</div>;
  }
  
  // Handle empty state explicitly if data is loaded but empty
  if (providers && Object.keys(providers).length === 0) {
     // Fallthrough to render normally, showing empty list
  }

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
           <h3 className="text-lg font-medium">已配置的服务商</h3>
           <p className="text-sm text-muted-foreground">管理连接到系统的 LLM API。</p>
        </div>
        <Dialog open={isAddOpen} onOpenChange={setIsAddOpen}>
          <DialogTrigger asChild>
            <Button><Plus className="mr-2 h-4 w-4" /> 添加 Provider</Button>
          </DialogTrigger>
          <DialogContent className="sm:max-w-[425px]">
            <DialogHeader>
              <DialogTitle>添加 AI Provider</DialogTitle>
              <DialogDescription>
                配置新的 LLM 服务商连接信息。
              </DialogDescription>
            </DialogHeader>
            <div className="grid gap-4 py-4">
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="name" className="text-right">名称</Label>
                <Input 
                    id="name" 
                    placeholder="e.g. OpenAI" 
                    className="col-span-3" 
                    value={formData.name}
                    onChange={(e) => setFormData({...formData, name: e.target.value})}
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="url" className="text-right">Base URL</Label>
                <Input 
                    id="url" 
                    placeholder="https://api.openai.com/v1" 
                    className="col-span-3" 
                    value={formData.url}
                    onChange={(e) => setFormData({...formData, url: e.target.value})}
                />
              </div>
              <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="key" className="text-right">API Key</Label>
                <Input 
                    id="key" 
                    type="password" 
                    className="col-span-3" 
                    value={formData.key}
                    onChange={(e) => setFormData({...formData, key: e.target.value})}
                />
              </div>
            </div>
            <DialogFooter>
              <Button type="submit" onClick={handleSave} disabled={updateProviders.isPending}>
                  {updateProviders.isPending ? "保存中..." : "保存"}
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>

      <div className="grid gap-6 md:grid-cols-1 lg:grid-cols-2">
        {providers && Object.entries(providers).map(([id, provider]) => (
          <ProviderCard 
            key={id} 
            id={id} 
            provider={provider} 
            onDelete={() => handleDelete(id)} 
            onUpdate={(p, showToast) => handleUpdateProvider(id, p, showToast)}
          />
        ))}
      </div>
    </div>
  )
}

function ProviderCard({ id, provider, onDelete, onUpdate }: { id: string, provider: LlmProvider, onDelete: () => void, onUpdate: (p: LlmProvider, showToast?: boolean) => void }) {
  const [showKey, setShowKey] = useState(false);
  // const discoverModels = useDiscoverModels(); // Removed as we now fetch manually
  const { toast } = useToast();
  
  // Discovered models cache for search (not saved to config)
  const [discoveredModels, setDiscoveredModels] = useState<LlmModel[]>([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [isSearchFocused, setIsSearchFocused] = useState(false);
  const [isFetchingModels, setIsFetchingModels] = useState(false);
  const searchRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Close search results on click outside
    const handleClickOutside = (event: MouseEvent) => {
        if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
            setIsSearchFocused(false);
        }
    };
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  // Auto-fetch models on interaction if cache is empty
  const fetchModels = async (force = false) => {
      // If we already have models and not forcing, don't fetch
      if (discoveredModels.length > 0 && !force) return;
      if (isFetchingModels) return;

      setIsFetchingModels(true);
      try {
        const response = await axios.get(`/api/v1/discover-models/${id}`);
        const data = response.data;
        
        let models: LlmModel[] = [];
        if (data && Array.isArray(data.data)) {
            models = data.data.map((m: any) => ({
                model_id: m.id,
                name: m.name || m.id,
                is_active: true
            }));
        } else if (Array.isArray(data)) {
            models = data.map((m: any) => ({
                model_id: m.id,
                name: m.name || m.id,
                is_active: true
            }));
        }

        setDiscoveredModels(models);

        if (models.length === 0) {
             // Silent fail or minimal toast?
             // toast({ title: "Info", description: "No models found from provider" });
        } else {
            toast({ title: "Models Discovered", description: `Found ${models.length} available models for autocomplete.` });
        }
      } catch (err) {
          console.error(err);
          toast({ title: "Discovery Error", description: "Failed to fetch model list for autocomplete", type: "error" });
      } finally {
          setIsFetchingModels(false);
      }
  }

  const handleInputFocus = () => {
      setIsSearchFocused(true);
      if (discoveredModels.length === 0) {
          fetchModels();
      }
  }

  const handleAddModel = (model: LlmModel) => {
      // Check if already exists
      if (provider.models.some(m => m.model_id === model.model_id)) {
          toast({ title: "Info", description: "Model already added" });
          setSearchQuery("");
          setIsSearchFocused(false);
          return;
      }

      const updatedProvider = {
          ...provider,
          models: [...provider.models, model]
      };
      // Pass false to suppress generic toast since we show a specific one here
      onUpdate(updatedProvider, false); 
      setSearchQuery("");
      setIsSearchFocused(false);
      toast({ title: "Success", description: `Added ${model.name || model.model_id}` });
  }

  const handleManualAdd = () => {
      if (!searchQuery.trim()) return;
      const newModel = {
          model_id: searchQuery,
          name: searchQuery,
          is_active: true
      };
      handleAddModel(newModel);
  }

  const handleRemoveModel = (modelId: string) => {
      const updatedProvider = {
          ...provider,
          models: provider.models.filter(m => m.model_id !== modelId)
      };
      onUpdate(updatedProvider);
  }

  const handleClearModels = () => {
      if (provider.models.length === 0) return;
      if (confirm("确定要清空所有已添加的模型吗？")) {
          const updatedProvider = {
              ...provider,
              models: []
          };
          onUpdate(updatedProvider, false);
          toast({ title: "Success", description: "已清空所有模型" });
      }
  }

  const filteredModels = searchQuery 
    ? discoveredModels.filter(m => 
        (m.name?.toLowerCase().includes(searchQuery.toLowerCase()) || m.model_id.toLowerCase().includes(searchQuery.toLowerCase()))
      )
    : [];

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <div className="space-y-1">
          <CardTitle className="text-xl">{provider.name}</CardTitle>
          <CardDescription className="font-mono text-xs truncate max-w-[250px]">
            {provider.api_base_url}
          </CardDescription>
        </div>
        <Badge variant="outline">{provider.models.length} Models</Badge>
      </CardHeader>
      <CardContent className="space-y-4 mt-4">
        <div className="space-y-2">
          <Label className="text-xs text-muted-foreground">API KEY</Label>
          <div className="flex items-center space-x-2">
            <Input 
              type={showKey ? "text" : "password"} 
              value={provider.api_key} 
              readOnly 
              className="h-8 font-mono text-xs bg-muted/50" 
            />
            <Button 
              variant="ghost" 
              size="icon" 
              className="h-8 w-8"
              onClick={() => setShowKey(!showKey)}
            >
              {showKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
            </Button>
          </div>
        </div>

        <div className="space-y-2">
            <div className="flex items-center justify-between">
                <Label className="text-xs text-muted-foreground">ACTIVE MODELS</Label>
                <div className="flex gap-1">
                    {provider.models.length > 0 && (
                        <Button 
                            variant="ghost" 
                            size="sm" 
                            className="h-6 text-xs px-2 text-destructive hover:text-destructive hover:bg-destructive/10"
                            onClick={handleClearModels}
                        >
                            <Trash2 className="mr-1 h-3 w-3" /> 清空配置
                        </Button>
                    )}
                </div>
            </div>

            {/* Search / Add Input */}
            <div className="relative" ref={searchRef}>
                <div className="relative">
                    <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                        placeholder="Search or enter model ID (auto-completes from provider)..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        onFocus={handleInputFocus}
                        className="pl-8 h-9 text-sm"
                    />
                    {isFetchingModels && (
                        <div className="absolute right-8 top-2.5">
                            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
                        </div>
                    )}
                    {searchQuery && !isFetchingModels && (
                        <Button 
                            size="sm" 
                            variant="ghost" 
                            className="absolute right-1 top-1 h-7 px-2 text-xs"
                            onClick={handleManualAdd}
                        >
                            <Plus className="h-3 w-3 mr-1" /> Add "{searchQuery}"
                </Button>
                    )}
                </div>

                {/* Autocomplete Dropdown */}
                {isSearchFocused && searchQuery && discoveredModels.length > 0 && (
                    <div className="absolute z-10 w-full mt-1 bg-popover border rounded-md shadow-md max-h-[200px] overflow-y-auto">
                        {filteredModels.length > 0 ? (
                            filteredModels.map((model) => (
                                <button
                                    key={model.model_id}
                                    className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground flex items-center justify-between"
                                    onClick={() => handleAddModel(model)}
                                >
                                    <span className="truncate">{model.name || model.model_id}</span>
                                    {provider.models.some(m => m.model_id === model.model_id) && (
                                        <Badge variant="outline" className="text-[10px]">Added</Badge>
                                    )}
                                </button>
                            ))
                        ) : (
                             <div className="px-3 py-2 text-xs text-muted-foreground">
                                No discovered models match "{searchQuery}". Click 'Add' to add manually.
                            </div>
                        )}
                    </div>
                )}
            </div>

            {/* Active Models List */}
            <div className="flex flex-wrap gap-2 max-h-[150px] overflow-y-auto p-1 border rounded-md bg-muted/10 mt-2">
                {provider.models.length === 0 && <span className="text-xs text-muted-foreground p-2">No active models.</span>}
                {provider.models.map(model => (
                    <Badge key={model.model_id} variant="secondary" className="text-xs font-normal flex items-center gap-1 pr-1">
                        {model.name || model.model_id}
                        <button 
                            onClick={() => handleRemoveModel(model.model_id)}
                            className="ml-1 hover:text-destructive focus:outline-none"
                        >
                            <X className="h-3 w-3" />
                        </button>
                    </Badge>
                ))}
            </div>
        </div>
      </CardContent>
      <CardFooter className="justify-end pt-2">
         <Button 
            variant="ghost" 
            size="sm" 
            className="text-destructive hover:text-destructive hover:bg-destructive/10"
            onClick={onDelete}
         >
            <Trash2 className="mr-2 h-4 w-4" /> 删除
         </Button>
      </CardFooter>
    </Card>
  )
}