import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import { Skill } from '../types/skill';

export type { Skill } from '../types/skill';

interface UseSkillsReturn {
  skills: Skill[];
  setSkills: React.Dispatch<React.SetStateAction<Skill[]>>;
  loading: boolean;
  error: string | null;
  refreshData: () => Promise<void>;
}

export const useSkills = (): UseSkillsReturn => {
  const [skills, setSkills] = useState<Skill[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);

      const response = await axios.get('/api/skills?include_disabled=true');

      // The API returns {"skills": [...]}
      const responseData = response.data || {};
      const skillsList = responseData.skills || [];

      console.log(`Skills returned from API: ${skillsList.length}`);

      // Transform skill data from backend format to frontend format
      const transformedSkills: Skill[] = skillsList.map((skillInfo: any) => ({
        name: skillInfo.name || 'Unknown Skill',
        path: skillInfo.path,
        description: skillInfo.description || '',
        skill_md_url: skillInfo.skill_md_url || '',
        skill_md_raw_url: skillInfo.skill_md_raw_url || '',
        repository_url: skillInfo.repository_url,
        version: skillInfo.version,
        author: skillInfo.author,
        visibility: skillInfo.visibility || 'public',
        is_enabled: skillInfo.is_enabled !== undefined ? skillInfo.is_enabled : true,
        tags: skillInfo.tags || [],
        owner: skillInfo.owner,
        registry_name: skillInfo.registry_name || 'local',
        target_agents: skillInfo.target_agents || [],
        allowed_tools: skillInfo.allowed_tools || [],
        requirements: skillInfo.requirements || [],
        metadata: skillInfo.metadata || null,
        auth_scheme: skillInfo.auth_scheme || 'none',
        auth_header_name: skillInfo.auth_header_name || undefined,
        num_stars: skillInfo.num_stars || 0,
        status: skillInfo.status || 'active',
        health_status: skillInfo.health_status || 'unknown',
        last_checked_time: skillInfo.last_checked_time,
        created_at: skillInfo.created_at,
        updated_at: skillInfo.updated_at,
      }));

      setSkills(transformedSkills);
    } catch (err: any) {
      console.error('Failed to fetch skills data:', err);
      setError(err.response?.data?.detail || 'Failed to fetch skills');
      setSkills([]);
    } finally {
      setLoading(false);
    }
  }, []);

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

  return {
    skills,
    setSkills,
    loading,
    error,
    refreshData: fetchData,
  };
};
