/**
 * SkillMarket - Skill browsing, search, and management UI
 *
 * Displays available skills (12 built-in + custom), allows users to:
 * - Browse skills by category
 * - Search skills by keyword/capability
 * - View skill details and capabilities
 * - Install/uninstall skills (with L4 autonomy integration)
 *
 * Part of ZCLAW L4 Self-Evolution capability.
 */

import { useState, useEffect, useMemo, useCallback } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import {
  Search,
  Package,
  Check,
  Plus,
  Minus,
  Tag,
  Layers,
  ChevronDown,
  ChevronRight,
  RefreshCw,
} from 'lucide-react';
import { useConfigStore } from '../store/configStore';
import { useConnectionStore } from '../store/connectionStore';
import {
  adaptSkillsCatalog,
  type SkillDisplay,
} from '../lib/skill-adapter';

// === Types ===

interface SkillMarketProps {
  className?: string;
  onSkillInstall?: (skill: SkillDisplay) => void;
  onSkillUninstall?: (skill: SkillDisplay) => void;
}

type CategoryFilter = 'all' | 'development' | 'security' | 'analytics' | 'content' | 'ops' | 'management' | 'testing' | 'business' | 'marketing';

// === Category Config ===

const CATEGORY_CONFIG: Record<string, { label: string; color: string; bgColor: string }> = {
  development: { label: '开发', color: 'text-blue-600 dark:text-blue-400', bgColor: 'bg-blue-100 dark:bg-blue-900/30' },
  security: { label: '安全', color: 'text-red-600 dark:text-red-400', bgColor: 'bg-red-100 dark:bg-red-900/30' },
  analytics: { label: '分析', color: 'text-purple-600 dark:text-purple-400', bgColor: 'bg-purple-100 dark:bg-purple-900/30' },
  content: { label: '内容', color: 'text-pink-600 dark:text-pink-400', bgColor: 'bg-pink-100 dark:bg-pink-900/30' },
  ops: { label: '运维', color: 'text-orange-600 dark:text-orange-400', bgColor: 'bg-orange-100 dark:bg-orange-900/30' },
  management: { label: '管理', color: 'text-cyan-600 dark:text-cyan-400', bgColor: 'bg-cyan-100 dark:bg-cyan-900/30' },
  testing: { label: '测试', color: 'text-green-600 dark:text-green-400', bgColor: 'bg-green-100 dark:bg-green-900/30' },
  business: { label: '商业', color: 'text-yellow-600 dark:text-yellow-400', bgColor: 'bg-yellow-100 dark:bg-yellow-900/30' },
  marketing: { label: '营销', color: 'text-indigo-600 dark:text-indigo-400', bgColor: 'bg-indigo-100 dark:bg-indigo-900/30' },
};

// === Components ===

