---
import Base from '../../layouts/Base.astro';
import SkillEditor from '../../components/SkillEditor.vue';
import { getSkill } from '../../lib/skills';
import { getAvailableTools } from '../../lib/tools';
import { getAvailableModels } from '../../lib/models';

const { slug } = Astro.params;
const skill = await getSkill(slug!);

if (!skill) {
  return Astro.redirect('/');
}

const availableTools = await getAvailableTools();
const availableModels = await getAvailableModels();
const allowedTools = skill['allowed-tools'].join(', ');
const hooksJson = skill.hooks ? JSON.stringify(skill.hooks, null, 2) : '';
---

<Base title={`Edit ${skill.name} — Skillit`}>
  <a href={`/${slug}`} class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-300 transition-colors mb-4">
    <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
    </svg>
    Back to {skill.name}
  </a>
  <h1 class="text-2xl font-bold tracking-tight text-white mb-2">Edit Skill</h1>
  <p class="text-sm text-gray-500 mb-8">Editing <strong class="text-gray-400">{skill.name}</strong>. Users who already installed this skill will get the updated version on their next sync.</p>
  <SkillEditor
    mode="edit"
    slug={slug}
    initialName={skill.name}
    initialDescription={skill.description}
    initialAllowedTools={allowedTools}
    initialArgumentHint={skill['argument-hint']}
    initialModel={skill.model}
    initialUserInvocable={skill['user-invocable']}
    initialDisableModelInvocation={skill['disable-model-invocation']}
    initialContext={skill.context}
    initialAgent={skill.agent}
    initialHooks={hooksJson}
    initialBody={skill.content}
    :availableTools={availableTools}
    :availableModels={availableModels}
    client:load
  />
</Base>