KiloStar/frontend/src/components/Plugin/SkillSettings.tsx

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

export function SkillSettings() {
  const { t } = useTranslation();
  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');
      const data = response.data.skills || {};
      setSkills(Array.isArray(data) ? data : Object.keys(data));
    } 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(t('plugin.skillInstallSuccess'));
      setRepoUrl('');
      setPath('');
      fetchSkills();
    } catch (err: any) {
      setError(err.response?.data?.message || t('plugin.skillInstallFailed'));
    } finally {
      setInstalling(false);
    }
  };

  const handleDelete = async (skillName: string) => {
    if (!confirm(t('plugin.deleteSkillConfirm', { name: skillName }))) return;
    try {
      await apiClient.delete(`/api/v1/resource/skill/${skillName}`);
      fetchSkills();
    } catch {
      alert(t('plugin.skillDeleteFailed'));
    }
  };

  return (
    <div className="max-w-4xl space-y-6">
      <div>
        <div className="flex items-center gap-2 mb-1">
          <Sparkles size={16} className="text-accent" />
          <h1 className="text-lg font-bold text-text-primary">{t('plugin.skillManagement')}</h1>
        </div>
        <p className="text-sm text-text-muted">{t('plugin.skillDesc')}</p>
      </div>

      <div className="bg-bg-card rounded-2xl border border-border-primary shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b border-border-primary flex items-center gap-3">
          <div className="w-9 h-9 rounded-xl bg-accent-light flex items-center justify-center">
            <Download size={16} className="text-accent" />
          </div>
          <div>
            <h2 className="text-sm font-bold text-text-primary">{t('plugin.installSkill')}</h2>
            <p className="text-[11px] text-text-muted">{t('plugin.installSkillDesc')}</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-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('plugin.repoUrl')}</label>
                <input type="text" required value={repoUrl} onChange={(e) => setRepoUrl(e.target.value)} placeholder={t('plugin.repoUrlPlaceholder')}
                  className="w-full px-3.5 py-2.5 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent placeholder:text-text-muted/50" />
              </div>
              <div>
                <label className="block text-xs font-semibold text-text-secondary mb-1.5 uppercase tracking-wider">{t('plugin.pathOptional')}</label>
                <input type="text" value={path} onChange={(e) => setPath(e.target.value)} placeholder={t('plugin.pathPlaceholder')}
                  className="w-full px-3.5 py-2.5 bg-bg-input border border-border-primary rounded-xl text-sm text-text-primary focus:outline-none focus:ring-2 focus:ring-accent/20 focus:border-accent placeholder:text-text-muted/50" />
              </div>
            </div>
            {message && <div className="text-xs text-success">{message}</div>}
            {error && <div className="text-xs text-danger">{error}</div>}
            <div className="flex justify-end">
              <button type="submit" disabled={installing}
                className="flex items-center gap-2 px-5 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all shadow-lg shadow-accent/15 text-sm font-medium disabled:opacity-50">
                <Plus size={14} />
                {installing ? t('common.installing') : t('plugin.install')}
              </button>
            </div>
          </form>
        </div>
      </div>

      <div className="bg-bg-card rounded-2xl border border-border-primary shadow-sm overflow-hidden">
        <div className="px-6 py-4 border-b border-border-primary">
          <h2 className="text-sm font-bold text-text-primary">{t('plugin.installedSkills', { count: skills.length })}</h2>
        </div>
        <div className="p-6">
          {loading ? (
            <div className="flex flex-col items-center justify-center py-12 text-text-muted">
              <Loader2 size={24} className="animate-spin mb-3" />
              <span className="text-sm">{t('common.loading')}</span>
            </div>
          ) : skills.length === 0 ? (
            <div className="flex flex-col items-center justify-center py-12 text-text-muted">
              <Wand2 size={32} className="mb-3 opacity-40" />
              <span className="text-sm">{t('plugin.noSkills')}</span>
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {skills.map((skill) => (
                <div key={skill} className="flex items-center justify-between p-3.5 bg-bg-secondary border border-border-secondary rounded-xl hover:border-accent/30 transition-all group">
                  <div className="flex items-center gap-3">
                    <div className="w-8 h-8 rounded-lg bg-bg-card border border-border-primary flex items-center justify-center">
                      <Box size={14} className="text-text-muted" />
                    </div>
                    <span className="text-sm font-medium text-text-primary">{skill}</span>
                  </div>
                  <button onClick={() => handleDelete(skill)} className="p-1.5 text-text-muted hover:text-danger hover:bg-danger-bg rounded-lg transition-all opacity-0 group-hover:opacity-100">
                    <Trash2 size={14} />
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}