function CategoryBadge({ category }: { category?: string }) {
  if (!category) return null;
  const config = CATEGORY_CONFIG[category] || {
    label: category,
    color: 'text-gray-600 dark:text-gray-400',
    bgColor: 'bg-gray-100 dark:bg-gray-800',
  };
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs ${config.bgColor} ${config.color}`}>
      <Tag className="w-3 h-3" />
      {config.label}
    </span>
  );
}

function SkillCard({
  skill,
  isExpanded,
  onToggle,
  onInstall,
  onUninstall,
}: {
  skill: SkillDisplay;
  isExpanded: boolean;
  onToggle: () => void;
  onInstall: () => void;
  onUninstall: () => void;
}) {
  const config = CATEGORY_CONFIG[skill.category || ''] || CATEGORY_CONFIG.development;

  return (
    <div
      className={`border rounded-lg overflow-hidden transition-all ${
        skill.installed
          ? 'border-green-200 dark:border-green-800 bg-green-50/50 dark:bg-green-900/10'
          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
      }`}
    >
      <button
        onClick={onToggle}
        className="w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors"
      >
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              <Package className={`w-4 h-4 ${config.color}`} />
              <h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
                {skill.name}
              </h3>
              {skill.installed && (
                <span className="flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
                  <Check className="w-3 h-3" />
                  已安装
                </span>
              )}
            </div>
            <p className="text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
              {skill.description}
            </p>
            <div className="flex flex-wrap gap-1 mt-2">
              <CategoryBadge category={skill.category} />
              {skill.capabilities.slice(0, 3).map((cap) => (
                <span
                  key={cap}
                  className="px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 rounded"
                >
                  {cap}
                </span>
              ))}
              {skill.capabilities.length > 3 && (
                <span className="text-xs text-gray-400 dark:text-gray-500">
                  +{skill.capabilities.length - 3}
                </span>
              )}
            </div>
          </div>
          <div className="flex items-center gap-2">
            {isExpanded ? (
              <ChevronDown className="w-4 h-4 text-gray-400" />
            ) : (
              <ChevronRight className="w-4 h-4 text-gray-400" />
            )}
          </div>
        </div>
      </button>

      <AnimatePresence>
        {isExpanded && (
          <motion.div
            initial={{ height: 0, opacity: 0 }}
            animate={{ height: 'auto', opacity: 1 }}
            exit={{ height: 0, opacity: 0 }}
            className="border-t border-gray-200 dark:border-gray-700"
          >
            <div className="p-4 space-y-4">
              {/* Triggers */}
              <div>
                <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                  触发词
                </h4>
                <div className="flex flex-wrap gap-1">
                  {skill.triggers.map((trigger) => (
                    <span
                      key={trigger}
                      className="px-2 py-0.5 text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 rounded"
                    >
                      {trigger}
                    </span>
                  ))}
                </div>
              </div>

              {/* Capabilities */}
              <div>
                <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                  能力
                </h4>
                <div className="flex flex-wrap gap-1">
                  {skill.capabilities.map((cap) => (
                    <span
                      key={cap}
                      className="px-2 py-0.5 text-xs bg-purple-50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 rounded"
                    >
                      {cap}
                    </span>
                  ))}
                </div>
              </div>

              {/* Tool Dependencies */}
              {skill.toolDeps.length > 0 && (
                <div>
                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
                    工具依赖
                  </h4>
                  <div className="flex flex-wrap gap-1">
                    {skill.toolDeps.map((dep) => (
                      <span
                        key={dep}
                        className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded font-mono"
                      >
                        {dep}
                      </span>
                    ))}
                  </div>
                </div>
              )}

              {/* Actions */}
              <div className="flex justify-end gap-2 pt-2 border-t border-gray-100 dark:border-gray-800">
                {skill.installed ? (
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      onUninstall();
                    }}
                    className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
                  >
                    <Minus className="w-4 h-4" />
                    卸载
                  </button>
                ) : (
                  <button
                    onClick={(e) => {
                      e.stopPropagation();
                      onInstall();
                    }}
                    className="flex items-center gap-1.5 px-3 py-1.5 text-sm bg-gray-700 dark:bg-gray-600 hover:bg-gray-800 dark:hover:bg-gray-500 text-white rounded-lg transition-colors"
                  >
                    <Plus className="w-4 h-4" />
                    安装
                  </button>
                )}
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

// === Main Component ===

export function SkillMarket({
  className = '',
  onSkillInstall,
  onSkillUninstall,
}: SkillMarketProps) {
  // Use configStore instead of SkillDiscoveryEngine
  const skillsCatalog = useConfigStore((s) => s.skillsCatalog);
  const loadSkillsCatalog = useConfigStore((s) => s.loadSkillsCatalog);
  const updateSkill = useConfigStore((s) => s.updateSkill);

  // Watch connection state to reload skills when connected
  const connectionState = useConnectionStore((s) => s.connectionState);

  const [searchQuery, setSearchQuery] = useState('');
  const [categoryFilter, setCategoryFilter] = useState<CategoryFilter>('all');
  const [expandedSkillId, setExpandedSkillId] = useState<string | null>(null);
  const [isRefreshing, setIsRefreshing] = useState(false);

  // Adapt skills to display format
  const skills = useMemo(() => adaptSkillsCatalog(skillsCatalog), [skillsCatalog]);

  // Load skills on mount and when connection state changes to 'connected'
  useEffect(() => {
    if (connectionState === 'connected') {
      loadSkillsCatalog();
    }
  }, [loadSkillsCatalog, connectionState]);

  // Filter skills
  const filteredSkills = useMemo(() => {
    let result = skills;

    // Category filter
    if (categoryFilter !== 'all') {
      result = result.filter((s) => s.category === categoryFilter);
    }

    // Search filter
    if (searchQuery.trim()) {
      const queryLower = searchQuery.toLowerCase();
      result = result.filter((s) =>
        s.name.toLowerCase().includes(queryLower) ||
        s.description.toLowerCase().includes(queryLower) ||
        s.triggers.some((t) => t.toLowerCase().includes(queryLower)) ||
        s.capabilities.some((c) => c.toLowerCase().includes(queryLower))
      );
    }

    return result;
  }, [skills, categoryFilter, searchQuery]);

  // Get categories from skills
  const categories = useMemo(() => {
    const cats = new Set(skills.map((s) => s.category).filter(Boolean));
    return ['all', ...Array.from(cats)] as CategoryFilter[];
  }, [skills]);

  // Stats
  const stats = useMemo(() => {
    const installed = skills.filter((s) => s.installed).length;
    return { total: skills.length, installed };
  }, [skills]);

  const handleRefresh = useCallback(async () => {
    setIsRefreshing(true);
    await loadSkillsCatalog();
    setIsRefreshing(false);
  }, [loadSkillsCatalog]);

  const handleInstall = useCallback(
    async (skill: SkillDisplay) => {
      // Update skill via configStore (persists to backend)
      await updateSkill(skill.id, { enabled: true });
      onSkillInstall?.(skill);
    },
    [updateSkill, onSkillInstall]
  );

  const handleUninstall = useCallback(
    async (skill: SkillDisplay) => {
      // Update skill via configStore (persists to backend)
      await updateSkill(skill.id, { enabled: false });
      onSkillUninstall?.(skill);
    },
    [updateSkill, onSkillUninstall]
  );

  const handleSearch = useCallback((query: string) => {
    setSearchQuery(query);
  }, []);

  return (
    <div className={`flex flex-col h-full ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center gap-2">
          <Package className="w-5 h-5 text-purple-500" />
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">技能市场</h2>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={handleRefresh}
            disabled={isRefreshing}
            className="p-1.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 disabled:opacity-50"
            title="刷新"
          >
            <RefreshCw className={`w-4 h-4 ${isRefreshing ? 'animate-spin' : ''}`} />
          </button>
        </div>
      </div>

      {/* Stats Bar */}
      <div className="flex items-center gap-4 px-4 py-2 bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-700 text-xs">
        <span className="text-gray-500 dark:text-gray-400">
          总计: <span className="font-medium text-gray-900 dark:text-gray-100">{stats.total}</span>
        </span>
        <span className="text-green-600 dark:text-green-400">
          已安装: <span className="font-medium">{stats.installed}</span>
        </span>
      </div>

      {/* Search */}
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="relative">
          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => handleSearch(e.target.value)}
            placeholder="搜索技能、能力、触发词..."
            className="w-full pl-9 pr-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-gray-400 focus:border-transparent text-sm"
          />
        </div>

        {/* AI 智能推荐功能开发中 */}
        <div className="text-xs text-gray-400 dark:text-gray-500 text-center py-1">
          AI 智能推荐即将推出
        </div>
      </div>

      {/* Category Filter */}
      <div className="flex gap-1 px-4 py-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto">
        {categories.map((cat) => (
          <button
            key={cat}
            onClick={() => setCategoryFilter(cat)}
            className={`px-3 py-1 text-xs rounded-full whitespace-nowrap transition-colors ${
              categoryFilter === cat
                ? 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-400'
                : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
            }`}
          >
            {cat === 'all' ? '全部' : CATEGORY_CONFIG[cat]?.label || cat}
          </button>
        ))}
      </div>

      {/* Skill List */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {filteredSkills.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-gray-500 dark:text-gray-400">
            <Layers className="w-8 h-8 mb-2 opacity-50" />
            <p className="text-sm">
              {searchQuery ? '未找到匹配的技能' : '暂无技能'}
            </p>
          </div>
        ) : (
          filteredSkills.map((skill) => (
            <SkillCard
              key={skill.id}
              skill={skill}
              isExpanded={expandedSkillId === skill.id}
              onToggle={() => setExpandedSkillId((prev) => (prev === skill.id ? null : skill.id))}
              onInstall={() => handleInstall(skill)}
              onUninstall={() => handleUninstall(skill)}
            />
          ))
        )}
      </div>
    </div>
  );
}

export default SkillMarket;