From d76e7516751b83b69497d7075580316fb8abb06b Mon Sep 17 00:00:00 2001
From: JsCodeDevlopment <jonatasilva118@gmail.com>
Date: Tue, 12 May 2026 15:35:04 -0300
Subject: [PATCH 1/3] feat: define content schemas and add challenge view and
 results step components

---
 .../tests/_components/challenge-view.tsx      | 126 +++++++++++++-----
 components/tests/_components/results-step.tsx |  52 ++++++++
 lib/content/schemas.ts                        |   8 ++
 3 files changed, 155 insertions(+), 31 deletions(-)

diff --git a/components/tests/_components/challenge-view.tsx b/components/tests/_components/challenge-view.tsx
index 3b65c1d..f79afd4 100644
--- a/components/tests/_components/challenge-view.tsx
+++ b/components/tests/_components/challenge-view.tsx
@@ -1,8 +1,16 @@
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { TechnicalTest } from "@/lib/content/schemas";
 import { cn } from "@/lib/utils";
 import Editor from "@monaco-editor/react";
-import { CheckCircle2, Play, XCircle } from "lucide-react";
+import { BookOpen, CheckCircle2, Lightbulb, Play, XCircle } from "lucide-react";
 
 interface Props {
   test: TechnicalTest;
@@ -69,42 +77,98 @@ export function ChallengeView({
 
       <div className="flex flex-col border-4 border-border bg-[#1e1e1e] shadow-xl">
         <div className="flex items-center justify-between border-b-2 border-border/20 bg-[#2d2d2d] px-6 py-3">
-          <div className="flex items-center gap-4">
-            <div className="flex gap-1.5">
+          <div className="flex items-center gap-6">
+            <div className="hidden md:flex gap-1.5">
               <div className="h-3 w-3 rounded-full bg-red-500/20 border border-red-500/40" />
               <div className="h-3 w-3 rounded-full bg-amber-500/20 border border-amber-500/40" />
               <div className="h-3 w-3 rounded-full bg-emerald-500/20 border border-emerald-500/40" />
             </div>
-            <div className="flex items-center gap-2">
-              <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/60">
-                Linguagem:
-              </span>
-              <select
-                value={language}
-                onChange={(e) => {
-                  const lang = e.target.value;
-                  setLanguage(lang);
-                  if (!codes[lang]) {
-                    setCodes({
-                      ...codes,
-                      [lang]: test.challenge.templates[lang].initialCode,
-                    });
-                  }
-                }}
-                className="bg-transparent border-none text-[10px] font-mono font-bold text-muted-foreground uppercase tracking-widest outline-none transition-all cursor-pointer hover:text-foreground"
-              >
-                {Object.keys(test.challenge.templates).map((lang) => (
-                  <option
-                    key={lang}
-                    value={lang}
-                    className="bg-[#2d2d2d] text-white"
-                  >
-                    {lang.toUpperCase()}
-                  </option>
-                ))}
-              </select>
+            
+            <div className="flex items-center gap-6">
+              <div className="flex items-center gap-2">
+                <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/60">
+                  Linguagem:
+                </span>
+                <select
+                  value={language}
+                  onChange={(e) => {
+                    const lang = e.target.value;
+                    setLanguage(lang);
+                    if (!codes[lang]) {
+                      setCodes({
+                        ...codes,
+                        [lang]: test.challenge.templates[lang].initialCode,
+                      });
+                    }
+                  }}
+                  className="bg-transparent border-none text-[10px] font-mono font-bold text-muted-foreground uppercase tracking-widest outline-none transition-all cursor-pointer hover:text-foreground"
+                >
+                  {Object.keys(test.challenge.templates).map((lang) => (
+                    <option
+                      key={lang}
+                      value={lang}
+                      className="bg-[#2d2d2d] text-white"
+                    >
+                      {lang.toUpperCase()}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {test.solutions && test.solutions.length > 0 && (
+                <Dialog>
+                  <DialogTrigger asChild>
+                    <button className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-amber-400 hover:text-amber-300 transition-colors">
+                      <Lightbulb className="h-3.5 w-3.5" />
+                      Consultar Solução
+                    </button>
+                  </DialogTrigger>
+                  <DialogContent className="max-w-4xl max-h-[85vh] overflow-y-auto bg-background rounded-none border-4 border-primary p-0">
+                    <DialogHeader className="p-8 bg-primary/5 border-b-2 border-primary/10">
+                      <DialogTitle className="text-2xl font-black uppercase tracking-tighter">
+                        Resoluções Sugeridas
+                      </DialogTitle>
+                      <DialogDescription className="font-bold text-primary/70">
+                        Estuda a abordagem técnica recomendada para este desafio.
+                      </DialogDescription>
+                    </DialogHeader>
+                    
+                    <div className="p-8 space-y-10">
+                      {test.solutions.map((sol) => (
+                        <div key={sol.id} className="space-y-6">
+                          <div className="border-l-4 border-primary pl-6 py-1">
+                            <h4 className="text-lg font-black uppercase tracking-tight mb-3">
+                              {sol.title}
+                            </h4>
+                            <p className="text-sm leading-relaxed text-muted-foreground">
+                              {sol.explanation}
+                            </p>
+                          </div>
+
+                          <div className="space-y-6">
+                            {Object.entries(sol.code).map(([lang, code]) => (
+                              <div key={lang} className="space-y-3">
+                                <div className="flex items-center gap-2">
+                                  <div className="h-1.5 w-4 bg-primary" />
+                                  <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
+                                    {lang}
+                                  </span>
+                                </div>
+                                <pre className="p-5 bg-muted/30 border-2 border-border text-xs font-mono overflow-x-auto leading-relaxed shadow-inner">
+                                  <code>{code}</code>
+                                </pre>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </DialogContent>
+                </Dialog>
+              )}
             </div>
           </div>
+          
           <Button
             onClick={onRunTests}
             disabled={isEvaluating}
diff --git a/components/tests/_components/results-step.tsx b/components/tests/_components/results-step.tsx
index 660328c..4bce935 100644
--- a/components/tests/_components/results-step.tsx
+++ b/components/tests/_components/results-step.tsx
@@ -49,6 +49,19 @@ export function ResultsStep({
             </div>
           </div>
         </div>
+
+        {test.solutions && test.solutions.length > 0 && (
+          <div className="mt-10">
+            <Button 
+              variant="outline" 
+              onClick={() => document.getElementById('resolutions-section')?.scrollIntoView({ behavior: 'smooth' })}
+              className="rounded-none border-primary text-primary font-black uppercase tracking-widest hover:bg-primary hover:text-white transition-all"
+            >
+              Explorar Resoluções Oficiais
+            </Button>
+          </div>
+        )}
+
         {session?.user && (
           <p className="mt-6 text-[10px] font-black uppercase tracking-widest text-emerald-500/70">
             ✓ Resultados sincronizados com o teu perfil profissional
@@ -102,6 +115,45 @@ export function ResultsStep({
         })}
       </div>
 
+      {/* RESOLUTIONS SECTION */}
+      {test.solutions && test.solutions.length > 0 && (
+        <div id="resolutions-section" className="space-y-8 pt-10 border-t-2 border-border">
+          <h3 className="text-xl font-black uppercase tracking-widest text-primary">
+            Resoluções Sugeridas (Prática)
+          </h3>
+          <div className="grid gap-10">
+            {test.solutions.map((sol) => (
+              <div key={sol.id} className="border-2 border-primary/20 bg-background overflow-hidden">
+                <div className="bg-primary/5 p-6 border-b-2 border-primary/10">
+                  <h4 className="text-lg font-black uppercase tracking-tight mb-2">
+                    {sol.title}
+                  </h4>
+                  <p className="text-sm text-muted-foreground leading-relaxed">
+                    {sol.explanation}
+                  </p>
+                </div>
+                
+                <div className="p-6 space-y-4">
+                  {Object.entries(sol.code).map(([lang, code]) => (
+                    <div key={lang} className="space-y-2">
+                      <div className="flex items-center gap-2">
+                        <div className="h-2 w-2 rounded-full bg-primary" />
+                        <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
+                          {lang}
+                        </span>
+                      </div>
+                      <pre className="p-4 bg-muted/50 border border-border text-xs font-mono overflow-x-auto leading-relaxed">
+                        <code>{code}</code>
+                      </pre>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
       <div className="flex justify-center pt-8">
         <Button
           asChild
diff --git a/lib/content/schemas.ts b/lib/content/schemas.ts
index d0b8451..051d3ee 100644
--- a/lib/content/schemas.ts
+++ b/lib/content/schemas.ts
@@ -366,6 +366,13 @@ export interface CodeChallenge {
   testCases: TestCase[];
 }
 
+export interface TestSolution {
+  id: string;
+  title: string;
+  explanation: string;
+  code: Record<string, string>;
+}
+
 export interface TechnicalTest {
   id: string;
   slug: string;
@@ -378,4 +385,5 @@ export interface TechnicalTest {
   timeLimitMinutes: number;
   questions: QuizQuestion[];
   challenge: CodeChallenge;
+  solutions?: TestSolution[];
 }

From 6ab3ebd4f9021bd587fac606a6761103a9b127c3 Mon Sep 17 00:00:00 2001
From: JsCodeDevlopment <jonatasilva118@gmail.com>
Date: Tue, 12 May 2026 16:22:55 -0300
Subject: [PATCH 2/3] feat: implement Drizzle database schema and admin content
 editor with technical test form components

---
 .../categories/categories-admin-client.tsx    | 250 +++++++++++++++
 app/admin/categories/page.tsx                 |   7 +
 .../_components/forms/technical-test-form.tsx | 198 ++++++++++++
 .../technical-test/challenge-section.tsx      | 287 ++++++++++++++++++
 .../technical-test/general-info-section.tsx   | 125 ++++++++
 .../forms/technical-test/quiz-section.tsx     |  96 ++++++
 .../technical-test/solutions-section.tsx      | 145 +++++++++
 .../forms/technical-test/topic-selector.tsx   |  94 ++++++
 app/admin/content/content-editor.tsx          |  18 +-
 app/admin/layout.tsx                          |   1 +
 lib/actions/admin.ts                          |  92 ++++++
 lib/db/schema.ts                              |   9 +
 12 files changed, 1315 insertions(+), 7 deletions(-)
 create mode 100644 app/admin/categories/categories-admin-client.tsx
 create mode 100644 app/admin/categories/page.tsx
 create mode 100644 app/admin/content/_components/forms/technical-test-form.tsx
 create mode 100644 app/admin/content/_components/forms/technical-test/challenge-section.tsx
 create mode 100644 app/admin/content/_components/forms/technical-test/general-info-section.tsx
 create mode 100644 app/admin/content/_components/forms/technical-test/quiz-section.tsx
 create mode 100644 app/admin/content/_components/forms/technical-test/solutions-section.tsx
 create mode 100644 app/admin/content/_components/forms/technical-test/topic-selector.tsx

diff --git a/app/admin/categories/categories-admin-client.tsx b/app/admin/categories/categories-admin-client.tsx
new file mode 100644
index 0000000..79dca24
--- /dev/null
+++ b/app/admin/categories/categories-admin-client.tsx
@@ -0,0 +1,250 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+import { 
+  listCategories, 
+  createCategory, 
+  updateCategory, 
+  deleteCategory 
+} from '@/lib/actions/admin';
+import { Plus, Trash2, Edit2, X, Check } from 'lucide-react';
+
+interface Category {
+  id: string;
+  name: string;
+  slug: string;
+  description: string | null;
+  createdAt: Date;
+}
+
+export default function CategoriesAdminClient() {
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [isPending, startTransition] = useTransition();
+  const [feedback, setFeedback] = useState<{ type: 'success' | 'error'; msg: string } | null>(null);
+  
+  // State for Create/Edit
+  const [isEditing, setIsEditing] = useState<string | null>(null); // ID of category or 'new'
+  const [formData, setFormData] = useState({ name: '', slug: '', description: '' });
+
+  function loadCategories() {
+    startTransition(async () => {
+      const data = await listCategories();
+      setCategories(data as Category[]);
+    });
+  }
+
+  useEffect(() => {
+    loadCategories();
+  }, []);
+
+  const handleEdit = (cat: Category) => {
+    setIsEditing(cat.id);
+    setFormData({ 
+      name: cat.name, 
+      slug: cat.slug, 
+      description: cat.description || '' 
+    });
+  };
+
+  const handleCancel = () => {
+    setIsEditing(null);
+    setFormData({ name: '', slug: '', description: '' });
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    startTransition(async () => {
+      let result;
+      if (isEditing === 'new') {
+        result = await createCategory(formData);
+      } else if (isEditing) {
+        result = await updateCategory(isEditing, formData);
+      }
+
+      if (result?.error) {
+        setFeedback({ type: 'error', msg: result.error });
+      } else {
+        setFeedback({ type: 'success', msg: isEditing === 'new' ? 'Categoria criada!' : 'Categoria atualizada!' });
+        handleCancel();
+        loadCategories();
+      }
+      setTimeout(() => setFeedback(null), 3000);
+    });
+  };
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Tens a certeza que queres eliminar esta categoria?')) return;
+    
+    startTransition(async () => {
+      const result = await deleteCategory(id);
+      if (result.error) {
+        setFeedback({ type: 'error', msg: result.error });
+      } else {
+        setFeedback({ type: 'success', msg: 'Categoria eliminada.' });
+        loadCategories();
+      }
+      setTimeout(() => setFeedback(null), 3000);
+    });
+  };
+
+  const generateSlug = (name: string) => {
+    return name.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+  };
+
+  return (
+    <div className="space-y-6 animate-in fade-in duration-500">
+      {/* Header */}
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-2xl font-black tracking-tighter uppercase text-foreground">
+            Gestão de Categorias
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Define e organiza os tópicos oficiais da plataforma.
+          </p>
+        </div>
+
+        {!isEditing && (
+          <button
+            onClick={() => setIsEditing('new')}
+            className="flex items-center gap-2 h-9 rounded-lg bg-primary px-4 text-sm font-bold text-primary-foreground transition-all hover:bg-primary/90"
+          >
+            <Plus className="h-4 w-4" /> Nova Categoria
+          </button>
+        )}
+      </div>
+
+      {/* Feedback */}
+      {feedback && (
+        <div
+          className={`rounded-lg px-4 py-3 text-sm font-medium border ${
+            feedback.type === 'success'
+              ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-600 dark:text-emerald-400'
+              : 'bg-destructive/10 border-destructive/20 text-destructive'
+          }`}
+        >
+          {feedback.msg}
+        </div>
+      )}
+
+      {/* Form Editor (Inline) */}
+      {isEditing && (
+        <form onSubmit={handleSubmit} className="p-6 border border-primary/20 bg-primary/5 rounded-xl space-y-4 animate-in slide-in-from-top-4">
+          <h2 className="text-xs font-black uppercase tracking-widest text-primary">
+            {isEditing === 'new' ? 'Criar Nova Categoria' : 'Editar Categoria'}
+          </h2>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-1">
+              <label className="text-[10px] font-bold uppercase text-muted-foreground">Nome da Categoria</label>
+              <input
+                type="text"
+                required
+                value={formData.name}
+                onChange={(e) => {
+                  const val = e.target.value;
+                  setFormData({ ...formData, name: val, slug: generateSlug(val) });
+                }}
+                placeholder="Ex: Sistemas Distribuídos"
+                className="h-10 w-full rounded-lg border border-border bg-background px-3 text-sm focus:border-primary outline-none"
+              />
+            </div>
+            <div className="space-y-1">
+              <label className="text-[10px] font-bold uppercase text-muted-foreground">Slug (URL)</label>
+              <input
+                type="text"
+                required
+                value={formData.slug}
+                onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+                className="h-10 w-full rounded-lg border border-border bg-background px-3 text-sm font-mono focus:border-primary outline-none"
+              />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <label className="text-[10px] font-bold uppercase text-muted-foreground">Descrição (Opcional)</label>
+            <textarea
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={2}
+              className="w-full rounded-lg border border-border bg-background p-3 text-sm focus:border-primary outline-none"
+            />
+          </div>
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={handleCancel}
+              className="h-9 px-4 text-xs font-bold uppercase text-muted-foreground hover:text-foreground transition-colors"
+            >
+              Cancelar
+            </button>
+            <button
+              type="submit"
+              disabled={isPending}
+              className="flex items-center gap-2 h-9 bg-primary px-6 rounded-lg text-xs font-black uppercase text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            >
+              <Check className="h-4 w-4" /> {isEditing === 'new' ? 'Guardar Categoria' : 'Atualizar'}
+            </button>
+          </div>
+        </form>
+      )}
+
+      {/* Table */}
+      <div className="overflow-hidden rounded-xl border border-border bg-background/50 backdrop-blur-sm">
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border bg-secondary/50">
+                <th className="px-6 py-4 text-left font-black uppercase tracking-widest text-[10px] text-muted-foreground">Nome</th>
+                <th className="px-6 py-4 text-left font-black uppercase tracking-widest text-[10px] text-muted-foreground">Slug</th>
+                <th className="px-6 py-4 text-left font-black uppercase tracking-widest text-[10px] text-muted-foreground">Descrição</th>
+                <th className="px-6 py-4 text-right font-black uppercase tracking-widest text-[10px] text-muted-foreground">Ações</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {categories.length === 0 && !isPending ? (
+                <tr>
+                  <td colSpan={4} className="px-6 py-12 text-center text-muted-foreground text-xs uppercase font-bold tracking-widest">
+                    Nenhuma categoria encontrada.
+                  </td>
+                </tr>
+              ) : (
+                categories.map((cat) => (
+                  <tr key={cat.id} className="transition-colors hover:bg-accent/50 group">
+                    <td className="px-6 py-4">
+                      <span className="font-bold text-foreground">{cat.name}</span>
+                    </td>
+                    <td className="px-6 py-4">
+                      <code className="text-[11px] bg-secondary px-1.5 py-0.5 rounded border border-border text-muted-foreground">
+                        {cat.slug}
+                      </code>
+                    </td>
+                    <td className="px-6 py-4 text-muted-foreground text-xs max-w-xs truncate">
+                      {cat.description || '-'}
+                    </td>
+                    <td className="px-6 py-4 text-right">
+                      <div className="flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <button
+                          onClick={() => handleEdit(cat)}
+                          className="p-2 text-muted-foreground hover:text-primary transition-colors"
+                          title="Editar"
+                        >
+                          <Edit2 className="h-4 w-4" />
+                        </button>
+                        <button
+                          onClick={() => handleDelete(cat.id)}
+                          className="p-2 text-muted-foreground hover:text-destructive transition-colors"
+                          title="Eliminar"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/admin/categories/page.tsx b/app/admin/categories/page.tsx
new file mode 100644
index 0000000..3bf6172
--- /dev/null
+++ b/app/admin/categories/page.tsx
@@ -0,0 +1,7 @@
+import { requireAdmin } from '@/lib/admin/auth-guard';
+import CategoriesAdminClient from './categories-admin-client';
+
+export default async function AdminCategoriesPage() {
+  await requireAdmin();
+  return <CategoriesAdminClient />;
+}
diff --git a/app/admin/content/_components/forms/technical-test-form.tsx b/app/admin/content/_components/forms/technical-test-form.tsx
new file mode 100644
index 0000000..30d12cd
--- /dev/null
+++ b/app/admin/content/_components/forms/technical-test-form.tsx
@@ -0,0 +1,198 @@
+"use client";
+
+import { getTechnicalTestTopics } from "@/lib/actions/admin";
+import { TechnicalTest, QuizQuestion, TestSolution, CodeChallenge } from "@/lib/content/schemas";
+import { useEffect, useState } from "react";
+import { FormProps } from "../types";
+import { ChallengeSection } from "./technical-test/challenge-section";
+import { GeneralInfoSection } from "./technical-test/general-info-section";
+import { QuizSection } from "./technical-test/quiz-section";
+import { SolutionsSection } from "./technical-test/solutions-section";
+
+const DEFAULT_JS_RUNNER = `
+function runTests() {
+  const results = [];
+  try {
+    // Exemplo de teste:
+    // const out = suafuncao(input);
+    // results.push({ id: 'tc1', passed: out === expected });
+  } catch (e) { 
+    results.push({ id: 'tc1', passed: false, error: e.message }); 
+  }
+  console.log(JSON.stringify(results));
+}
+runTests();
+`;
+
+function getDefaultState(jsRunner: string) {
+  return {
+    questions: [],
+    challenge: {
+      title: "",
+      description: "",
+      functionName: "",
+      templates: {
+        javascript: {
+          initialCode: "// Escreve o teu código aqui",
+          testRunner: jsRunner,
+        },
+      },
+      testCases: [],
+    },
+    solutions: [],
+  };
+}
+
+export function TechnicalTestForm({
+  slug,
+  setSlug,
+  title,
+  setTitle,
+  body,
+  setBody,
+  meta,
+  setMeta,
+  mode,
+}: FormProps) {
+  // Estado local estruturado do simulado
+  const [testData, setTestData] = useState<Partial<TechnicalTest>>(() => {
+    try {
+      const parsed = JSON.parse(body);
+      return parsed && typeof parsed === "object"
+        ? parsed
+        : getDefaultState(DEFAULT_JS_RUNNER);
+    } catch {
+      return getDefaultState(DEFAULT_JS_RUNNER);
+    }
+  });
+
+  const [existingTopics, setExistingTopics] = useState<string[]>([]);
+
+  useEffect(() => {
+    async function loadTopics() {
+      const topics = await getTechnicalTestTopics();
+      setExistingTopics(topics);
+    }
+    loadTopics();
+  }, []);
+
+  // Sincronizar estado local com o estado global do editor
+  useEffect(() => {
+    const updatedBody = JSON.stringify({
+      ...testData,
+      title,
+      slug,
+      track: meta.track,
+      level: meta.level,
+      difficulty: meta.difficulty,
+      topic: meta.topic,
+    }, null, 2);
+    
+    if (updatedBody !== body) {
+      setBody(updatedBody);
+    }
+  }, [testData, title, slug, meta, setBody]);
+
+  // --- HANDLERS ---
+  
+  const handleAddQuestion = () => {
+    const newQuestion: QuizQuestion = {
+      id: `q${(testData.questions?.length || 0) + 1}`,
+      question: "",
+      options: [
+        { id: "a", text: "" },
+        { id: "b", text: "" },
+        { id: "c", text: "" },
+        { id: "d", text: "" },
+      ],
+      correctOptionId: "a",
+      explanation: "",
+    };
+    setTestData({ ...testData, questions: [...(testData.questions || []), newQuestion] });
+  };
+
+  const handleUpdateQuestion = (index: number, updates: Partial<QuizQuestion>) => {
+    const questions = [...(testData.questions || [])];
+    questions[index] = { ...questions[index], ...updates };
+    setTestData({ ...testData, questions });
+  };
+
+  const handleRemoveQuestion = (index: number) => {
+    const questions = [...(testData.questions || [])];
+    questions.splice(index, 1);
+    setTestData({ ...testData, questions });
+  };
+
+  const handleUpdateChallenge = (updates: Partial<CodeChallenge>) => {
+    setTestData({
+      ...testData,
+      challenge: { ...testData.challenge!, ...updates }
+    });
+  };
+
+  const handleAddSolution = () => {
+    const newSol: TestSolution = {
+      id: `sol${(testData.solutions?.length || 0) + 1}`,
+      title: "",
+      explanation: "",
+      code: { javascript: "" }
+    };
+    setTestData({ ...testData, solutions: [...(testData.solutions || []), newSol] });
+  };
+
+  const handleUpdateSolution = (index: number, updates: Partial<TestSolution>) => {
+    const sols = [...(testData.solutions || [])];
+    sols[index] = { ...sols[index], ...updates };
+    setTestData({ ...testData, solutions: sols });
+  };
+
+  const handleRemoveSolution = (index: number) => {
+    const sols = [...(testData.solutions || [])];
+    sols.splice(index, 1);
+    setTestData({ ...testData, solutions: sols });
+  };
+
+  return (
+    <div className="space-y-12 pb-24">
+      <div className="rounded-xl border border-primary/20 bg-primary/5 p-4 text-xs font-bold text-primary flex items-center gap-3">
+        <div className="h-2 w-2 rounded-full bg-primary animate-pulse" />
+        Modo de Edição Estruturada: Os campos abaixo são sincronizados automaticamente com o JSON do simulado.
+      </div>
+
+      <GeneralInfoSection
+        title={title}
+        setTitle={setTitle}
+        slug={slug}
+        setSlug={setSlug}
+        meta={meta}
+        setMeta={setMeta}
+        timeLimitMinutes={testData.timeLimitMinutes || 30}
+        setTimeLimitMinutes={(v) => setTestData({ ...testData, timeLimitMinutes: v })}
+        description={testData.description || ""}
+        setDescription={(v) => setTestData({ ...testData, description: v })}
+        mode={mode}
+        existingTopics={existingTopics}
+      />
+
+      <QuizSection
+        questions={testData.questions || []}
+        onAddQuestion={handleAddQuestion}
+        onRemoveQuestion={handleRemoveQuestion}
+        onUpdateQuestion={handleUpdateQuestion}
+      />
+
+      <ChallengeSection
+        challenge={testData.challenge as CodeChallenge}
+        onChange={handleUpdateChallenge}
+      />
+
+      <SolutionsSection
+        solutions={testData.solutions || []}
+        onAddSolution={handleAddSolution}
+        onRemoveSolution={handleRemoveSolution}
+        onUpdateSolution={handleUpdateSolution}
+        enabledLanguages={Object.keys(testData.challenge?.templates || {})}
+      />
+    </div>
+  );
+}
diff --git a/app/admin/content/_components/forms/technical-test/challenge-section.tsx b/app/admin/content/_components/forms/technical-test/challenge-section.tsx
new file mode 100644
index 0000000..a1c07a5
--- /dev/null
+++ b/app/admin/content/_components/forms/technical-test/challenge-section.tsx
@@ -0,0 +1,287 @@
+"use client";
+
+import { useState } from "react";
+import { CodeChallenge } from "@/lib/content/schemas";
+import { Code2, Trash2, ChevronDown, ChevronUp, X, Plus } from "lucide-react";
+import { FormField, TextInput } from "../../form-elements";
+
+interface ChallengeSectionProps {
+  challenge: CodeChallenge;
+  onChange: (updates: Partial<CodeChallenge>) => void;
+}
+
+const SUPPORTED_LANGUAGES = [
+  { id: "javascript", label: "JavaScript", color: "bg-yellow-500" },
+  { id: "python", label: "Python", color: "bg-blue-500" },
+  { id: "java", label: "Java", color: "bg-red-500" },
+  { id: "csharp", label: "C#", color: "bg-purple-500" },
+  { id: "rust", label: "Rust", color: "bg-orange-500" },
+  { id: "go", label: "Go", color: "bg-cyan-500" },
+];
+
+export function ChallengeSection({
+  challenge,
+  onChange,
+}: ChallengeSectionProps) {
+  const [activeTab, setActiveTab] = useState("javascript");
+
+  const enabledLanguages = Object.keys(challenge.templates || {});
+
+  const toggleLanguage = (langId: string) => {
+    const templates = { ...challenge.templates };
+    if (templates[langId]) {
+      // Garantir que resta sempre pelo menos uma linguagem
+      if (enabledLanguages.length > 1) {
+        delete templates[langId];
+        if (activeTab === langId) {
+          setActiveTab(Object.keys(templates)[0]);
+        }
+      }
+    } else {
+      templates[langId] = { 
+        initialCode: "// Escreve o teu código aqui", 
+        testRunner: "" 
+      };
+      setActiveTab(langId);
+    }
+    onChange({ templates });
+  };
+
+  const addTestCase = () => {
+    const newTC = {
+      id: `tc${(challenge.testCases?.length || 0) + 1}`,
+      description: "",
+      assertion: "",
+    };
+    onChange({ testCases: [...(challenge.testCases || []), newTC] });
+  };
+
+  const removeTestCase = (index: number) => {
+    const tcs = [...(challenge.testCases || [])];
+    tcs.splice(index, 1);
+    onChange({ testCases: tcs });
+  };
+
+  const updateTestCase = (
+    index: number,
+    v: string,
+    field: "description" | "assertion",
+  ) => {
+    const tcs = [...(challenge.testCases || [])];
+    tcs[index] = { ...tcs[index], [field]: v };
+    onChange({ testCases: tcs });
+  };
+
+  const updateTemplate = (
+    lang: string,
+    field: "initialCode" | "testRunner",
+    v: string,
+  ) => {
+    const templates = { ...challenge.templates };
+    if (!templates[lang]) {
+      templates[lang] = { initialCode: "", testRunner: "" };
+    }
+    templates[lang] = { ...templates[lang], [field]: v };
+    onChange({ templates });
+  };
+
+  return (
+    <section className="space-y-6 rounded-2xl border border-border bg-card/30 p-8">
+      <h3 className="text-lg font-black uppercase tracking-tighter flex items-center gap-2">
+        <Code2 className="h-5 w-5 text-primary" /> Desafio de Código
+      </h3>
+
+      <div className="grid gap-4">
+        <TextInput
+          value={challenge.title || ""}
+          onChange={(v) => onChange({ title: v })}
+          placeholder="Título do Desafio (ex: Implemente um LRU Cache)"
+        />
+        <textarea
+          value={challenge.description || ""}
+          onChange={(e) => onChange({ description: e.target.value })}
+          placeholder="Descrição técnica e instruções..."
+          rows={4}
+          className="w-full rounded-lg border border-border bg-background p-3 text-sm focus:border-primary outline-none"
+        />
+        <div className="grid lg:grid-cols-2 gap-4">
+          <FormField
+            label="Nome da Função Principal"
+            hint="A função que será chamada pelos testes"
+          >
+            <TextInput
+              value={challenge.functionName || ""}
+              onChange={(v) => onChange({ functionName: v })}
+              placeholder="ex: solve"
+              mono
+            />
+          </FormField>
+        </div>
+      </div>
+
+      {/* IDE-STYLE LANGUAGE BAR */}
+      <div className="space-y-4">
+        <div className="flex flex-col gap-3">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="h-1 w-4 rounded-full bg-primary" />
+              <h4 className="text-[10px] font-black uppercase tracking-widest text-foreground">
+                Configuração Poliglota
+              </h4>
+            </div>
+            <span className="text-[9px] font-bold text-muted-foreground uppercase">
+              {enabledLanguages.length} {enabledLanguages.length === 1 ? 'Linguagem Ativa' : 'Linguagens Ativas'}
+            </span>
+          </div>
+          
+          <div className="flex flex-wrap gap-1 bg-background/50 p-1 rounded-xl border border-border/50">
+            {SUPPORTED_LANGUAGES.map((lang) => {
+              const isEnabled = enabledLanguages.includes(lang.id);
+              const isActive = activeTab === lang.id;
+              
+              return (
+                <button
+                  key={lang.id}
+                  type="button"
+                  onClick={() => {
+                    if (!isEnabled) toggleLanguage(lang.id);
+                    setActiveTab(lang.id);
+                  }}
+                  className={`group relative flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 ${
+                    isActive 
+                      ? "bg-primary text-primary-foreground shadow-lg shadow-primary/20" 
+                      : isEnabled
+                        ? "bg-secondary/50 text-foreground hover:bg-secondary"
+                        : "text-muted-foreground hover:text-foreground hover:bg-secondary/30"
+                  }`}
+                >
+                  <div className={`h-1.5 w-1.5 rounded-full transition-transform group-hover:scale-125 ${
+                    isActive ? "bg-white" : lang.color
+                  } ${!isEnabled && "opacity-40 grayscale"}`} />
+                  
+                  <span className="text-[10px] font-black uppercase tracking-tight">{lang.label}</span>
+                  
+                  {isEnabled && !isActive && (
+                    <div 
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleLanguage(lang.id);
+                      }}
+                      className="ml-1 p-0.5 rounded-md hover:bg-destructive/20 hover:text-destructive transition-colors"
+                      title="Desativar"
+                    >
+                      <X className="h-3 w-3" />
+                    </div>
+                  )}
+                  
+                  {!isEnabled && (
+                    <Plus className="h-3 w-3 opacity-0 group-hover:opacity-100 transition-opacity ml-1" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* EDITOR AREA */}
+        <div className="relative overflow-hidden rounded-2xl border border-primary/20 bg-[#080808] shadow-2xl">
+          {/* Editor Header Decor */}
+          <div className="flex items-center justify-between border-b border-border/50 bg-secondary/20 px-4 py-2">
+            <div className="flex gap-1.5">
+              <div className="h-2 w-2 rounded-full bg-red-500/20" />
+              <div className="h-2 w-2 rounded-full bg-amber-500/20" />
+              <div className="h-2 w-2 rounded-full bg-emerald-500/20" />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-[9px] font-black uppercase tracking-widest text-primary/60">
+                Template Editor
+              </span>
+              <div className="h-1 w-1 rounded-full bg-primary animate-pulse" />
+            </div>
+          </div>
+
+          <div className="grid lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-border/50">
+            <div className="p-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <label className="text-[9px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                  <div className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
+                  Código Inicial
+                </label>
+              </div>
+              <textarea
+                value={challenge.templates?.[activeTab]?.initialCode || ""}
+                onChange={(e) => updateTemplate(activeTab, "initialCode", e.target.value)}
+                rows={10}
+                className="w-full bg-transparent text-emerald-400 p-2 font-mono text-xs outline-none resize-none custom-scrollbar"
+                placeholder={`// Escreve o código base para o candidato em ${activeTab}...`}
+              />
+            </div>
+            
+            <div className="p-4 space-y-3 bg-primary/5">
+              <div className="flex items-center justify-between">
+                <label className="text-[9px] font-black uppercase tracking-widest text-muted-foreground flex items-center gap-2">
+                  <div className="h-1.5 w-1.5 rounded-full bg-amber-500" />
+                  Test Runner
+                </label>
+              </div>
+              <textarea
+                value={challenge.templates?.[activeTab]?.testRunner || ""}
+                onChange={(e) => updateTemplate(activeTab, "testRunner", e.target.value)}
+                rows={10}
+                className="w-full bg-transparent text-amber-400 p-2 font-mono text-xs outline-none resize-none custom-scrollbar"
+                placeholder={`// Implementa o runner de testes para ${activeTab}...`}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4 pt-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <div className="h-3 w-3 rounded-full bg-emerald-500/20 border border-emerald-500/40" />
+            <label className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">
+              Casos de Teste
+            </label>
+          </div>
+          <button
+            type="button"
+            onClick={addTestCase}
+            className="text-[10px] font-black text-primary hover:underline"
+          >
+            + Adicionar Caso
+          </button>
+        </div>
+        <div className="grid gap-3">
+          {(challenge.testCases || []).map((tc, tcIndex) => (
+            <div
+              key={tc.id}
+              className="flex gap-3 items-center bg-background p-3 rounded-lg border border-border"
+            >
+              <div className="flex-1 grid grid-cols-2 gap-3">
+                <TextInput
+                  value={tc.description}
+                  onChange={(v) => updateTestCase(tcIndex, v, "description")}
+                  placeholder="O que este caso testa?"
+                />
+                <TextInput
+                  value={tc.assertion}
+                  onChange={(v) => updateTestCase(tcIndex, v, "assertion")}
+                  placeholder="Afirmação (ex: returns [1])"
+                  mono
+                />
+              </div>
+              <button
+                type="button"
+                onClick={() => removeTestCase(tcIndex)}
+                className="text-muted-foreground hover:text-destructive"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/admin/content/_components/forms/technical-test/general-info-section.tsx b/app/admin/content/_components/forms/technical-test/general-info-section.tsx
new file mode 100644
index 0000000..9e3c24a
--- /dev/null
+++ b/app/admin/content/_components/forms/technical-test/general-info-section.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { FormField, NumberInput, SelectInput, TextInput } from "../../form-elements";
+import { TopicSelector } from "./topic-selector";
+
+const TRACKS = [
+  { value: "frontend", label: "Frontend" },
+  { value: "backend", label: "Backend" },
+  { value: "devops", label: "DevOps" },
+];
+
+const LEVELS = [
+  { value: "junior", label: "Júnior" },
+  { value: "pleno", label: "Pleno" },
+  { value: "senior", label: "Sênior" },
+];
+
+const DIFFICULTIES = [
+  { value: "fácil", label: "Fácil" },
+  { value: "médio", label: "Médio" },
+  { value: "difícil", label: "Difícil" },
+];
+
+interface GeneralInfoSectionProps {
+  title: string;
+  setTitle: (v: string) => void;
+  slug: string;
+  setSlug: (v: string) => void;
+  meta: Record<string, unknown>;
+  setMeta: (v: Record<string, unknown>) => void;
+  timeLimitMinutes: number;
+  setTimeLimitMinutes: (v: number) => void;
+  description: string;
+  setDescription: (v: string) => void;
+  mode: "create" | "edit";
+  existingTopics: string[];
+}
+
+export function GeneralInfoSection({
+  title,
+  setTitle,
+  slug,
+  setSlug,
+  meta,
+  setMeta,
+  timeLimitMinutes,
+  setTimeLimitMinutes,
+  description,
+  setDescription,
+  mode,
+  existingTopics,
+}: GeneralInfoSectionProps) {
+  return (
+    <section className="space-y-6">
+      <div className="grid gap-4 lg:grid-cols-2">
+        <FormField label="Título do Simulado *">
+          <TextInput
+            value={title}
+            onChange={setTitle}
+            placeholder="Ex: Performance Crítica em React"
+          />
+        </FormField>
+        <FormField label="Slug *">
+          <TextInput
+            value={slug}
+            onChange={(v) =>
+              setSlug(v.toLowerCase().replace(/[^a-z0-9-]/g, "-"))
+            }
+            disabled={mode === "edit"}
+            mono
+          />
+        </FormField>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-4">
+        <FormField label="Trilha *">
+          <SelectInput
+            value={(meta.track as string) || "frontend"}
+            onChange={(v) => setMeta({ ...meta, track: v })}
+            options={TRACKS}
+          />
+        </FormField>
+        <FormField label="Nível *">
+          <SelectInput
+            value={(meta.level as string) || "junior"}
+            onChange={(v) => setMeta({ ...meta, level: v })}
+            options={LEVELS}
+          />
+        </FormField>
+        <FormField label="Dificuldade *">
+          <SelectInput
+            value={(meta.difficulty as string) || "médio"}
+            onChange={(v) => setMeta({ ...meta, difficulty: v })}
+            options={DIFFICULTIES}
+          />
+        </FormField>
+        <FormField label="Tempo (Min)">
+          <NumberInput
+            value={timeLimitMinutes || 30}
+            onChange={setTimeLimitMinutes}
+            min={1}
+          />
+        </FormField>
+      </div>
+
+      <FormField label="Categoria / Tópico *">
+        <TopicSelector
+          value={(meta.topic as string) || ""}
+          onChange={(v) => setMeta({ ...meta, topic: v })}
+          existingTopics={existingTopics}
+        />
+      </FormField>
+
+      <FormField label="Descrição do Simulado">
+        <textarea
+          value={description || ""}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Breve resumo sobre o que este teste aborda..."
+          rows={3}
+          className="w-full rounded-lg border border-border bg-background p-3 text-sm text-foreground placeholder:text-muted-foreground resize-y focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/30"
+        />
+      </FormField>
+    </section>
+  );
+}
diff --git a/app/admin/content/_components/forms/technical-test/quiz-section.tsx b/app/admin/content/_components/forms/technical-test/quiz-section.tsx
new file mode 100644
index 0000000..9e35e15
--- /dev/null
+++ b/app/admin/content/_components/forms/technical-test/quiz-section.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { QuizQuestion } from "@/lib/content/schemas";
+import { Beaker, Plus, Trash2 } from "lucide-react";
+import { TextInput } from "../../form-elements";
+
+interface QuizSectionProps {
+  questions: QuizQuestion[];
+  onAddQuestion: () => void;
+  onRemoveQuestion: (index: number) => void;
+  onUpdateQuestion: (index: number, updates: Partial<QuizQuestion>) => void;
+}
+
+export function QuizSection({
+  questions,
+  onAddQuestion,
+  onRemoveQuestion,
+  onUpdateQuestion,
+}: QuizSectionProps) {
+  return (
+    <section className="space-y-6 rounded-2xl border border-border bg-card/30 p-8">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-black uppercase tracking-tighter flex items-center gap-2">
+          <Beaker className="h-5 w-5 text-primary" /> Questões Teóricas
+        </h3>
+        <button
+          type="button"
+          onClick={onAddQuestion}
+          className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground text-xs font-bold rounded-lg hover:bg-primary/90 transition-all"
+        >
+          <Plus className="h-4 w-4" /> Adicionar Pergunta
+        </button>
+      </div>
+
+      <div className="space-y-6">
+        {questions.map((q, qIndex) => (
+          <div
+            key={q.id}
+            className="p-6 border border-border bg-background rounded-xl relative group"
+          >
+            <button
+              type="button"
+              onClick={() => onRemoveQuestion(qIndex)}
+              className="absolute right-4 top-4 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-all"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+
+            <div className="space-y-4">
+              <TextInput
+                value={q.question}
+                onChange={(v) => onUpdateQuestion(qIndex, { question: v })}
+                placeholder="Enunciado da questão..."
+              />
+              <div className="grid gap-3">
+                {q.options.map((opt) => (
+                  <div key={opt.id} className="flex items-center gap-3">
+                    <button
+                      type="button"
+                      onClick={() =>
+                        onUpdateQuestion(qIndex, { correctOptionId: opt.id })
+                      }
+                      className={`h-8 w-8 rounded-lg border-2 flex items-center justify-center text-xs font-black transition-all ${
+                        q.correctOptionId === opt.id
+                          ? "bg-emerald-500 border-emerald-500 text-white"
+                          : "border-border text-muted-foreground hover:border-primary/50"
+                      }`}
+                    >
+                      {opt.id.toUpperCase()}
+                    </button>
+                    <TextInput
+                      value={opt.text}
+                      onChange={(v) => {
+                        const options = [...q.options];
+                        const idx = options.findIndex((o) => o.id === opt.id);
+                        options[idx] = { ...options[idx], text: v };
+                        onUpdateQuestion(qIndex, { options });
+                      }}
+                      placeholder={`Alternativa ${opt.id.toUpperCase()}...`}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        ))}
+        
+        {questions.length === 0 && (
+          <div className="py-12 border-2 border-dashed border-border rounded-xl text-center text-sm text-muted-foreground">
+            Nenhuma questão teórica adicionada.
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/app/admin/content/_components/forms/technical-test/solutions-section.tsx b/app/admin/content/_components/forms/technical-test/solutions-section.tsx
new file mode 100644
index 0000000..12da548
--- /dev/null
+++ b/app/admin/content/_components/forms/technical-test/solutions-section.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { useState } from "react";
+import { TestSolution } from "@/lib/content/schemas";
+import { Lightbulb as LightbulbIcon, Plus, Trash2 } from "lucide-react";
+import { TextInput } from "../../form-elements";
+
+interface SolutionsSectionProps {
+  solutions: TestSolution[];
+  onAddSolution: () => void;
+  onRemoveSolution: (index: number) => void;
+  onUpdateSolution: (index: number, updates: Partial<TestSolution>) => void;
+  enabledLanguages: string[];
+}
+
+const LANGUAGE_LABELS: Record<string, { label: string; color: string }> = {
+  javascript: { label: "JS", color: "bg-yellow-500" },
+  python: { label: "PY", color: "bg-blue-500" },
+  java: { label: "JV", color: "bg-red-500" },
+  csharp: { label: "C#", color: "bg-purple-500" },
+  rust: { label: "RS", color: "bg-orange-500" },
+  go: { label: "GO", color: "bg-cyan-500" },
+};
+
+export function SolutionsSection({
+  solutions,
+  onAddSolution,
+  onRemoveSolution,
+  onUpdateSolution,
+  enabledLanguages,
+}: SolutionsSectionProps) {
+  const [activeLang, setActiveLang] = useState(enabledLanguages[0] || "javascript");
+
+  return (
+    <section className="space-y-6 rounded-2xl border border-border bg-card/30 p-8">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-lg font-black uppercase tracking-tighter flex items-center gap-2">
+            <LightbulbIcon className="h-5 w-5 text-amber-500" /> Resoluções Sugeridas
+          </h3>
+          <p className="text-[10px] text-muted-foreground uppercase font-bold tracking-widest mt-1">
+            Explicações pedagógicas e implementações de referência
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={onAddSolution}
+          className="flex items-center gap-2 px-4 py-2 bg-amber-500 text-white text-xs font-black uppercase rounded-lg hover:bg-amber-600 transition-all shadow-lg shadow-amber-500/20 active:scale-95"
+        >
+          <Plus className="h-4 w-4" /> Nova Resolução
+        </button>
+      </div>
+
+      <div className="space-y-8">
+        {solutions.map((sol, sIndex) => (
+          <div
+            key={sol.id}
+            className="p-6 border border-border bg-background/50 backdrop-blur-sm rounded-2xl space-y-6 relative group animate-in slide-in-from-bottom-4 duration-500"
+          >
+            <button
+              type="button"
+              onClick={() => onRemoveSolution(sIndex)}
+              className="absolute right-4 top-4 text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-all p-2 rounded-xl hover:bg-destructive/10"
+              title="Remover Resolução"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+
+            <div className="space-y-4 max-w-2xl">
+              <TextInput
+                value={sol.title}
+                onChange={(v) => onUpdateSolution(sIndex, { title: v })}
+                placeholder="Título da Solução (ex: Otimização com Two Pointers)"
+              />
+              <textarea
+                value={sol.explanation}
+                onChange={(e) =>
+                  onUpdateSolution(sIndex, { explanation: e.target.value })
+                }
+                placeholder="Explicação técnica detalhada..."
+                rows={3}
+                className="w-full rounded-xl border border-border bg-background p-4 text-sm focus:border-amber-500 outline-none transition-all placeholder:text-muted-foreground/50 shadow-inner"
+              />
+            </div>
+
+            <div className="space-y-3">
+              <div className="flex items-center justify-between px-1">
+                <div className="flex gap-1 bg-secondary/30 p-1 rounded-lg border border-border/50">
+                  {enabledLanguages.map((lang) => {
+                    const info = LANGUAGE_LABELS[lang] || { label: lang.toUpperCase(), color: "bg-primary" };
+                    const isActive = activeLang === lang;
+                    return (
+                      <button
+                        key={lang}
+                        type="button"
+                        onClick={() => setActiveLang(lang)}
+                        className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-[9px] font-black uppercase tracking-widest transition-all ${
+                          isActive 
+                            ? "bg-primary text-primary-foreground shadow-md" 
+                            : "text-muted-foreground hover:text-foreground hover:bg-secondary"
+                        }`}
+                      >
+                        <div className={`h-1.5 w-1.5 rounded-full ${isActive ? "bg-white" : info.color}`} />
+                        {info.label}
+                      </button>
+                    );
+                  })}
+                </div>
+                <span className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest">
+                  Referência de Implementação
+                </span>
+              </div>
+
+              <div className="relative overflow-hidden rounded-xl border border-primary/20 bg-[#080808] shadow-xl">
+                <div className="flex items-center gap-1 px-4 py-2 border-b border-border/30 bg-secondary/10">
+                  <div className="h-1.5 w-1.5 rounded-full bg-emerald-500/50" />
+                  <span className="text-[8px] font-black uppercase tracking-tighter text-muted-foreground">
+                    code_block_{activeLang}.src
+                  </span>
+                </div>
+                <textarea
+                  value={sol.code[activeLang] || ""}
+                  onChange={(e) =>
+                    onUpdateSolution(sIndex, {
+                      code: { ...sol.code, [activeLang]: e.target.value },
+                    })
+                  }
+                  placeholder={`Insere aqui o código completo da solução em ${activeLang}...`}
+                  rows={10}
+                  className="w-full bg-transparent text-emerald-400/90 p-4 font-mono text-xs outline-none shadow-inner resize-none custom-scrollbar"
+                />
+              </div>
+            </div>
+          </div>
+        ))}
+        
+        {solutions.length === 0 && (
+          <div className="py-12 border-2 border-dashed border-border rounded-xl text-center text-sm text-muted-foreground">
+            Nenhuma resolução sugerida adicionada.
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/app/admin/content/_components/forms/technical-test/topic-selector.tsx b/app/admin/content/_components/forms/technical-test/topic-selector.tsx
new file mode 100644
index 0000000..9885482
--- /dev/null
+++ b/app/admin/content/_components/forms/technical-test/topic-selector.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { ChevronDown, ChevronUp, PlusCircle } from "lucide-react";
+import { useState } from "react";
+import { TextInput } from "../../form-elements";
+
+interface TopicSelectorProps {
+  value: string;
+  onChange: (v: string) => void;
+  existingTopics: string[];
+}
+
+export function TopicSelector({
+  value,
+  onChange,
+  existingTopics,
+}: TopicSelectorProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [search, setSearch] = useState("");
+
+  const filteredTopics = existingTopics.filter((t) =>
+    t.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  const canCreate =
+    search &&
+    !existingTopics.some((t) => t.toLowerCase() === search.toLowerCase());
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <TextInput
+          value={isOpen ? search : value}
+          onChange={(v) => {
+            setSearch(v);
+            if (!isOpen) setIsOpen(true);
+          }}
+          placeholder="Buscar ou criar categoria/tópico..."
+        />
+        <div className="absolute right-3 top-2.5 flex items-center gap-2">
+          <button type="button" onClick={() => setIsOpen(!isOpen)}>
+            {isOpen ? (
+              <ChevronUp className="h-4 w-4 text-muted-foreground" />
+            ) : (
+              <ChevronDown className="h-4 w-4 text-muted-foreground" />
+            )}
+          </button>
+        </div>
+      </div>
+
+      {isOpen && (
+        <div className="absolute z-[100] mt-1 w-full rounded-lg border border-primary/30 bg-[#0a0a0a]/50 p-1 shadow-[0_20px_50px_rgba(0,0,0,1)] animate-in fade-in zoom-in-95 ring-1 ring-primary/20">
+          <div className="max-h-[200px] overflow-y-auto bg-[#0a0a0a]/50">
+            {filteredTopics.map((topic) => (
+              <button
+                key={topic}
+                type="button"
+                onClick={() => {
+                  onChange(topic);
+                  setSearch("");
+                  setIsOpen(false);
+                }}
+                className="flex w-full items-center px-3 py-2.5 text-sm font-bold text-white hover:bg-primary hover:text-primary-foreground rounded-md text-left transition-all"
+              >
+                {topic}
+              </button>
+            ))}
+
+            {canCreate && (
+              <button
+                type="button"
+                onClick={() => {
+                  onChange(search);
+                  setSearch("");
+                  setIsOpen(false);
+                }}
+                className="flex w-full items-center gap-2 px-3 py-2 text-sm font-bold text-primary hover:bg-primary/10 rounded-md text-left border-t border-border mt-1"
+              >
+                <PlusCircle className="h-4 w-4" />
+                Criar &quot;{search}&quot;
+              </button>
+            )}
+
+            {filteredTopics.length === 0 && !canCreate && (
+              <div className="p-3 text-xs text-muted-foreground text-center">
+                Digite para criar um novo tópico
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/admin/content/content-editor.tsx b/app/admin/content/content-editor.tsx
index 83bb17c..031e0a3 100644
--- a/app/admin/content/content-editor.tsx
+++ b/app/admin/content/content-editor.tsx
@@ -5,12 +5,17 @@ import { useState, useTransition } from "react";
 
 import { createContent, updateContent } from "@/lib/actions/admin";
 import { SaveActions } from "./_components/form-elements";
-import { InterviewEnForm } from "./_components/forms/interview-en-form";
-import { EngineeringWorkForm } from "./_components/forms/engineering-work-form";
-import { ProblemForm } from "./_components/forms/problem-form";
 import { ConceptForm } from "./_components/forms/concept-form";
+import { EngineeringWorkForm } from "./_components/forms/engineering-work-form";
 import { GenericForm } from "./_components/forms/generic-form";
-import { ContentEditorProps, FormProps, DEFAULT_META } from "./_components/types";
+import { InterviewEnForm } from "./_components/forms/interview-en-form";
+import { ProblemForm } from "./_components/forms/problem-form";
+import { TechnicalTestForm } from "./_components/forms/technical-test-form";
+import {
+  ContentEditorProps,
+  DEFAULT_META,
+  FormProps,
+} from "./_components/types";
 
 export function ContentEditor({ mode, initialData }: ContentEditorProps) {
   const router = useRouter();
@@ -99,6 +104,8 @@ export function ContentEditor({ mode, initialData }: ContentEditorProps) {
         return <ProblemForm {...formProps} />;
       case "concept":
         return <ConceptForm {...formProps} />;
+      case "technical-test":
+        return <TechnicalTestForm {...formProps} />;
       default:
         return <GenericForm {...formProps} contentType={contentType} />;
     }
@@ -106,7 +113,6 @@ export function ContentEditor({ mode, initialData }: ContentEditorProps) {
 
   return (
     <div className="space-y-6">
-      {/* Feedback */}
       {feedback && (
         <div
           className={`rounded-lg px-4 py-3 text-sm font-medium ${
@@ -119,10 +125,8 @@ export function ContentEditor({ mode, initialData }: ContentEditorProps) {
         </div>
       )}
 
-      {/* Type-specific form */}
       {renderForm()}
 
-      {/* Actions */}
       <SaveActions
         isPending={isPending}
         onSave={handleSave}
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index abff018..9a63b1b 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -12,6 +12,7 @@ export const metadata: Metadata = {
 const ALL_NAV_ITEMS = [
   { href: '/admin', label: 'Dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6', adminOnly: true },
   { href: '/admin/users', label: 'Utilizadores', icon: 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z', adminOnly: true },
+  { href: '/admin/categories', label: 'Categorias', icon: 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z', adminOnly: true },
   { href: '/admin/content', label: 'Conteúdos', icon: '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' },
 ];
 
diff --git a/lib/actions/admin.ts b/lib/actions/admin.ts
index 9445c9c..6d83680 100644
--- a/lib/actions/admin.ts
+++ b/lib/actions/admin.ts
@@ -8,6 +8,7 @@ import {
   contentReviewComments,
   contents,
   user,
+  contentCategories,
   type contentStatusEnum,
   type ContentType,
   type userRoleEnum
@@ -594,3 +595,94 @@ export async function getDashboardStats() {
     return null;
   }
 }
+
+/* ── Category Management ─────────────────────────────────────── */
+
+export async function listCategories() {
+  const staff = await getAuthenticatedStaff();
+  if (!staff) return [];
+
+  try {
+    const rows = await db
+      .select()
+      .from(contentCategories)
+      .orderBy(contentCategories.name);
+    return rows;
+  } catch (error) {
+    console.error('Erro ao listar categorias:', error);
+    return [];
+  }
+}
+
+export async function createCategory(params: { name: string; slug: string; description?: string }) {
+  const admin = await getAuthenticatedStaff();
+  if (!admin || admin.role !== 'ADMIN') return { error: 'Não autorizado' };
+
+  try {
+    await db.insert(contentCategories).values({
+      name: params.name,
+      slug: params.slug,
+      description: params.description,
+    });
+    revalidatePath('/admin/categories');
+    return { success: true };
+  } catch (error) {
+    console.error('Erro ao criar categoria:', error);
+    return { error: 'Erro ao criar categoria. Talvez o nome/slug já exista.' };
+  }
+}
+
+export async function updateCategory(id: string, params: { name: string; slug: string; description?: string }) {
+  const admin = await getAuthenticatedStaff();
+  if (!admin || admin.role !== 'ADMIN') return { error: 'Não autorizado' };
+
+  try {
+    await db
+      .update(contentCategories)
+      .set({
+        name: params.name,
+        slug: params.slug,
+        description: params.description,
+        updatedAt: new Date(),
+      })
+      .where(eq(contentCategories.id, id));
+    
+    revalidatePath('/admin/categories');
+    return { success: true };
+  } catch (error) {
+    console.error('Erro ao atualizar categoria:', error);
+    return { error: 'Erro ao atualizar categoria' };
+  }
+}
+
+export async function deleteCategory(id: string) {
+  const admin = await getAuthenticatedStaff();
+  if (!admin || admin.role !== 'ADMIN') return { error: 'Não autorizado' };
+
+  try {
+    await db.delete(contentCategories).where(eq(contentCategories.id, id));
+    revalidatePath('/admin/categories');
+    return { success: true };
+  } catch (error) {
+    console.error('Erro ao excluir categoria:', error);
+    return { error: 'Erro ao excluir categoria' };
+  }
+}
+
+// Atualizado para usar a nova tabela oficial
+export async function getTechnicalTestTopics() {
+  const staff = await getAuthenticatedStaff();
+  if (!staff) return [];
+
+  try {
+    const rows = await db
+      .select({ name: contentCategories.name })
+      .from(contentCategories)
+      .orderBy(contentCategories.name);
+    
+    return rows.map(r => r.name);
+  } catch (error) {
+    console.error('Erro ao buscar tópicos oficiais:', error);
+    return [];
+  }
+}
diff --git a/lib/db/schema.ts b/lib/db/schema.ts
index cf2a977..2a21e31 100644
--- a/lib/db/schema.ts
+++ b/lib/db/schema.ts
@@ -192,3 +192,12 @@ export const contentReviewComments = pgTable('content_review_comments', {
   resolved: boolean('resolved').notNull().default(false),
   createdAt: timestamp('createdAt', { mode: 'date', withTimezone: true }).notNull().defaultNow(),
 });
+
+export const contentCategories = pgTable('content_categories', {
+  id: text('id').primaryKey().$defaultFn(() => crypto.randomUUID()),
+  name: text('name').notNull().unique(),
+  slug: text('slug').notNull().unique(),
+  description: text('description'),
+  createdAt: timestamp('createdAt', { mode: 'date', withTimezone: true }).notNull().defaultNow(),
+  updatedAt: timestamp('updatedAt', { mode: 'date', withTimezone: true }).notNull().defaultNow(),
+});

From e31498e4f43ba62d5097b1ad5001a60289b5f6c4 Mon Sep 17 00:00:00 2001
From: JsCodeDevlopment <jonatasilva118@gmail.com>
Date: Tue, 12 May 2026 16:49:34 -0300
Subject: [PATCH 3/3] feat: add image upload component and implement profile
 update functionality

---
 app/profile/actions.ts                   |  25 +++--
 app/profile/page.tsx                     |   5 +-
 components/profile/edit-profile-form.tsx |  15 ++-
 components/profile/image-upload.tsx      | 125 +++++++++++++++++++++++
 4 files changed, 158 insertions(+), 12 deletions(-)
 create mode 100644 components/profile/image-upload.tsx

diff --git a/app/profile/actions.ts b/app/profile/actions.ts
index 395e4ba..7bfe239 100644
--- a/app/profile/actions.ts
+++ b/app/profile/actions.ts
@@ -32,26 +32,33 @@ export async function updateProfile(formData: FormData) {
   const bio = formData.get('bio') as string;
   const githubUrl = formData.get('githubUrl') as string;
   const linkedinUrl = formData.get('linkedinUrl') as string;
-  
+
   const techString = formData.get('technologies') as string;
   const technologies = techString ? techString.split(',').map(s => s.trim()).filter(Boolean) : [];
-  
+
   const experiences = formData.get('experiences') as string;
   const projects = formData.get('projects') as string;
+  const image = formData.get('image') as string;
 
   const existingProfile = await db.select().from(userProfile).where(eq(userProfile.userId, userId)).limit(1);
 
+  if (image) {
+    await db.update(user)
+      .set({ image, updatedAt: new Date() })
+      .where(eq(user.id, userId));
+  }
+
   if (existingProfile.length > 0) {
     await db.update(userProfile)
-      .set({ 
-        headline, 
-        bio, 
-        githubUrl, 
-        linkedinUrl, 
-        technologies, 
+      .set({
+        headline,
+        bio,
+        githubUrl,
+        linkedinUrl,
+        technologies,
         experiences,
         projects,
-        updatedAt: new Date() 
+        updatedAt: new Date()
       })
       .where(eq(userProfile.userId, userId));
   } else {
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index cb87c67..702cb99 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -367,7 +367,10 @@ export default async function ProfilePage() {
               </div>
             </CardHeader>
             <CardContent className="p-8">
-              <EditProfileForm profile={profileRows ? profileRows[0] : null} />
+              <EditProfileForm 
+                profile={profileRows ? profileRows[0] : null} 
+                userImage={sessionUser.image}
+              />
             </CardContent>
           </Card>
 
diff --git a/components/profile/edit-profile-form.tsx b/components/profile/edit-profile-form.tsx
index 47ca7cf..3b96370 100644
--- a/components/profile/edit-profile-form.tsx
+++ b/components/profile/edit-profile-form.tsx
@@ -6,6 +6,7 @@ import { updateProfile } from '@/app/profile/actions';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { ProfileSections } from './profile-sections';
+import { ImageUpload } from './image-upload';
 import { TechSelect } from './tech-select';
 
 interface UserProfile {
@@ -20,7 +21,13 @@ interface UserProfile {
   projects?: string | null;
 }
 
-export function EditProfileForm({ profile }: { profile: UserProfile | null | undefined }) {
+export function EditProfileForm({ 
+  profile, 
+  userImage 
+}: { 
+  profile: UserProfile | null | undefined,
+  userImage?: string | null
+}) {
   const [loading, setLoading] = useState(false);
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -38,7 +45,11 @@ export function EditProfileForm({ profile }: { profile: UserProfile | null | und
   }
 
   return (
-    <form onSubmit={(e) => void handleSubmit(e)} className="space-y-4">
+    <form onSubmit={(e) => void handleSubmit(e)} className="space-y-6">
+      <div className="flex justify-center pb-8 border-b border-border/50">
+        <ImageUpload initialImage={userImage} />
+      </div>
+
       <div className="space-y-2">
         <label htmlFor="headline" className="text-xs font-bold uppercase text-muted-foreground tracking-wide">Headline Profissional</label>
         <Input 
diff --git a/components/profile/image-upload.tsx b/components/profile/image-upload.tsx
new file mode 100644
index 0000000..760f3cf
--- /dev/null
+++ b/components/profile/image-upload.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { Camera, Loader2, User } from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+
+interface ImageUploadProps {
+  initialImage?: string | null;
+  name?: string;
+}
+
+export function ImageUpload({
+  initialImage,
+  name = "image",
+}: ImageUploadProps) {
+  const [preview, setPreview] = useState<string | null>(initialImage || null);
+  const [base64, setBase64] = useState<string>("");
+  const [isProcessing, setIsProcessing] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      alert("Por favor, seleciona uma imagem válida.");
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      alert("A imagem é demasiado grande. Escolhe uma até 5MB.");
+      return;
+    }
+
+    setIsProcessing(true);
+
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      const img = new window.Image();
+      img.onload = () => {
+        const canvas = document.createElement("canvas");
+        const MAX_WIDTH = 300;
+        const MAX_HEIGHT = 300;
+        let width = img.width;
+        let height = img.height;
+
+        if (width > height) {
+          if (width > MAX_WIDTH) {
+            height *= MAX_WIDTH / width;
+            width = MAX_WIDTH;
+          }
+        } else {
+          if (height > MAX_HEIGHT) {
+            width *= MAX_HEIGHT / height;
+            height = MAX_HEIGHT;
+          }
+        }
+
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        ctx?.drawImage(img, 0, 0, width, height);
+
+        const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+        setPreview(dataUrl);
+        setBase64(dataUrl);
+        setIsProcessing(false);
+      };
+      img.src = event.target?.result as string;
+    };
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <div className="relative group">
+        <div className="absolute -inset-1 bg-gradient-to-r from-primary to-primary/50 opacity-25 group-hover:opacity-50 transition duration-500 blur rounded-full" />
+        <div className="relative h-32 w-32 rounded-full border-4 border-primary bg-background overflow-hidden flex items-center justify-center shadow-xl">
+          {preview ? (
+            <Image
+              src={preview}
+              alt="Avatar"
+              fill
+              className="object-cover"
+              unoptimized
+            />
+          ) : (
+            <User className="h-12 w-12 text-muted-foreground" />
+          )}
+
+          {isProcessing && (
+            <div className="absolute inset-0 bg-background/60 backdrop-blur-sm flex items-center justify-center">
+              <Loader2 className="h-6 w-6 animate-spin text-primary" />
+            </div>
+          )}
+
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center text-white"
+          >
+            <Camera className="h-6 w-6" />
+            <span className="text-[10px] font-black uppercase mt-1">
+              Alterar
+            </span>
+          </button>
+        </div>
+      </div>
+
+      <input
+        type="file"
+        ref={fileInputRef}
+        onChange={handleFileChange}
+        accept="image/*"
+        className="hidden"
+      />
+
+      <input type="hidden" name={name} value={base64} />
+
+      <p className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">
+        JPEG ou PNG, máx. 5MB (será redimensionada)
+      </p>
+    </div>
+  );
+}