feat: add AI Prompts section, database model, public pages, and admin CRUD

app/[locale]/admin/page.tsx

@@ -24,6 +24,12 @@ import {
   updateCheatsheet,
   deleteCheatsheet
 } from '@/lib/actions/cheatsheetActions';
+import {
+  getPrompts,
+  createPrompt,
+  updatePrompt,
+  deletePrompt
+} from '@/lib/actions/promptActions';
 import {
   ShieldAlert,
   Plus,
@@ -48,7 +54,8 @@ import {
   Link as LinkIcon,
   FolderTree,
   Tag,
-  Terminal
+  Terminal,
+  Sparkles
 } from 'lucide-react';
 import { YoutubeIcon as Youtube } from '@/components/icons/YoutubeIcon';
 
@@ -89,7 +96,7 @@ function parseNotesText(text: string) {
 
 export default function AdminPage() {
   const t = useTranslations('admin');
-  const [activeTab, setActiveTab] = useState<'dashboard' | 'lessons' | 'cheatsheets' | 'categories' | 'users' | 'settings' | 'messages'>('dashboard');
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'lessons' | 'cheatsheets' | 'prompts' | 'categories' | 'users' | 'settings' | 'messages'>('dashboard');
 
   // Stats
   const [stats, setStats] = useState({ totalLessons: 0, totalViews: 0, totalDownloads: 0, totalMessages: 0 });
@@ -117,6 +124,17 @@ export default function AdminPage() {
   ]);
   const [savingCheat, setSavingCheat] = useState(false);
 
+  // Prompts State
+  const [promptsList, setPromptsList] = useState<any[]>([]);
+  const [isPromptFormOpen, setIsPromptFormOpen] = useState(false);
+  const [editingPromptId, setEditingPromptId] = useState<string | null>(null);
+  const [promptTitle, setPromptTitle] = useState('');
+  const [promptCategory, setPromptCategory] = useState('System Architecture');
+  const [promptDesc, setPromptDesc] = useState('');
+  const [promptContent, setPromptContent] = useState('');
+  const [promptTagsText, setPromptTagsText] = useState('Next.js, System Prompt');
+  const [savingPrompt, setSavingPrompt] = useState(false);
+
   // Lesson Form Modal State (Create or Edit)
   const [isFormOpen, setIsFormOpen] = useState(false);
   const [editingLessonId, setEditingLessonId] = useState<string | null>(null);
@@ -186,6 +204,9 @@ export default function AdminPage() {
     } else if (activeTab === 'cheatsheets') {
       const sheets = await getCheatsheets();
       setCheatsheetsList(sheets);
+    } else if (activeTab === 'prompts') {
+      const prs = await getPrompts();
+      setPromptsList(prs);
     } else if (activeTab === 'categories') {
       const cats = await getCategories();
       setCategoriesList(cats);
@@ -330,6 +351,74 @@ export default function AdminPage() {
     }
   };
 
+  // Prompt Handlers
+  const handleOpenPromptCreate = () => {
+    setEditingPromptId(null);
+    setPromptTitle('');
+    setPromptCategory('System Architecture');
+    setPromptDesc('');
+    setPromptContent('');
+    setPromptTagsText('Next.js, System Prompt');
+    setIsPromptFormOpen(true);
+  };
+
+  const handleOpenPromptEdit = (prompt: any) => {
+    setEditingPromptId(prompt.id);
+    setPromptTitle(prompt.title);
+    setPromptCategory(prompt.category);
+    setPromptDesc(prompt.description);
+    setPromptContent(prompt.content);
+    setPromptTagsText(prompt.tags ? prompt.tags.join(', ') : '');
+    setIsPromptFormOpen(true);
+  };
+
+  const handleSavePrompt = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSavingPrompt(true);
+
+    const tags = promptTagsText.split(',').map((t) => t.trim()).filter((t) => t.length > 0);
+
+    let res;
+    if (editingPromptId) {
+      res = await updatePrompt(editingPromptId, {
+        title: promptTitle,
+        category: promptCategory,
+        description: promptDesc,
+        content: promptContent,
+        tags,
+      });
+    } else {
+      res = await createPrompt({
+        title: promptTitle,
+        category: promptCategory,
+        description: promptDesc,
+        content: promptContent,
+        tags,
+      });
+    }
+
+    setSavingPrompt(false);
+
+    if (res.success) {
+      showAlert('success', editingPromptId ? 'Prompt updated successfully!' : 'New prompt created successfully!');
+      setIsPromptFormOpen(false);
+      getPrompts().then(setPromptsList);
+    } else {
+      showAlert('error', res.error || 'Failed to save prompt');
+    }
+  };
+
+  const handleDeletePrompt = async (id: string, title: string) => {
+    if (!confirm(`Are you sure you want to delete prompt "${title}"?`)) return;
+    const res = await deletePrompt(id);
+    if (res.success) {
+      showAlert('success', `Prompt "${title}" deleted`);
+      getPrompts().then(setPromptsList);
+    } else {
+      showAlert('error', res.error || 'Failed to delete prompt');
+    }
+  };
+
   // Cheatsheet Handlers
   const handleOpenCheatCreate = () => {
     setEditingCheatId(null);
@@ -526,6 +615,18 @@ export default function AdminPage() {
             <span>Cheatsheets</span>
           </button>
 
+          <button
+            onClick={() => setActiveTab('prompts')}
+            className={`flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold transition-all text-left ${
+              activeTab === 'prompts'
+                ? 'bg-red-600 text-white shadow-lg shadow-red-600/30'
+                : 'text-slate-400 hover:text-white hover:bg-slate-800/50'
+            }`}
+          >
+            <Sparkles className="w-4 h-4" />
+            <span>AI Prompts</span>
+          </button>
+
           <button
             onClick={() => setActiveTab('categories')}
             className={`flex items-center gap-3 px-4 py-3 rounded-xl text-xs font-bold transition-all text-left ${
@@ -806,7 +907,62 @@ export default function AdminPage() {
           </div>
         )}
 
-        {/* TAB 4: CATEGORIES CRUD */}
+        {/* TAB 4: PROMPTS CRUD */}
+        {activeTab === 'prompts' && (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-extrabold text-white">AI Prompts & Templates ({promptsList.length})</h2>
+
+              <button
+                onClick={handleOpenPromptCreate}
+                className="px-5 py-2.5 rounded-xl bg-red-600 hover:bg-red-500 text-white text-xs font-bold flex items-center gap-2 shadow-lg shadow-red-600/30 transition-all"
+              >
+                <Plus className="w-4 h-4" />
+                <span>Create New AI Prompt</span>
+              </button>
+            </div>
+
+            <div className="space-y-4">
+              {promptsList.map((prompt) => (
+                <div key={prompt.id} className="p-5 rounded-2xl bg-slate-900/60 border border-slate-800 space-y-3">
+                  <div className="flex items-center justify-between gap-4">
+                    <div>
+                      <span className="text-[10px] font-bold text-red-400 bg-red-500/10 px-2 py-0.5 rounded border border-red-500/20">
+                        {prompt.category}
+                      </span>
+                      <h3 className="font-bold text-white text-base mt-1">{prompt.title}</h3>
+                      <p className="text-xs text-slate-400">{prompt.description}</p>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                      <button
+                        onClick={() => handleOpenPromptEdit(prompt)}
+                        className="px-3 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs font-bold text-sky-400 flex items-center gap-1"
+                      >
+                        <Edit className="w-3.5 h-3.5" />
+                        <span>Edit</span>
+                      </button>
+
+                      <button
+                        onClick={() => handleDeletePrompt(prompt.id, prompt.title)}
+                        className="p-1.5 rounded-xl bg-slate-800 hover:bg-red-600 text-slate-400 hover:text-white transition-colors"
+                        title="Delete Prompt"
+                      >
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </div>
+
+                  <div className="p-3 rounded-xl bg-slate-950 border border-slate-800 text-xs font-mono text-slate-300 line-clamp-2">
+                    {prompt.content}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* TAB 5: CATEGORIES CRUD */}
         {activeTab === 'categories' && (
           <div className="space-y-6">
             
@@ -899,7 +1055,7 @@ export default function AdminPage() {
           </div>
         )}
 
-        {/* TAB 5: USERS / ADMINS */}
+        {/* TAB 6: USERS / ADMINS */}
         {activeTab === 'users' && (
           <div className="space-y-6">
             {/* Create User Form */}
@@ -971,7 +1127,7 @@ export default function AdminPage() {
           </div>
         )}
 
-        {/* TAB 6: SETTINGS */}
+        {/* TAB 7: SETTINGS */}
         {activeTab === 'settings' && (
           <form onSubmit={handleSaveSettings} className="p-6 sm:p-8 rounded-3xl bg-slate-900/60 border border-slate-800 space-y-6">
             <h2 className="text-lg font-extrabold text-white flex items-center gap-2 border-b border-slate-800 pb-4">
@@ -1033,7 +1189,7 @@ export default function AdminPage() {
           </form>
         )}
 
-        {/* TAB 7: MESSAGES */}
+        {/* TAB 8: MESSAGES */}
         {activeTab === 'messages' && (
           <div className="space-y-4">
             <h2 className="text-lg font-bold text-white">Viewer Contact Messages ({messages.length})</h2>
@@ -1063,6 +1219,103 @@ export default function AdminPage() {
 
       </main>
 
+      {/* CREATE / EDIT PROMPT FORM MODAL */}
+      {isPromptFormOpen && (
+        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4 overflow-y-auto">
+          <div className="w-full max-w-2xl bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-8 space-y-6 shadow-2xl my-8">
+            <div className="flex items-center justify-between border-b border-slate-800 pb-4">
+              <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                <Sparkles className="w-5 h-5 text-red-500" />
+                <span>{editingPromptId ? 'Edit AI Prompt' : 'Create New AI Prompt'}</span>
+              </h2>
+              <button onClick={() => setIsPromptFormOpen(false)} className="p-1.5 rounded-lg bg-slate-800 text-slate-400 hover:text-white">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <form onSubmit={handleSavePrompt} className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-bold text-slate-300 mb-1">Title</label>
+                  <input
+                    type="text"
+                    required
+                    value={promptTitle}
+                    onChange={(e) => setPromptTitle(e.target.value)}
+                    placeholder="Full-Stack Next.js Architect"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                  />
+                </div>
+
+                <div>
+                  <label className="block text-xs font-bold text-slate-300 mb-1">Category</label>
+                  <input
+                    type="text"
+                    required
+                    value={promptCategory}
+                    onChange={(e) => setPromptCategory(e.target.value)}
+                    placeholder="System Architecture / UI Design"
+                    className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-slate-300 mb-1">Short Description</label>
+                <textarea
+                  rows={2}
+                  required
+                  value={promptDesc}
+                  onChange={(e) => setPromptDesc(e.target.value)}
+                  placeholder="Overview of what this system prompt does..."
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-slate-300 mb-1">System Prompt Content</label>
+                <textarea
+                  rows={6}
+                  required
+                  value={promptContent}
+                  onChange={(e) => setPromptContent(e.target.value)}
+                  placeholder="You are a Senior Next.js 16 Architect..."
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl p-3 text-xs font-mono text-slate-200 focus:outline-none"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-bold text-slate-300 mb-1">Tags (Comma separated)</label>
+                <input
+                  type="text"
+                  value={promptTagsText}
+                  onChange={(e) => setPromptTagsText(e.target.value)}
+                  placeholder="Next.js, System Prompt, AI"
+                  className="w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-2 text-xs text-white focus:outline-none"
+                />
+              </div>
+
+              <div className="flex justify-end gap-3 pt-4 border-t border-slate-800">
+                <button
+                  type="button"
+                  onClick={() => setIsPromptFormOpen(false)}
+                  className="px-4 py-2 rounded-xl bg-slate-800 text-xs font-bold text-slate-300"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={savingPrompt}
+                  className="px-5 py-2 bg-red-600 hover:bg-red-500 text-white text-xs font-bold rounded-xl flex items-center gap-2"
+                >
+                  {savingPrompt ? 'Saving...' : 'Save Prompt'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
       {/* CREATE / EDIT CHEATSHEET FORM MODAL */}
       {isCheatFormOpen && (
         <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4 overflow-y-auto">