Pretor/frontend/src/components/Resource/SkillSettings.tsx

import { useState, useEffect } from 'react';
import apiClient from '../../api/client';
import { Download, Trash2, Plus, Box } from 'lucide-react';

export function SkillSettings() {
  const [skills, setSkills] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);
  const [repoUrl, setRepoUrl] = useState('');
  const [path, setPath] = useState('');
  const [installing, setInstalling] = useState(false);
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  const fetchSkills = async () => {
    setLoading(true);
    try {
      const response = await apiClient.get('/api/v1/resource/skill');
      setSkills(response.data.skills || []);
    } catch (err) {
      console.error('Failed to fetch skills:', err);
    } finally {
      setLoading(false);
    }
  };

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

  const handleInstall = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!repoUrl) return;

    setInstalling(true);
    setMessage('');
    setError('');

    try {
      await apiClient.post('/api/v1/resource/skill', {
        repo_url: repoUrl,
        path: path || null
      });
      setMessage('Skill installed successfully');
      setRepoUrl('');
      setPath('');
      fetchSkills();
    } catch (err: any) {
      console.error(err);
      setError(err.response?.data?.message || 'Failed to install skill');
    } finally {
      setInstalling(false);
    }
  };

  const handleDelete = async (skillName: string) => {
    if (!confirm(`Are you sure you want to delete ${skillName}?`)) return;
    try {
      await apiClient.delete(`/api/v1/resource/skill/${skillName}`);
      fetchSkills();
    } catch (err: any) {
      console.error('Failed to delete skill:', err);
      alert('Failed to delete skill');
    }
  };

  return (
    <div className="max-w-4xl space-y-6">
      <div className="mb-8">
        <h1 className="text-2xl font-bold text-slate-800">Skill Management</h1>
        <p className="text-slate-500 mt-1">Manage agent skills and functions.</p>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-6 border-b border-slate-100 flex items-center space-x-3">
           <div className="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-lg flex items-center justify-center">
             <Download size={20} />
           </div>
           <div>
             <h2 className="text-lg font-semibold text-slate-800">Install Skill</h2>
             <p className="text-sm text-slate-500">Install a new skill from a repository.</p>
           </div>
        </div>
        <div className="p-6">
          <form onSubmit={handleInstall} className="space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Repository URL</label>
                <input
                  type="text"
                  required
                  value={repoUrl}
                  onChange={(e) => setRepoUrl(e.target.value)}
                  placeholder="https://github.com/user/repo"
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-slate-700 mb-1">Path (Optional)</label>
                <input
                  type="text"
                  value={path}
                  onChange={(e) => setPath(e.target.value)}
                  placeholder="e.g. subfolder/path"
                  className="w-full px-4 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                />
              </div>
            </div>

            {message && <div className="text-green-600 text-sm">{message}</div>}
            {error && <div className="text-red-600 text-sm">{error}</div>}

            <div className="flex justify-end">
              <button
                type="submit"
                disabled={installing}
                className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
              >
                <Plus size={16} className="mr-2" />
                {installing ? 'Installing...' : 'Install'}
              </button>
            </div>
          </form>
        </div>
      </div>

      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
        <div className="p-6 border-b border-slate-100">
           <h2 className="text-lg font-semibold text-slate-800">Installed Skills</h2>
        </div>
        <div className="p-6">
          {loading ? (
            <div className="text-slate-500 text-sm">Loading skills...</div>
          ) : skills.length === 0 ? (
            <div className="text-slate-500 text-sm">No skills installed yet.</div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {skills.map((skill) => (
                <div key={skill} className="p-4 border border-slate-200 rounded-xl flex items-center justify-between hover:shadow-sm transition-shadow">
                  <div className="flex items-center space-x-3">
                    <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-slate-500">
                      <Box size={16} />
                    </div>
                    <span className="font-medium text-slate-800">{skill}</span>
                  </div>
                  <button
                    onClick={() => handleDelete(skill)}
                    className="p-2 text-slate-400 hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
                    title="Delete Skill"
                  >
                    <Trash2 size={16} />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}