/** * AdminTutorialsManager — Super Admin page to attach video tutorials to * every RBS module. The Floating AI bubble then shows a "▶ Watch 2-min * tutorial" button for users who have `video_tutorials` enabled. * * Layout: * - Left: list of all 21 modules from `moduleGuide.js`. Each row shows * module title + a "saved/no video" badge + the current YouTube URL. * - Right: editor for the currently-selected module — paste video URL, * custom title, description, language, active toggle. Save / Delete. * * Per-user gate is configured in Admin → User Feature Controls (the existing * page) by toggling the new "Video Tutorials (AI Guide)" feature key. */ import React, { useEffect, useMemo, useState } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Textarea } from "@/components/ui/textarea"; import { Badge } from "@/components/ui/badge"; import { Switch } from "@/components/ui/switch"; import { Video, Youtube, Save, Trash2, CheckCircle2, AlertCircle, Search, ExternalLink, Play, BookOpen, Upload, Download, } from "lucide-react"; import { toast } from "sonner"; import { api } from "@/lib/api"; import { MODULE_GUIDES } from "@/lib/moduleGuide"; const BASE = process.env.REACT_APP_BACKEND_URL; export default function AdminTutorialsManager() { const [tutorials, setTutorials] = useState([]); const [selectedPath, setSelectedPath] = useState(MODULE_GUIDES[0]?.path || "/dashboard"); const [search, setSearch] = useState(""); const [form, setForm] = useState({ module_path: "", title: "", video_url: "", description: "", duration_seconds: 120, language: "hi", is_active: true, }); const load = async () => { try { const { data } = await api.get("/module-tutorials"); setTutorials(data || []); } catch (e) { toast.error("Load failed"); } }; useEffect(() => { load(); }, []); // Build a lookup of path → tutorial for the side panel const tutorialByPath = useMemo(() => { const m = {}; for (const t of tutorials) m[t.module_path] = t; return m; }, [tutorials]); // Selected module guide details const selectedModule = useMemo( () => MODULE_GUIDES.find((g) => g.path === selectedPath) || MODULE_GUIDES[0], [selectedPath] ); // When user picks a module, pre-fill form from existing tutorial (if any) useEffect(() => { const existing = tutorialByPath[selectedPath]; if (existing) { setForm({ module_path: existing.module_path, title: existing.title || "", video_url: existing.video_url || "", description: existing.description || "", duration_seconds: existing.duration_seconds || 120, language: existing.language || "hi", is_active: existing.is_active !== false, }); } else { setForm({ module_path: selectedPath, title: selectedModule?.title || "", video_url: "", description: selectedModule?.description || "", duration_seconds: 120, language: "hi", is_active: true, }); } }, [selectedPath, tutorialByPath, selectedModule]); const setField = (k, v) => setForm((f) => ({ ...f, [k]: v })); const save = async () => { if (!form.video_url.trim()) { toast.error("Video URL is required"); return; } try { // URL-encode the path segment so leading / passes through const encoded = encodeURIComponent(form.module_path).replace(/%2F/g, "/"); await api.put(`/module-tutorials${encoded}`, form); toast.success("Tutorial saved"); load(); } catch (e) { toast.error(e.response?.data?.detail || "Save failed"); } }; const remove = async () => { if (!tutorialByPath[selectedPath]) { toast.info("Nothing to delete"); return; } if (!window.confirm(`Delete tutorial for ${selectedPath}?`)) return; try { const encoded = encodeURIComponent(selectedPath).replace(/%2F/g, "/"); await api.delete(`/module-tutorials${encoded}`); toast.success("Deleted"); load(); } catch (e) { toast.error("Delete failed"); } }; const filteredModules = useMemo(() => { if (!search.trim()) return MODULE_GUIDES; const q = search.toLowerCase(); return MODULE_GUIDES.filter((g) => g.title.toLowerCase().includes(q) || g.path.includes(q)); }, [search]); // ----- Bulk CSV import / template --------------------------------------- const downloadTemplate = () => { // Build a CSV pre-filled with every known module path + the recommended columns const headers = "module_path,title,video_url,description,duration_seconds,language,is_active"; const rows = MODULE_GUIDES.map((g) => `${g.path},"${g.title.replace(/"/g, "''")}",https://youtu.be/REPLACE_ID,"${(g.description || "").replace(/"/g, "''")}",120,hi,true`); const blob = new Blob([headers + "\n" + rows.join("\n")], { type: "text/csv;charset=utf-8" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = "rbs-tutorials-template.csv"; a.click(); URL.revokeObjectURL(url); toast.success("Template downloaded — fill in YouTube URLs and upload"); }; const onBulkUpload = async (ev) => { const file = ev.target.files?.[0]; if (!file) return; ev.target.value = ""; // allow re-upload of same file const form = new FormData(); form.append("file", file); try { const resp = await fetch(`${BASE}/api/module-tutorials/bulk-import`, { method: "POST", body: form, credentials: "include" }); const data = await resp.json(); if (!resp.ok) throw new Error(data?.detail || resp.statusText); toast.success(`${data.inserted} inserted · ${data.updated} updated · ${data.skipped} skipped · ${data.errors?.length || 0} errors`); load(); } catch (e) { toast.error("Upload failed: " + (e.message?.slice(0, 100) || "")); } }; return (
AI Onboarding

Apne YouTube / Vimeo tutorials yahan paste karein. Floating AI bubble har screen par “▶ Watch 2-min tutorial” button dikhayega — per-user ON/OFF Admin → User Feature Controls se control hota hai.

Per-user ON/OFF →
{/* Bulk CSV row */}
Bulk Import from CSV

Saare 21 modules ek hi CSV se upload karein — har module ke liye click karne ki zarurat nahi
{/* Module list */} Modules ({MODULE_GUIDES.length})
setSearch(e.target.value)} className="h-8 pl-7 text-xs" data-testid="tutorials-search" />
    {filteredModules.map((g) => { const t = tutorialByPath[g.path]; const isActive = selectedPath === g.path; return (
    • ); })}
{/* Editor */} {selectedModule?.emoji} {selectedModule?.title} {selectedPath}

{selectedModule?.description}
setField("video_url", e.target.value)} placeholder="https://youtube.com/watch?v=… or https://youtu.be/…" className="mt-1 font-mono text-sm" data-testid="tut-video-url" />
setField("title", e.target.value)} placeholder={selectedModule?.title} className="mt-1" data-testid="tut-title" />
setField("duration_seconds", Number(e.target.value))} className="mt-1" data-testid="tut-duration" />