import React, { useEffect, useState } from 'react';
import { Search, Filter, Plus, Wrench, Terminal, Globe, Camera, CameraOff, Image, Images, CloudSun, Calendar, TrendingUp, Coins, Trash2, Edit2, Box, Lock } from 'lucide-react';
import { Button, Input, Badge, Dialog } from '../components/UI';
import { Tool } from '../types';
import { createTool, deleteTool, fetchTools, updateTool } from '../services/backendApi';

const iconMap: Record<string, React.ReactNode> = {
  Camera: <Camera className="w-5 h-5" />,
  CameraOff: <CameraOff className="w-5 h-5" />,
  Image: <Image className="w-5 h-5" />,
  Images: <Images className="w-5 h-5" />,
  CloudSun: <CloudSun className="w-5 h-5" />,
  Calendar: <Calendar className="w-5 h-5" />,
  TrendingUp: <TrendingUp className="w-5 h-5" />,
  Coins: <Coins className="w-5 h-5" />,
  Terminal: <Terminal className="w-5 h-5" />,
  Globe: <Globe className="w-5 h-5" />,
  Wrench: <Wrench className="w-5 h-5" />,
  Box: <Box className="w-5 h-5" />,
};

export const ToolLibraryPage: React.FC = () => {
  const [tools, setTools] = useState<Tool[]>([]);
  const [searchTerm, setSearchTerm] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<'all' | 'system' | 'query'>('all');
  const [isLoading, setIsLoading] = useState(true);
  const [isToolModalOpen, setIsToolModalOpen] = useState(false);
  const [editingTool, setEditingTool] = useState<Tool | null>(null);

  const [toolName, setToolName] = useState('');
  const [toolDesc, setToolDesc] = useState('');
  const [toolCategory, setToolCategory] = useState<'system' | 'query'>('system');
  const [toolIcon, setToolIcon] = useState('Wrench');
  const [toolEnabled, setToolEnabled] = useState(true);
  const [saving, setSaving] = useState(false);

  const loadTools = async () => {
    setIsLoading(true);
    try {
      setTools(await fetchTools());
    } catch (error) {
      console.error(error);
      setTools([]);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    loadTools();
  }, []);

  const openAdd = () => {
    setEditingTool(null);
    setToolName('');
    setToolDesc('');
    setToolCategory('system');
    setToolIcon('Wrench');
    setToolEnabled(true);
    setIsToolModalOpen(true);
  };

  const openEdit = (tool: Tool) => {
    setEditingTool(tool);
    setToolName(tool.name);
    setToolDesc(tool.description || '');
    setToolCategory(tool.category);
    setToolIcon(tool.icon || 'Wrench');
    setToolEnabled(tool.enabled ?? true);
    setIsToolModalOpen(true);
  };

  const filteredTools = tools.filter((tool) => {
    const q = searchTerm.toLowerCase();
    const matchesSearch =
      tool.name.toLowerCase().includes(q) ||
      (tool.description || '').toLowerCase().includes(q) ||
      tool.id.toLowerCase().includes(q);
    const matchesCategory = categoryFilter === 'all' || tool.category === categoryFilter;
    return matchesSearch && matchesCategory;
  });

  const handleSaveTool = async () => {
    if (!toolName.trim()) {
      alert('请填写工具名称');
      return;
    }

    try {
      setSaving(true);
      if (editingTool) {
        const updated = await updateTool(editingTool.id, {
          name: toolName.trim(),
          description: toolDesc,
          category: toolCategory,
          icon: toolIcon,
          enabled: toolEnabled,
        });
        setTools((prev) => prev.map((item) => (item.id === updated.id ? updated : item)));
      } else {
        const created = await createTool({
          name: toolName.trim(),
          description: toolDesc,
          category: toolCategory,
          icon: toolIcon,
          enabled: toolEnabled,
        });
        setTools((prev) => [created, ...prev]);
      }
      setIsToolModalOpen(false);
    } catch (error: any) {
      alert(error?.message || '保存工具失败');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteTool = async (e: React.MouseEvent, tool: Tool) => {
    e.stopPropagation();
    if (tool.isSystem) {
      alert('系统工具不可删除');
      return;
    }
    if (!confirm('确认删除该工具吗？')) return;

    try {
      await deleteTool(tool.id);
      setTools((prev) => prev.filter((item) => item.id !== tool.id));
    } catch (error: any) {
      alert(error?.message || '删除失败');
    }
  };

  return (
    <div className="space-y-6 animate-in fade-in py-4 pb-10">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold tracking-tight text-white">工具与插件</h1>
        <Button onClick={openAdd} className="shadow-[0_0_15px_rgba(6,182,212,0.4)]">
          <Plus className="mr-2 h-4 w-4" /> 添加工具
        </Button>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 bg-card/50 p-4 rounded-lg border border-white/5 shadow-sm">
        <div className="relative col-span-1 md:col-span-2">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="搜索工具名称..."
            className="pl-9 border-0 bg-white/5"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
        </div>
        <div className="flex items-center space-x-2">
          <Filter className="h-4 w-4 text-muted-foreground" />
          <select
            className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
            value={categoryFilter}
            onChange={(e) => setCategoryFilter(e.target.value as 'all' | 'system' | 'query')}
          >
            <option value="all">所有类型</option>
            <option value="system">系统指令 (System)</option>
            <option value="query">信息查询 (Query)</option>
          </select>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {!isLoading && filteredTools.map((tool) => (
          <div
            key={tool.id}
            className="p-5 rounded-xl border transition-all relative bg-card/30 border-white/5 hover:bg-white/5 hover:border-white/10 hover:shadow-lg"
          >
            <div className="flex items-start space-x-4">
            <div className={`p-3 rounded-lg shrink-0 transition-colors ${tool.category === 'system' ? 'bg-primary/10 text-primary' : 'bg-blue-500/10 text-blue-400'}`}>
              {iconMap[tool.icon] || <Box className="w-5 h-5" />}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center justify-between mb-1 gap-2">
                <span className="text-base font-bold text-white truncate">{tool.name}</span>
                {tool.isSystem ? (
                  <Badge variant="outline" className="text-[9px] h-4 px-1">SYSTEM</Badge>
                ) : (
                  <Badge variant="outline" className="text-[9px] h-4 px-1">CUSTOM</Badge>
                )}
              </div>
              <div className="flex items-center gap-2 mb-2">
                <Badge variant="outline" className={`text-[10px] border-0 px-0 ${tool.category === 'system' ? 'text-primary' : 'text-blue-400'}`}>
                  {tool.category === 'system' ? 'SYSTEM' : 'QUERY'}
                </Badge>
                <span className="text-[10px] text-muted-foreground font-mono opacity-50 truncate">ID: {tool.id}</span>
              </div>
              <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed opacity-80">{tool.description}</p>
            </div>
            </div>

            <div className="mt-4 pt-3 border-t border-white/10 flex items-center justify-between">
              {tool.isSystem ? (
                <span className="inline-flex items-center text-[11px] text-muted-foreground">
                  <Lock className="w-3 h-3 mr-1.5" /> 系统工具只读
                </span>
              ) : (
                <span className="text-[11px] text-muted-foreground">可编辑自定义工具</span>
              )}
              <div className="flex space-x-1">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    if (!tool.isSystem) openEdit(tool);
                  }}
                  disabled={tool.isSystem}
                  title={tool.isSystem ? '系统工具不可编辑' : '编辑工具'}
                  className={`p-1.5 rounded-md transition-colors ${
                    tool.isSystem
                      ? 'text-muted-foreground/40 cursor-not-allowed'
                      : 'hover:bg-primary/20 text-muted-foreground hover:text-primary'
                  }`}
                >
                  <Edit2 className="w-4 h-4" />
                </button>
                <button
                  onClick={(e) => handleDeleteTool(e, tool)}
                  disabled={tool.isSystem}
                  title={tool.isSystem ? '系统工具不可删除' : '删除工具'}
                  className={`p-1.5 rounded-md transition-colors ${
                    tool.isSystem
                      ? 'text-muted-foreground/40 cursor-not-allowed'
                      : 'hover:bg-destructive/20 text-muted-foreground hover:text-destructive'
                  }`}
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        ))}

        {!isLoading && filteredTools.length === 0 && (
          <div className="col-span-full py-12 flex flex-col items-center justify-center text-muted-foreground opacity-50">
            <Wrench className="w-12 h-12 mb-4 stroke-1" />
            <p>未找到相关工具</p>
          </div>
        )}

        {isLoading && (
          <div className="col-span-full py-12 flex flex-col items-center justify-center text-muted-foreground opacity-70">
            <Wrench className="w-12 h-12 mb-4 stroke-1 animate-pulse" />
            <p>加载中...</p>
          </div>
        )}
      </div>

      <Dialog
        isOpen={isToolModalOpen}
        onClose={() => setIsToolModalOpen(false)}
        title={editingTool ? '编辑自定义工具' : '添加自定义工具'}
        footer={
          <>
            <Button variant="ghost" onClick={() => setIsToolModalOpen(false)}>取消</Button>
            <Button onClick={handleSaveTool} disabled={saving}>{saving ? '保存中...' : (editingTool ? '保存修改' : '确认添加')}</Button>
          </>
        }
      >
        <div className="space-y-4">
          <div className="space-y-1.5">
            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">工具类型</label>
            <div className="flex bg-white/5 p-1 rounded-lg border border-white/10">
              <button
                onClick={() => {
                  setToolCategory('system');
                  if (!toolIcon) setToolIcon('Terminal');
                }}
                className={`flex-1 flex items-center justify-center py-2 text-xs font-bold rounded-md transition-all ${toolCategory === 'system' ? 'bg-primary text-primary-foreground shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}
              >
                <Terminal className="w-3.5 h-3.5 mr-2" /> 系统指令
              </button>
              <button
                onClick={() => {
                  setToolCategory('query');
                  if (!toolIcon) setToolIcon('Globe');
                }}
                className={`flex-1 flex items-center justify-center py-2 text-xs font-bold rounded-md transition-all ${toolCategory === 'query' ? 'bg-blue-500 text-white shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}
              >
                <Globe className="w-3.5 h-3.5 mr-2" /> 信息查询
              </button>
            </div>
          </div>

          <div className="space-y-1.5">
            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">图标 (Icon)</label>
            <select
              className="flex h-9 w-full rounded-md border-0 bg-white/5 px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 [&>option]:bg-card text-foreground"
              value={toolIcon}
              onChange={(e) => setToolIcon(e.target.value)}
            >
              {Object.keys(iconMap).map((icon) => (
                <option key={icon} value={icon}>{icon}</option>
              ))}
            </select>
          </div>

          <div className="space-y-1.5">
            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">工具名称</label>
            <Input
              value={toolName}
              onChange={(e) => setToolName(e.target.value)}
              placeholder="例如: 智能家居控制"
              autoFocus
            />
          </div>

          <div className="space-y-1.5">
            <label className="text-[10px] font-black text-muted-foreground uppercase tracking-widest block">工具描述 (给 AI 的说明)</label>
            <textarea
              className="flex min-h-[100px] w-full rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 text-white"
              value={toolDesc}
              onChange={(e) => setToolDesc(e.target.value)}
              placeholder="描述该工具的功能，以及 AI 应该在什么情况下调用它..."
            />
          </div>

          <label className="flex items-center space-x-2 text-xs text-muted-foreground">
            <input type="checkbox" checked={toolEnabled} onChange={(e) => setToolEnabled(e.target.checked)} />
            <span>启用该工具</span>
          </label>
        </div>
      </Dialog>
    </div>
  );
};