import React, { useState } from 'react';
import { Plus, RefreshCw, Trash2, Edit2, Zap, X, Code } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { useTranslation } from 'react-i18next';
import { useAppContext } from '../context/AppContext';
import { Skill } from '../types';

const initialSkillForm: Omit<Skill, 'id'> = {
  name: '',
  description: '',
  tools: [],
  system_prompt: ''
};

const Skills: React.FC = () => {
  const { t } = useTranslation();
  const { skills, refreshSkills, q } = useAppContext();
  const [installName, setInstallName] = useState('');
  const qp = (k: string, v: string) => `${q}${q ? '&' : '?'}${k}=${encodeURIComponent(v)}`;
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingSkill, setEditingSkill] = useState<Skill | null>(null);
  const [form, setForm] = useState<Omit<Skill, 'id'>>(initialSkillForm);

  async function deleteSkill(id: string) {
    if (!confirm('Are you sure you want to delete this skill?')) return;
    try {
      await fetch(`/webui/api/skills${qp('id', id)}`, { method: 'DELETE' });
      await refreshSkills();
    } catch (e) {
      console.error(e);
    }
  }

  async function installSkill() {
    const name = installName.trim();
    if (!name) return;
    const r = await fetch(`/webui/api/skills${q}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'install', name }),
    });
    if (!r.ok) {
      alert(await r.text());
      return;
    }
    setInstallName('');
    await refreshSkills();
  }

  async function handleSubmit() {
    try {
      const action = editingSkill ? 'update' : 'create';
      const r = await fetch(`/webui/api/skills${q}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action, ...(editingSkill && { id: editingSkill.id }), ...form })
      });
      
      if (r.ok) {
        setIsModalOpen(false);
        await refreshSkills();
      } else {
        alert(await r.text());
      }
    } catch (e) {
      alert(e);
    }
  }

  return (
    <div className="p-8 max-w-7xl mx-auto space-y-8">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-semibold tracking-tight">{t('skills')}</h1>
        <div className="flex items-center gap-2">
          <input value={installName} onChange={(e) => setInstallName(e.target.value)} placeholder="skill name" className="px-3 py-2 bg-zinc-950 border border-zinc-800 rounded-lg text-sm" />
          <button onClick={installSkill} className="px-3 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg text-sm font-medium">Install</button>
        </div>
        <div className="flex items-center gap-3">
          <button onClick={() => refreshSkills()} className="flex items-center gap-2 px-4 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-sm font-medium transition-colors">
            <RefreshCw className="w-4 h-4" /> {t('refresh')}
          </button>
          <button onClick={() => { setEditingSkill(null); setForm(initialSkillForm); setIsModalOpen(true); }} className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg text-sm font-medium transition-colors shadow-sm">
            <Plus className="w-4 h-4" /> Add Skill
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {skills.map(s => (
          <div key={s.id} className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-6 flex flex-col shadow-sm group hover:border-zinc-700/50 transition-colors">
            <div className="flex items-start justify-between mb-4">
              <div className="flex items-center gap-4">
                <div className="w-12 h-12 rounded-xl bg-zinc-800/50 flex items-center justify-center border border-zinc-700/50">
                  <Zap className="w-6 h-6 text-amber-400" />
                </div>
                <div>
                  <h3 className="font-semibold text-zinc-100">{s.name}</h3>
                  <span className="text-[10px] font-mono text-zinc-500 uppercase tracking-widest">ID: {s.id.slice(-6)}</span>
                </div>
              </div>
            </div>
            
            <p className="text-sm text-zinc-400 mb-6 line-clamp-2">{s.description || 'No description provided.'}</p>

            <div className="space-y-4 mb-6">
              <div>
                <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-2">Tools</div>
                <div className="flex flex-wrap gap-2">
                  {(Array.isArray(s.tools) ? s.tools : []).map(tool => (
                    <span key={tool} className="px-2 py-1 bg-zinc-800/50 text-zinc-300 text-[10px] font-mono rounded border border-zinc-700/50">{tool}</span>
                  ))}
                  {(!Array.isArray(s.tools) || s.tools.length === 0) && <span className="text-xs text-zinc-600 italic">No tools defined</span>}
                </div>
              </div>
              {s.system_prompt && (
                <div>
                  <div className="text-[10px] text-zinc-500 uppercase tracking-widest mb-2">System Prompt</div>
                  <div className="p-3 bg-zinc-950/50 rounded-lg border border-zinc-800/50 text-xs text-zinc-400 line-clamp-3 italic">
                    {s.system_prompt}
                  </div>
                </div>
              )}
            </div>

            <div className="flex items-center gap-2 pt-4 border-t border-zinc-800/50 mt-auto">
              <button 
                onClick={() => { 
                  setEditingSkill(s); 
                  setForm({
                    name: s.name,
                    description: s.description,
                    tools: Array.isArray(s.tools) ? s.tools : [],
                    system_prompt: s.system_prompt || ''
                  }); 
                  setIsModalOpen(true); 
                }}
                className="flex-1 flex items-center justify-center gap-2 py-2 bg-zinc-800 hover:bg-zinc-700 rounded-lg text-xs font-medium transition-colors text-zinc-300"
              >
                <Edit2 className="w-3.5 h-3.5" /> Edit Skill
              </button>
              <button 
                onClick={() => deleteSkill(s.id)}
                className="p-2 bg-red-500/10 text-red-500 hover:bg-red-500/20 rounded-lg transition-colors"
              >
                <Trash2 className="w-4 h-4" />
              </button>
            </div>
          </div>
        ))}
        {skills.length === 0 && (
          <div className="col-span-full py-20 bg-zinc-900/20 border border-dashed border-zinc-800 rounded-3xl flex flex-col items-center justify-center text-zinc-500">
            <Zap className="w-12 h-12 mb-4 opacity-20" />
            <p className="text-lg font-medium">No skills defined</p>
          </div>
        )}
      </div>

      <AnimatePresence>
        {isModalOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setIsModalOpen(false)} className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
            <motion.div initial={{ opacity: 0, scale: 0.95 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="relative w-full max-w-2xl bg-zinc-900 border border-zinc-800 rounded-3xl shadow-2xl overflow-hidden">
              <div className="p-6 border-b border-zinc-800 flex items-center justify-between">
                <h2 className="text-xl font-semibold">{editingSkill ? 'Edit Skill' : 'Add Skill'}</h2>
                <button onClick={() => setIsModalOpen(false)} className="p-2 hover:bg-zinc-800 rounded-full transition-colors text-zinc-400"><X className="w-5 h-5" /></button>
              </div>
              <div className="p-6 space-y-4 max-h-[70vh] overflow-y-auto">
                <label className="block">
                  <span className="text-sm font-medium text-zinc-400 mb-1.5 block">Name</span>
                  <input type="text" value={form.name} onChange={e => setForm({...form, name: e.target.value})} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
                </label>
                <label className="block">
                  <span className="text-sm font-medium text-zinc-400 mb-1.5 block">Description</span>
                  <input type="text" value={form.description} onChange={e => setForm({...form, description: e.target.value})} className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none" />
                </label>
                <label className="block">
                  <span className="text-sm font-medium text-zinc-400 mb-1.5 block">Tools (Comma separated)</span>
                  <input 
                    type="text" 
                    value={form.tools.join(', ')} 
                    onChange={e => setForm({...form, tools: e.target.value.split(',').map(t => t.trim()).filter(t => t)})} 
                    placeholder="google_search, calculator, shell"
                    className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm font-mono focus:border-indigo-500 outline-none" 
                  />
                </label>
                <label className="block">
                  <span className="text-sm font-medium text-zinc-400 mb-1.5 block">System Prompt</span>
                  <textarea 
                    value={form.system_prompt} 
                    onChange={e => setForm({...form, system_prompt: e.target.value})}
                    rows={6}
                    className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-sm focus:border-indigo-500 outline-none resize-none"
                  />
                </label>
              </div>
              <div className="p-6 border-t border-zinc-800 bg-zinc-900/50 flex justify-end gap-3">
                <button onClick={() => setIsModalOpen(false)} className="px-4 py-2 text-sm text-zinc-400">Cancel</button>
                <button onClick={handleSubmit} className="px-6 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-xl text-sm font-medium shadow-lg shadow-indigo-600/20">
                  {editingSkill ? 'Update' : 'Create'}
                </button>
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
};

export default Skills;