import React, { useState, useEffect, useMemo } from 'react';
import ReactMarkdown from 'react-markdown';
import { getSkills, createSkill, updateSkill, deleteSkill } from '../services/apiService';
export default function SkillsPage({ user, Icon }) {
const [skills, setSkills] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [searchQuery, setSearchQuery] = useState('');
const [activeFilter, setActiveFilter] = useState('all'); // all, system, mine, group
const [viewingDoc, setViewingDoc] = useState(null);
const [showRawDoc, setShowRawDoc] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const [editingSkill, setEditingSkill] = useState(null);
const [formData, setFormData] = useState({
name: '',
description: '',
skill_type: 'local',
config: '{}',
is_system: false,
system_prompt: '',
is_enabled: true,
features: ['chat'],
extra_metadata: { emoji: '⚙️' },
preview_markdown: ''
});
const [showAdvanced, setShowAdvanced] = useState(false);
const fetchSkills = async () => {
try {
setLoading(true);
const data = await getSkills();
setSkills(data);
setError(null);
} catch (err) {
setError("Failed to load skills.");
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchSkills();
}, []);
const filteredSkills = useMemo(() => {
return skills.filter(skill => {
const matchesSearch = skill.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
(skill.description || '').toLowerCase().includes(searchQuery.toLowerCase());
if (!matchesSearch) return false;
if (activeFilter === 'all') return true;
if (activeFilter === 'system') return skill.is_system;
if (activeFilter === 'mine') return !skill.is_system && skill.owner_id === user?.id;
if (activeFilter === 'group') return skill.group_id && !skill.is_system;
return true;
});
}, [skills, searchQuery, activeFilter, user]);
const stats = useMemo(() => ({
total: skills.length,
system: skills.filter(s => s.is_system).length,
mine: skills.filter(s => !s.is_system && s.owner_id === user?.id).length,
enabled: skills.filter(s => s.is_enabled).length
}), [skills, user]);
const openModal = (skill = null) => {
if (skill) {
setEditingSkill(skill);
setFormData({
name: skill.name,
description: skill.description || '',
skill_type: skill.skill_type,
config: JSON.stringify(skill.config, null, 2),
is_system: skill.is_system,
system_prompt: skill.system_prompt || '',
is_enabled: skill.is_enabled ?? true,
features: skill.features || ['chat'],
extra_metadata: skill.extra_metadata || { emoji: '⚙️' },
preview_markdown: skill.preview_markdown || ''
});
} else {
setEditingSkill(null);
setFormData({
name: '',
description: '',
skill_type: 'local',
config: '{}',
is_system: false,
system_prompt: '',
is_enabled: true,
features: ['chat'],
extra_metadata: { emoji: '⚙️' },
preview_markdown: ''
});
}
setIsModalOpen(true);
};
const handleClone = (skill) => {
setEditingSkill(null);
setFormData({
name: `${skill.name}_clone`,
description: skill.description || '',
skill_type: skill.skill_type,
config: JSON.stringify(skill.config, null, 2),
is_system: false,
system_prompt: skill.system_prompt || '',
is_enabled: true,
features: skill.features || ['chat'],
extra_metadata: skill.extra_metadata || { emoji: '⚙️' },
preview_markdown: skill.preview_markdown || ''
});
setIsModalOpen(true);
};
const closeModal = () => {
setIsModalOpen(false);
setEditingSkill(null);
setViewingDoc(null);
setShowRawDoc(false);
};
const handleSave = async () => {
try {
let configObj = {};
try {
configObj = JSON.parse(formData.config);
} catch (e) {
alert("Invalid JSON in config");
return;
}
const payload = {
...formData,
config: configObj
};
if (editingSkill) {
await updateSkill(editingSkill.id, payload);
} else {
await createSkill(payload);
}
closeModal();
fetchSkills();
} catch (err) {
alert("Error saving skill");
}
};
const handleDelete = async (id) => {
if (!window.confirm("Are you sure you want to delete this skill?")) return;
try {
await deleteSkill(id);
fetchSkills();
} catch (err) {
alert("Error deleting skill");
}
};
const isAdmin = user?.role === 'admin';
// --- Components ---
const SidebarItem = ({ id, label, icon, count, active }) => (
<button
onClick={() => setActiveFilter(id)}
className={`w-full flex items-center px-4 py-3 rounded-xl transition-all duration-200 ${active
? 'bg-indigo-600 text-white shadow-lg shadow-indigo-200 dark:shadow-indigo-900/20'
: 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
}`}
>
<Icon path={icon} className="w-5 h-5 mr-3 flex-none" />
<span className="font-medium text-sm flex-grow text-left truncate">{label}</span>
<span className={`text-[10px] font-bold px-2 py-0.5 rounded-full flex-none ml-2 ${active ? 'bg-white/20 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-500'}`}>
{count}
</span>
</button>
);
return (
<div className="flex h-full bg-gray-50 dark:bg-gray-900 overflow-hidden">
{/* --- Sidebar --- */}
<div className="w-64 flex-none bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 flex flex-col z-20">
<div className="p-8 pb-4">
<h1 className="text-2xl font-black bg-clip-text text-transparent bg-gradient-to-br from-indigo-500 to-purple-600 leading-tight py-1">
Cortex Skills
</h1>
<p className="text-[10px] uppercase tracking-[0.2em] font-black text-gray-400 mt-1">Foundational Layer</p>
</div>
<div className="px-4 space-y-2 overflow-y-auto flex-grow">
<SidebarItem id="all" label="All Libraries" icon="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" count={stats.total} active={activeFilter === 'all'} />
<SidebarItem id="system" label="System Core" icon="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" count={stats.system} active={activeFilter === 'system'} />
<SidebarItem id="mine" label="My Creations" icon="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" count={stats.mine} active={activeFilter === 'mine'} />
<SidebarItem id="group" label="Shared Works" icon="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" count={skills.filter(s => s.group_id).length} active={activeFilter === 'group'} />
</div>
<div className="p-6">
<button
onClick={() => openModal()}
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white rounded-[20px] py-4 font-black uppercase text-xs tracking-widest shadow-xl shadow-indigo-600/20 active:scale-95 transition-all flex items-center justify-center gap-2"
>
<Icon path="M12 4v16m8-8H4" className="w-5 h-5" />
Create
</button>
</div>
</div>
{/* --- Main Content --- */}
<div className="flex-grow flex flex-col min-w-0">
{/* --- Top Navbar --- */}
<div className="h-20 bg-white/80 dark:bg-gray-800/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 flex items-center px-12 justify-between sticky top-0 z-10">
<div className="flex-grow max-w-xl relative group">
<Icon path="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" className="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 group-focus-within:text-indigo-500 transition-colors" />
<input
type="text"
placeholder="Universal search..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full bg-gray-100/50 dark:bg-gray-700/50 border-none rounded-2xl py-3 pl-12 pr-4 focus:ring-2 focus:ring-indigo-500 outline-none transition-all placeholder-gray-400 text-sm"
/>
</div>
</div>
{/* --- Skill Grid --- */}
<div className="flex-grow p-12 overflow-y-auto custom-scrollbar">
{loading ? (
<div className="flex flex-col items-center justify-center h-full">
<div className="w-12 h-12 border-4 border-indigo-100 dark:border-indigo-900/30 border-t-indigo-500 rounded-full animate-spin"></div>
<p className="mt-4 text-xs font-black uppercase tracking-[0.3em] text-gray-400">Syncing</p>
</div>
) : error ? (
<div className="max-w-md mx-auto mt-20 p-8 bg-white dark:bg-gray-800 rounded-[32px] border border-red-50 dark:border-red-900 shadow-xl text-center">
<div className="w-16 h-16 bg-red-50 dark:bg-red-900/20 rounded-full flex items-center justify-center mx-auto mb-6">
<Icon path="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" className="w-8 h-8 text-red-500" />
</div>
<p className="font-black uppercase tracking-tight text-gray-900 dark:text-white">Access Denied</p>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">{error}</p>
</div>
) : (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pb-20">
{filteredSkills.map((skill) => (
<div
key={skill.id}
className={`group relative bg-white dark:bg-gray-800 rounded-[32px] border border-gray-200 dark:border-gray-700 p-7 transition-all duration-500 hover:shadow-[0_20px_60px_-15px_rgba(0,0,0,0.1)] hover:-translate-y-2 flex flex-col h-[320px] ${!skill.is_enabled ? 'opacity-60 grayscale' : ''}`}
>
<div className="flex items-center gap-5 mb-6">
<div className="w-16 h-16 rounded-2xl bg-gray-50 dark:bg-gray-900/50 flex-none flex items-center justify-center text-3xl group-hover:scale-110 group-hover:bg-indigo-50 transition-all duration-500">
{skill.extra_metadata?.emoji || "⚙️"}
</div>
<div className="min-w-0 flex-grow py-1">
<h3 className="text-lg font-bold text-gray-900 dark:text-white truncate leading-relaxed py-0.5">
{skill.name}
</h3>
<div className="flex items-center gap-2">
{skill.is_system && (
<span className="bg-yellow-400/10 text-yellow-700 dark:text-yellow-400 text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-full border border-yellow-200/50">Core</span>
)}
<span className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.1em]">{skill.skill_type}</span>
</div>
</div>
</div>
<p className="text-gray-500 dark:text-gray-400 text-sm line-clamp-2 mb-4 flex-grow italic">
{skill.description || "No manifesto defined for this skill."}
</p>
<div className="flex flex-wrap gap-1.5 mb-6">
{(skill.features || []).map(f => (
<span key={f} className="bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 text-[9px] uppercase font-black tracking-widest px-1.5 py-0.5 rounded-md border border-gray-200/50 dark:border-gray-600">
{f}
</span>
))}
</div>
<div className="mt-auto flex items-center justify-between pt-4 border-t border-gray-50 dark:border-gray-700/50">
<div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
{(isAdmin || skill.owner_id === user?.id) && (
<button onClick={() => openModal(skill)} className="p-2 text-gray-400 hover:text-indigo-500 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 rounded-xl transition-all" title="Edit Logic">
<Icon path="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" className="w-4 h-4" />
</button>
)}
<button onClick={() => handleClone(skill)} className="p-2 text-gray-400 hover:text-green-500 hover:bg-green-50 dark:hover:bg-green-900/30 rounded-xl transition-all" title="Clone Pattern">
<Icon path="M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2" className="w-4 h-4" />
</button>
{(isAdmin || skill.owner_id === user?.id) && (
<button onClick={() => handleDelete(skill.id)} className="p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-xl transition-all" title="Burn (Delete)">
<Icon path="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" className="w-4 h-4" />
</button>
)}
</div>
<button
onClick={() => setViewingDoc(skill)}
className="px-4 py-1.5 bg-gray-900 dark:bg-white text-white dark:text-gray-900 text-[10px] font-black uppercase rounded-xl hover:scale-105 active:scale-95 transition-all flex items-center gap-2 shadow-sm"
>
Docs
<Icon path="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" className="w-3 h-3" />
</button>
</div>
</div>
))}
</div>
)}
</div>
</div>
{/* --- Modals (Logic Edit / Docs View) --- */}
{(isModalOpen || viewingDoc) && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
<div className="bg-white dark:bg-gray-800 rounded-[32px] w-full max-w-4xl max-h-[90vh] flex flex-col shadow-2xl overflow-hidden border border-gray-200/50 dark:border-gray-700/50">
{/* Modal Header */}
<div className="px-8 py-6 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center bg-gray-50/50 dark:bg-gray-800/50">
<div className="flex items-center gap-4">
<div className="text-4xl">
{isModalOpen ? (formData.extra_metadata?.emoji || "⚙️") : (viewingDoc?.extra_metadata?.emoji || "📚")}
</div>
<div>
<h2 className="text-xl font-black text-gray-900 dark:text-white uppercase tracking-tight">
{isModalOpen
? (editingSkill ? `Engineering: ${formData.name}` : "Create New Pattern")
: `Documentation: ${viewingDoc?.name}`
}
</h2>
<div className="flex items-center gap-3">
<p className="text-[10px] items-center flex gap-2 font-bold text-gray-400 uppercase tracking-widest">
Skill Library Protocol
<span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"></span>
</p>
{isModalOpen && (
<button
onClick={() => setShowAdvanced(!showAdvanced)}
className={`text-[9px] font-black uppercase px-2 py-0.5 rounded-md border transition-all ${showAdvanced ? 'bg-indigo-500 border-indigo-500 text-white' : 'text-gray-400 border-gray-200 dark:border-gray-700'}`}
>
{showAdvanced ? "Engineering Mode: ON" : "Engineering Mode: OFF"}
</button>
)}
</div>
</div>
</div>
<button onClick={closeModal} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full transition-colors text-gray-400">
<Icon path="M6 18L18 6M6 6l12 12" className="w-6 h-6" />
</button>
</div>
{/* Modal Body */}
<div className="flex-grow overflow-y-auto p-8 custom-scrollbar">
{isModalOpen ? (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
{/* Left Side: Metadata */}
<div className="space-y-6">
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">Identification</label>
<div className="grid grid-cols-4 gap-2">
<input
type="text"
value={formData.extra_metadata.emoji}
onChange={(e) => setFormData({ ...formData, extra_metadata: { ...formData.extra_metadata, emoji: e.target.value } })}
className="col-span-1 bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-2xl p-3 text-center text-2xl focus:ring-2 focus:ring-indigo-500 outline-none"
placeholder="🛠️"
/>
<input
type="text"
value={formData.name}
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
className="col-span-3 bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-2xl px-4 py-3 focus:ring-2 focus:ring-indigo-500 outline-none font-bold"
placeholder="skill_unique_id"
/>
</div>
</div>
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">The manifesto (Description)</label>
<textarea
value={formData.description}
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
className="w-full bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 min-h-[100px] text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition-all"
placeholder="Define the purpose of this capability..."
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">Protocol Type</label>
<select
value={formData.skill_type}
onChange={(e) => setFormData({ ...formData, skill_type: e.target.value })}
className="w-full bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-2xl px-4 py-3 text-sm font-bold focus:ring-2 focus:ring-indigo-500 outline-none appearance-none"
>
<option value="local">Native</option>
<option value="mcp">MCP</option>
<option value="remote_grpc">gRPC</option>
</select>
</div>
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">Capabilities</label>
<div className="flex flex-wrap gap-2">
{['chat', 'voice', 'workflow'].map(f => (
<button
key={f}
onClick={() => {
const newFeatures = formData.features.includes(f)
? formData.features.filter(x => x !== f)
: [...formData.features, f];
setFormData({ ...formData, features: newFeatures });
}}
className={`px-3 py-2 rounded-xl text-[10px] font-black uppercase border transition-all ${formData.features.includes(f)
? 'bg-indigo-600 border-indigo-600 text-white shadow-md'
: 'bg-white dark:bg-transparent border-gray-200 dark:border-gray-700 text-gray-400'
}`}
>
{f}
</button>
))}
</div>
</div>
</div>
<div className="flex items-center gap-6 pt-4 border-t border-gray-50 dark:border-gray-700/50">
<label className="flex items-center gap-3 cursor-pointer group">
<div className={`w-10 h-6 rounded-full p-1 transition-all duration-300 ${formData.is_enabled ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-700'}`}>
<div className={`w-4 h-4 bg-white rounded-full transition-transform duration-300 ${formData.is_enabled ? 'translate-x-4' : ''}`}></div>
</div>
<input type="checkbox" className="hidden" checked={formData.is_enabled} onChange={(e) => setFormData({ ...formData, is_enabled: e.target.checked })} />
<span className="text-xs font-bold uppercase text-gray-500 dark:text-gray-400 group-hover:text-indigo-500 transition-colors">Enabled</span>
</label>
{isAdmin && (
<label className="flex items-center gap-3 cursor-pointer group">
<div className={`w-10 h-6 rounded-full p-1 transition-all duration-300 ${formData.is_system ? 'bg-yellow-500' : 'bg-gray-300 dark:bg-gray-700'}`}>
<div className={`w-4 h-4 bg-white rounded-full transition-transform duration-300 ${formData.is_system ? 'translate-x-4' : ''}`}></div>
</div>
<input type="checkbox" className="hidden" checked={formData.is_system} onChange={(e) => setFormData({ ...formData, is_system: e.target.checked })} />
<span className="text-xs font-bold uppercase text-gray-500 dark:text-gray-400 group-hover:text-yellow-600 transition-colors">System Core</span>
</label>
)}
</div>
</div>
{/* Right Side: Logics */}
<div className="space-y-6">
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">Public Documentation (Markdown)</label>
<textarea
value={formData.preview_markdown}
onChange={(e) => setFormData({ ...formData, preview_markdown: e.target.value })}
className="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 text-xs font-sans min-h-[300px] focus:ring-2 focus:ring-indigo-500 outline-none"
placeholder="Enter documentation for this skill..."
/>
</div>
{showAdvanced && (
<div className="space-y-6 animate-in slide-in-from-right duration-300">
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">Intelligence Protocol (Prompt - Invisible to Users)</label>
<textarea
value={formData.system_prompt}
onChange={(e) => setFormData({ ...formData, system_prompt: e.target.value })}
className="w-full bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 text-xs font-mono min-h-[140px] focus:ring-2 focus:ring-indigo-500 outline-none"
placeholder="Enter system prompt for the model..."
/>
</div>
<div>
<label className="block text-[10px] font-black uppercase text-gray-400 mb-2 tracking-widest">Network Config (JSON)</label>
<textarea
value={formData.config}
onChange={(e) => setFormData({ ...formData, config: e.target.value })}
className="w-full bg-gray-950 text-indigo-400 font-mono text-[10px] p-4 rounded-2xl min-h-[140px] border border-gray-800 focus:ring-2 focus:ring-indigo-500 outline-none shadow-inner"
/>
</div>
</div>
)}
</div>
</div>
) : (
<div className="max-w-2xl mx-auto space-y-8">
<div className="p-8 bg-indigo-50/50 dark:bg-indigo-900/10 border border-indigo-100 dark:border-indigo-800 rounded-[32px] shadow-inner">
<h3 className="text-sm font-black uppercase text-indigo-600 dark:text-indigo-400 mb-4 tracking-tighter">Manifesto Overview</h3>
<p className="text-gray-700 dark:text-gray-300 leading-relaxed text-lg italic">
{viewingDoc.description}
</p>
</div>
{viewingDoc.preview_markdown && (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-xs font-black uppercase text-gray-400 tracking-[0.2em]">
{showRawDoc ? "Intelligence Blueprint (Raw)" : "Operational Documentation"}
</h3>
<button
onClick={() => setShowRawDoc(!showRawDoc)}
className="text-[10px] font-black uppercase text-indigo-500 hover:text-indigo-600 dark:text-indigo-400 hover:underline transition-all"
>
{showRawDoc ? "Show Preview" : "Raw Content"}
</button>
</div>
<div className="bg-white dark:bg-gray-900/50 border border-gray-100 dark:border-gray-700 rounded-[32px] p-8 prose dark:prose-invert max-w-none shadow-sm min-h-[400px]">
{showRawDoc ? (
<div className="whitespace-pre-wrap font-mono text-[11px] leading-relaxed text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-950/50 p-6 rounded-2xl border border-gray-100 dark:border-gray-800">
{viewingDoc.preview_markdown}
</div>
) : (
<div className="font-sans leading-7 text-gray-600 dark:text-gray-400 markdown-preview">
<ReactMarkdown>{viewingDoc.preview_markdown}</ReactMarkdown>
</div>
)}
</div>
</div>
)}
{!viewingDoc.preview_markdown && (
<div className="py-20 text-center">
<div className="w-20 h-20 bg-gray-50 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-6">
<Icon path="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" className="w-8 h-8 text-gray-300" />
</div>
<p className="text-gray-400 font-medium italic">This pattern does not include external documentation.</p>
</div>
)}
</div>
)}
</div>
{/* Modal Footer */}
<div className="px-8 py-6 bg-gray-50 dark:bg-gray-800/80 border-t border-gray-100 dark:border-gray-700 flex justify-end gap-3 items-center z-10">
<button
onClick={closeModal}
className="px-6 py-3 text-sm font-bold text-gray-500 hover:text-gray-900 dark:hover:text-white transition-colors"
>
{viewingDoc ? 'Dismiss' : 'Cancel'}
</button>
{isModalOpen && (
<button
onClick={handleSave}
className="px-10 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-black uppercase rounded-[20px] shadow-xl shadow-indigo-600/20 hover:scale-105 active:scale-95 transition-all flex items-center gap-2"
>
<Icon path="M5 13l4 4L19 7" className="w-4 h-4" />
{editingSkill ? 'Commit Changes' : 'Deploy Skill'}
</button>
)}
{viewingDoc && (isAdmin || viewingDoc.owner_id === user?.id) && (
<button
onClick={() => { closeModal(); openModal(viewingDoc); }}
className="px-10 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-black uppercase rounded-[20px] shadow-xl shadow-indigo-600/20 hover:scale-105 active:scale-95 transition-all flex items-center gap-2"
>
<Icon path="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" className="w-4 h-4" />
Edit Logic
</button>
)}
</div>
</div>
</div>
)}
</div>
);
}
