"use client";

import { useState, useCallback, useEffect } from "react";
import { Button } from "@/shared/components/ui/button";
import { Badge } from "@/shared/components/ui/badge";
import { Card, CardContent } from "@/shared/components/ui/card";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/ui/tabs";
import {
  Copy,
  Check,
  ChevronDown,
  ChevronRight,
  Terminal,
  Bug,
  Sparkles,
  Shield,
  TestTube,
  Plug,
  RefreshCw,
  FileText,
  Zap,
  Rocket,
  ListChecks,
  Brain,
  Wrench,
} from "lucide-react";

// ─── Types ─────────────────────────────────────────────────────────

type PromptCategory = {
  id: string;
  label: string;
  icon: React.ReactNode;
  description: string;
  prompts: PromptTemplate[];
};

type PromptTemplate = {
  id: string;
  title: string;
  description: string;
  prompt: string;
  tags: string[];
  oneTime?: boolean;
  variables?: string[];
};

// ─── Module list for variable substitution hints ───────────────────

const MODULES = [
  "registratura", "address-book", "parcel-sync", "geoportal", "password-vault",
  "mini-utilities", "email-signature", "word-xml", "word-templates", "tag-manager",
  "it-inventory", "digital-signatures", "prompt-generator", "ai-chat", "hot-desk",
  "visual-copilot", "dashboard",
] as const;

// ─── Prompt Templates ──────────────────────────────────────────────

const CATEGORIES: PromptCategory[] = [
  {
    id: "module-work",
    label: "Lucru pe modul",
    icon: <Terminal className="size-4" />,
    description: "Prompturi pentru lucru general, bugfix-uri si features pe module existente",
    prompts: [
      {
        id: "module-work-general",
        title: "Lucru general pe modul",
        description: "Sesiune de lucru pe un modul specific — citeste contextul, propune, implementeaza",
        tags: ["regular", "module"],
        variables: ["MODULE_NAME"],
        prompt: `Scopul acestei sesiuni este sa lucram pe modulul {MODULE_NAME} din ArchiTools.

Citeste CLAUDE.md si docs/MODULE-MAP.md inainte de orice.
Apoi citeste tipurile si componentele modulului:
- src/modules/{MODULE_NAME}/types.ts
- src/modules/{MODULE_NAME}/config.ts
- src/modules/{MODULE_NAME}/components/ (fisierele principale)
- src/modules/{MODULE_NAME}/services/ (daca exista)

Dupa ce ai inteles codul existent, intreaba-ma ce vreau sa fac.
Nu propune schimbari pana nu intelegi modulul complet.
npx next build TREBUIE sa treaca dupa fiecare schimbare.`,
      },
      {
        id: "bugfix",
        title: "Bugfix pe modul",
        description: "Investigheaza si rezolva un bug specific",
        tags: ["regular", "bugfix"],
        variables: ["MODULE_NAME", "BUG_DESCRIPTION"],
        prompt: `Am un bug in modulul {MODULE_NAME}: {BUG_DESCRIPTION}

Citeste CLAUDE.md si docs/MODULE-MAP.md pentru context.

Pasi:
1. Citeste fisierele relevante ale modulului
2. Identifica cauza root — nu ghici, citeste codul
3. Propune fix-ul INAINTE sa-l aplici
4. Aplica fix-ul minimal (nu refactoriza alte lucruri)
5. Verifica ca npx next build trece
6. Explica ce s-a schimbat si de ce

Daca bug-ul e in interactiunea cu alt modul sau API, citeste si acel cod.
Nu adauga features sau "imbunatatiri" — doar fix bug-ul raportat.`,
      },
      {
        id: "feature-existing",
        title: "Feature nou in modul existent",
        description: "Adauga o functionalitate noua intr-un modul care exista deja",
        tags: ["regular", "feature"],
        variables: ["MODULE_NAME", "FEATURE_DESCRIPTION"],
        prompt: `Vreau sa adaug un feature in modulul {MODULE_NAME}: {FEATURE_DESCRIPTION}

Citeste CLAUDE.md si docs/MODULE-MAP.md pentru context.

Pasi obligatorii:
1. Citeste types.ts, config.ts si componentele existente ale modulului
2. Verifica daca feature-ul necesita schimbari de tip (types.ts)
3. Verifica daca necesita API route nou sau modificare la cel existent
4. Propune planul de implementare INAINTE de a scrie cod
5. Implementeaza pas cu pas, verificand build dupa fiecare fisier major
6. Pastreaza conventiile existente (English code, Romanian UI)
7. npx next build TREBUIE sa treaca

Reguli:
- Nu schimba structura modulului fara motiv
- Nu adauga dependinte noi daca nu e necesar
- Pastreaza compatibilitatea cu datele existente in storage/DB
- Daca trebuie migrare de date, propune-o separat`,
      },
      {
        id: "feature-new-module",
        title: "Modul complet nou",
        description: "Creeaza un modul nou de la zero urmand pattern-ul standard",
        tags: ["one-time", "feature", "architecture"],
        oneTime: true,
        variables: ["MODULE_NAME", "MODULE_DESCRIPTION"],
        prompt: `Vreau sa creez un modul nou: {MODULE_NAME} — {MODULE_DESCRIPTION}

Citeste CLAUDE.md, docs/MODULE-MAP.md si docs/guides/MODULE-DEVELOPMENT.md.
Studiaza un modul existent similar ca referinta (ex: it-inventory sau hot-desk pentru module simple, registratura pentru module complexe).

Creeaza structura standard:
src/modules/{MODULE_NAME}/
  components/{MODULE_NAME}-module.tsx
  hooks/use-{MODULE_NAME}.ts (daca e nevoie)
  services/ (daca e nevoie)
  types.ts
  config.ts
  index.ts

Plus:
- src/app/(modules)/{MODULE_NAME}/page.tsx (route page)
- Adauga config in src/config/modules.ts
- Adauga flag in src/config/flags.ts
- Adauga navigare in src/config/navigation.ts

Reguli:
- Urmeaza EXACT pattern-ul celorlalte module
- English code, Romanian UI text
- Feature flag enabled by default
- Storage via useStorage('{MODULE_NAME}') hook
- npx next build TREBUIE sa treaca
- Nu implementa mai mult decat MVP-ul — pot adauga dupa`,
      },
    ],
  },
  {
    id: "api",
    label: "API & Backend",
    icon: <Plug className="size-4" />,
    description: "Creare si modificare API routes, integrari externe, Prisma schema",
    prompts: [
      {
        id: "api-new-route",
        title: "API route nou",
        description: "Creeaza un endpoint API nou cu auth, validare, error handling",
        tags: ["regular", "api"],
        variables: ["ROUTE_PATH", "ROUTE_DESCRIPTION"],
        prompt: `Creeaza un API route nou: /api/{ROUTE_PATH} — {ROUTE_DESCRIPTION}

Citeste CLAUDE.md (sectiunea Middleware & Large Uploads) si docs/ARCHITECTURE-QUICK.md.

Cerinte obligatorii:
1. Auth: middleware coverage SAU requireAuth() pentru rute excluse
2. Input validation pe toate parametrii
3. Error handling: try/catch cu mesaje utile (nu stack traces)
4. Prisma queries: parametrizate ($queryRaw cu template literals, NU string concat)
5. TypeScript strict: toate return types explicit

Pattern de referinta — citeste un API route existent similar:
- CRUD simplu: src/app/api/storage/route.ts
- Cu Prisma raw: src/app/api/registratura/route.ts
- Cu external API: src/app/api/eterra/search/route.ts

Daca ruta accepta uploads mari:
- Exclude din middleware matcher (src/middleware.ts)
- Adauga requireAuth() manual
- Documenteaza in CLAUDE.md sectiunea Middleware

npx next build TREBUIE sa treaca.`,
      },
      {
        id: "prisma-schema",
        title: "Modificare Prisma schema",
        description: "Adauga model nou sau modifica schema existenta",
        tags: ["regular", "database"],
        variables: ["CHANGE_DESCRIPTION"],
        prompt: `Vreau sa modific Prisma schema: {CHANGE_DESCRIPTION}

Citeste prisma/schema.prisma complet inainte.

Pasi:
1. Propune schimbarea de schema INAINTE de a o aplica
2. Verifica impactul asupra codului existent (grep pentru modelul afectat)
3. Aplica in schema.prisma
4. Ruleaza: npx prisma generate
5. Actualizeaza codul care foloseste modelul
6. npx next build TREBUIE sa treaca

Reguli:
- Adauga @@index pe coloane folosite in WHERE/ORDER BY
- Adauga @@unique pe combinatii care trebuie sa fie unice
- onDelete: SetNull sau Cascade — niciodata default (restrict)
- Foloseste Json? pentru campuri flexibile (enrichment pattern)
- DateTime cu @default(now()) pe createdAt, @updatedAt pe updatedAt

IMPORTANT: Aceasta schimbare necesita si migrare pe server (prisma migrate).
Nu face breaking changes fara plan de migrare.`,
      },
      {
        id: "external-integration",
        title: "Integrare API extern",
        description: "Conectare la un serviciu extern (pattern eTerra/ePay)",
        tags: ["one-time", "api", "architecture"],
        oneTime: true,
        variables: ["SERVICE_NAME", "SERVICE_DESCRIPTION"],
        prompt: `Vreau sa integrez un serviciu extern: {SERVICE_NAME} — {SERVICE_DESCRIPTION}

Citeste CLAUDE.md sectiunile eTerra/ANCPI Rules si Middleware.
Studiaza pattern-ul din src/modules/parcel-sync/services/eterra-client.ts ca referinta.

Pattern obligatoriu pentru integrari externe:
1. Client class separat in services/ (nu inline in route)
2. Session/token caching cu TTL (global singleton pattern)
3. Periodic cleanup pe cache (setInterval)
4. Health check daca serviciul e instabil
5. Retry logic pentru erori tranziente (ECONNRESET, 500)
6. Timeout explicit pe toate request-urile
7. Error handling granular (nu catch-all generic)
8. Logging cu prefix: console.log("[{SERVICE_NAME}] ...")

Env vars:
- Adauga in docker-compose.yml
- NU hardcoda credentials in cod
- Documenteaza in docs/ARCHITECTURE-QUICK.md

npx next build TREBUIE sa treaca.`,
      },
    ],
  },
  {
    id: "quality",
    label: "Calitate & Securitate",
    icon: <Shield className="size-4" />,
    description: "Audituri de securitate, testing, performance, code review",
    prompts: [
      {
        id: "security-audit",
        title: "Audit securitate complet",
        description: "Scanare completa de securitate pe tot codebase-ul",
        tags: ["periodic", "security"],
        prompt: `Scopul acestei sesiuni este un audit complet de securitate al ArchiTools.
Aplicatia este IN PRODUCTIE la https://tools.beletage.ro.

Citeste CLAUDE.md si docs/ARCHITECTURE-QUICK.md inainte de orice.

Scaneaza cu agenti in paralel:

1. API AUTH: Verifica ca TOATE rutele din src/app/api/ au auth check
   (middleware matcher + requireAuth fallback)
2. SQL INJECTION: Cauta $queryRaw/$executeRaw cu string concatenation
3. INPUT VALIDATION: Verifica sanitizarea pe toate endpoint-urile
4. SECRETS: Cauta credentials hardcoded, env vars expuse in client
5. ERROR HANDLING: Catch goale, stack traces in responses
6. RACE CONDITIONS: Write operations concurente fara locks
7. DATA INTEGRITY: Upsert-uri care pot suprascrie date

Grupeaza in: CRITICAL / IMPORTANT / NICE-TO-HAVE
Pentru fiecare: fisier, linia, problema, solutia propusa.
NU aplica fix-uri fara sa le listezi mai intai.
npx next build TREBUIE sa treaca dupa fiecare fix.`,
      },
      {
        id: "security-module",
        title: "Audit securitate pe modul",
        description: "Review de securitate focusat pe un singur modul",
        tags: ["regular", "security"],
        variables: ["MODULE_NAME"],
        prompt: `Fa un audit de securitate pe modulul {MODULE_NAME}.

Citeste CLAUDE.md si docs/MODULE-MAP.md.

Verifica:
1. API routes folosite de modul — au auth? Input validation?
2. Prisma queries — SQL injection posibil?
3. User input — sanitizat inainte de stocare/afisare?
4. File uploads (daca exista) — validare tip/dimensiune?
5. Storage operations — race conditions la concurrent access?
6. Error handling — erori silentioase? Stack traces expuse?
7. Cross-module deps — sunt corecte si necesare?

Raporteaza gasirile cu: fisier, linia, severitate, fix propus.`,
      },
      {
        id: "testing-hardcore",
        title: "Testing hardcore",
        description: "Edge cases, stress testing, error scenarios pentru un modul",
        tags: ["periodic", "testing"],
        variables: ["MODULE_NAME"],
        prompt: `Vreau sa testez hardcore modulul {MODULE_NAME}.

Citeste codul modulului complet, apoi gandeste:

1. EDGE CASES: Ce se intampla cu input gol? Cu caractere speciale (diacritice, emoji)? Cu valori extreme (numar foarte mare, string foarte lung)?

2. CONCURRENT ACCESS: Ce se intampla daca 2 useri fac aceeasi operatie simultan? Race conditions la write/update/delete?

3. ERROR PATHS: Ce se intampla daca DB-ul e down? Daca API-ul extern nu raspunde? Daca sesiunea expira mid-operation?

4. DATA INTEGRITY: Pot pierde date? Pot crea duplicate? Pot suprascrie datele altcuiva?

5. UI STATE: Ce se intampla daca user-ul da click dublu pe buton? Daca navigheaza away in timpul unui save? Daca face refresh?

6. STORAGE: Ce se intampla cu date legacy (format vechi)? Cu valori null/undefined in JSON?

Pentru fiecare problema gasita: descrie scenariul, impactul, si propune fix.
Aplica doar ce e CRITICAL dupa aprobare.`,
      },
      {
        id: "performance-audit",
        title: "Audit performanta",
        description: "Identificare bottleneck-uri, optimizare queries, bundle size",
        tags: ["periodic", "performance"],
        variables: ["MODULE_NAME"],
        prompt: `Analizeaza performanta modulului {MODULE_NAME}.

Citeste CLAUDE.md (Storage Performance Rules) si codul modulului.

Verifica:
1. N+1 QUERIES: storage.list() + get() in loop? Ar trebui exportAll()
2. LARGE PAYLOADS: Se incarca date inutile? lightweight: true folosit?
3. RE-RENDERS: useEffect-uri care trigger-uiesc re-render excesiv?
4. BUNDLE SIZE: Import-uri heavy (librarii intregi vs tree-shaking)?
5. API CALLS: Request-uri redundante? Lipseste caching?
6. DB QUERIES: Lipsesc indexuri? SELECT * in loc de select specific?
7. MEMORY: Global singletons care cresc nelimitat? Cache fara TTL?

Propune optimizarile ordonate dupa impact.
Aplica doar dupa aprobare.`,
      },
    ],
  },
  {
    id: "session",
    label: "Sesiune & Continuare",
    icon: <RefreshCw className="size-4" />,
    description: "Prompturi pentru inceperea sau continuarea sesiunilor de lucru",
    prompts: [
      {
        id: "continue-tasklist",
        title: "Continuare din sesiunea anterioara",
        description: "Reia lucrul de unde am ramas, cu verificare task list",
        tags: ["regular", "session"],
        prompt: `Continuam din sesiunea anterioara.

Citeste CLAUDE.md, MEMORY.md si docs/MODULE-MAP.md.
Verifica memory/ pentru context despre ce s-a lucrat recent.

Apoi:
1. Citeste ROADMAP.md (daca exista) pentru task list-ul curent
2. Verifica git log --oneline -20 sa vezi ce s-a comis recent
3. Verifica git status sa vezi daca sunt schimbari uncommited
4. Rezuma ce s-a facut si ce a ramas
5. Intreaba-ma cum vreau sa continuam

Nu incepe sa lucrezi fara confirmare.
npx next build TREBUIE sa treaca inainte de orice schimbare.`,
      },
      {
        id: "fresh-session",
        title: "Sesiune noua — orientare",
        description: "Prima sesiune sau sesiune dupa pauza lunga — ia-ti bearings",
        tags: ["regular", "session"],
        prompt: `Sesiune noua pe ArchiTools.

Citeste in ordine:
1. CLAUDE.md (context proiect + reguli)
2. memory/MEMORY.md (index memorii)
3. Fiecare fisier din memory/ (context sesiuni anterioare)
4. git log --oneline -20 (activitate recenta)
5. git status (stare curenta)
6. docs/MODULE-MAP.md (harta module)

Dupa ce ai citit tot, da-mi un rezumat de 5-10 randuri:
- Ce s-a facut recent
- Ce e in progress / neterminat
- Ce probleme sunt cunoscute
- Recomandarea ta pentru ce sa facem azi

Asteapta confirmarea mea inainte de a incepe.`,
      },
      {
        id: "review-refactor",
        title: "Code review & refactoring",
        description: "Review si curatare cod pe o zona specifica",
        tags: ["periodic", "review"],
        variables: ["TARGET"],
        prompt: `Fa code review pe: {TARGET}

Citeste CLAUDE.md si codul tinta complet.

Verifica:
1. PATTERN COMPLIANCE: Urmeaza conventiile din CLAUDE.md?
2. TYPE SAFETY: TypeScript strict — sunt tipuri corecte? Null checks?
3. ERROR HANDLING: Catch blocks complete? Promise-uri handled?
4. NAMING: English code, Romanian UI? Consistent cu restul?
5. COMPLEXITY: Functii prea lungi? Logica duplicata?
6. SECURITY: Input validation? Auth checks?
7. PERFORMANCE: N+1 queries? Re-renders inutile?

Raporteaza gasirile ordonate dupa severitate.
NU aplica refactoring fara listarea schimbarilor propuse si aprobare.
Refactoring-ul trebuie sa fie minimal — nu rescrie ce functioneaza.`,
      },
      {
        id: "full-audit",
        title: "Audit complet codebase",
        description: "Scanare completa: cod mort, consistenta, securitate, documentatie",
        tags: ["periodic", "audit"],
        oneTime: true,
        prompt: `Scopul acestei sesiuni este un audit complet al codebase-ului ArchiTools cu 3 obiective:

1. REVIEW & CLEANUP: Cod mort, dependinte neutilizate, TODO/FIXME, consistenta module
2. SIGURANTA IN PRODUCTIE: SQL injection, auth gaps, race conditions, data integrity
3. DOCUMENTATIE: CLAUDE.md actualizat, docs/ la zi, memory/ updatat

Citeste CLAUDE.md si MEMORY.md inainte de orice.
Foloseste agenti Explore in paralel (minim 5 simultan) pentru scanare.

Grupeaza gasirile in: CRITICAL / IMPORTANT / NICE-TO-HAVE
NU modifica cod fara sa listezi mai intai toate schimbarile propuse.
npx next build TREBUIE sa treaca dupa fiecare schimbare.
Commit frecvent cu mesaje descriptive.`,
      },
    ],
  },
  {
    id: "docs",
    label: "Documentatie & Meta",
    icon: <FileText className="size-4" />,
    description: "Update documentatie, CLAUDE.md, memory, si meta-prompting",
    prompts: [
      {
        id: "update-claudemd",
        title: "Actualizeaza CLAUDE.md",
        description: "Sincronizeaza CLAUDE.md cu starea actuala a codului",
        tags: ["periodic", "docs"],
        prompt: `CLAUDE.md trebuie actualizat sa reflecte starea curenta a proiectului.

Pasi:
1. Citeste CLAUDE.md curent
2. Verifica fiecare sectiune contra codului real:
   - Module table: sunt toate modulele? Versiuni corecte?
   - Stack: versiuni la zi?
   - Conventions: se respecta?
   - Common Pitfalls: mai sunt relevante? Lipsesc altele noi?
   - Infrastructure: porturi/servicii corecte?
3. Citeste docs/MODULE-MAP.md — e la zi?
4. Citeste docs/ARCHITECTURE-QUICK.md — e la zi?

Propune schimbarile necesare inainte de a le aplica.
Target: CLAUDE.md sub 200 linii, informatii derivabile din cod mutate in docs/.`,
      },
      {
        id: "update-memory",
        title: "Actualizeaza memory/",
        description: "Curata memorii vechi si adauga context nou",
        tags: ["periodic", "meta"],
        prompt: `Verifica si actualizeaza memory/ files.

Citeste memory/MEMORY.md si fiecare fisier indexat.

Pentru fiecare memorie:
1. E inca relevanta? Daca nu, sterge-o.
2. Informatia e la zi? Daca nu, actualizeaz-o.
3. Informatia e derivabila din cod? Daca da, sterge-o (redundanta).

Adauga memorii NOI pentru:
- Decizii arhitecturale recente care nu sunt in CLAUDE.md
- Feedback-ul meu din aceasta sesiune (daca am corectat ceva)
- Starea task-urilor in progress

NU salva in memory: cod, structura fisierelor, git history — astea se pot citi direct.`,
      },
      {
        id: "improve-prompts",
        title: "Imbunatateste prompturile",
        description: "Meta-prompt: analizeaza si rafineaza prompturile din aceasta pagina",
        tags: ["periodic", "meta"],
        prompt: `Citeste codul paginii /prompts (src/app/(modules)/prompts/page.tsx).

Analizeaza fiecare prompt din CATEGORIES:
1. E clar si specific? Lipseste context?
2. Pasii sunt in ordine logica?
3. Include safety nets (build check, aprobare)?
4. E prea lung/scurt?
5. Variabilele sunt utile?

Apoi gandeste: ce prompturi noi ar fi utile bazat pe:
- Tipurile de task-uri care apar frecvent in git log
- Module care sunt modificate des
- Greseli care se repeta (din memory/ feedback)

Propune imbunatatiri si prompturi noi. Aplica dupa aprobare.`,
      },
    ],
  },
  {
    id: "quick",
    label: "Quick Actions",
    icon: <Zap className="size-4" />,
    description: "Prompturi scurte pentru actiuni rapide si frecvente",
    prompts: [
      {
        id: "quick-build",
        title: "Verifica build",
        description: "Build check rapid",
        tags: ["quick"],
        prompt: `Ruleaza npx next build si raporteaza rezultatul. Daca sunt erori, propune fix-uri.`,
      },
      {
        id: "deploy-prep",
        title: "Pregatire deploy",
        description: "Checklist complet inainte de push la productie",
        tags: ["regular", "deploy"],
        prompt: `Pregateste deploy-ul pe productie (tools.beletage.ro).

Checklist:
1. git status — totul comis? Fisiere untracked suspecte?
2. npx next build — zero erori?
3. docker-compose.yml — env vars noi necesare?
4. prisma/schema.prisma — s-a schimbat? Necesita migrate?
5. middleware.ts — rute noi excluse daca e cazul?
6. Verifica ca nu sunt credentials hardcoded in cod
7. git log --oneline -5 — commit messages descriptive?

Daca totul e ok, confirma "Ready to push".
Daca sunt probleme, listeaza-le cu fix propus.

IMPORTANT: Dupa push, deploy-ul e MANUAL in Portainer.
Daca schema Prisma s-a schimbat, trebuie migrate pe server.`,
      },
      {
        id: "debug-unknown",
        title: "Debug eroare necunoscuta",
        description: "Investigheaza o eroare fara cauza evidenta",
        tags: ["regular", "debug"],
        variables: ["ERROR_DESCRIPTION"],
        prompt: `Am o eroare: {ERROR_DESCRIPTION}

Investigheaza:
1. Citeste stack trace-ul (daca exista) — gaseste fisierul root cause
2. Citeste codul relevant — nu ghici, verifica
3. Cauta pattern-uri similare in codebase (grep)
4. Verifica git log recent — s-a schimbat ceva care ar cauza asta?
5. Verifica env vars — lipseste ceva?
6. Verifica Prisma schema — model-ul e in sync?

Dupa investigatie:
- Explica cauza root (nu simptomul)
- Propune fix minim
- Aplica fix dupa aprobare
- npx next build TREBUIE sa treaca`,
      },
      {
        id: "quick-deps",
        title: "Update dependinte",
        description: "Verifica si actualizeaza package.json",
        tags: ["quick"],
        prompt: `Verifica daca sunt update-uri disponibile pentru dependintele din package.json.

Ruleaza: npm outdated
Listeaza ce se poate actualiza safe (minor/patch).
NU actualiza major versions fara discutie.
Dupa update: npx next build TREBUIE sa treaca.`,
      },
      {
        id: "quick-git-cleanup",
        title: "Git cleanup",
        description: "Verifica starea repo-ului si curata",
        tags: ["quick"],
        prompt: `Verifica starea repo-ului:
1. git status — fisiere uncommited?
2. git log --oneline -10 — commit-uri recente ok?
3. Fisiere untracked suspecte? (.env, tmp files, build artifacts)
4. .gitignore — lipseste ceva?

Propune cleanup daca e nevoie.`,
      },
      {
        id: "quick-type-check",
        title: "Verificare tipuri modul",
        description: "Verifica typesafety pe un modul specific",
        tags: ["quick"],
        variables: ["MODULE_NAME"],
        prompt: `Citeste src/modules/{MODULE_NAME}/types.ts si verifica:
1. Toate interfetele sunt folosite? (grep imports)
2. Sunt tipuri any sau unknown neutipizate?
3. Optional fields corect marcate cu ?
4. Consistenta cu Prisma schema (daca modulul foloseste DB direct)
Raporteaza rapid ce nu e in regula.`,
      },
    ],
  },
];

// ─── Copy button component ─────────────────────────────────────────

function CopyButton({ text, className }: { text: string; className?: string }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = useCallback(async () => {
    await navigator.clipboard.writeText(text);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }, [text]);

  return (
    <Button
      variant="ghost"
      size="icon-xs"
      onClick={handleCopy}
      className={className}
      title="Copiaza"
    >
      {copied ? <Check className="size-3 text-green-500" /> : <Copy className="size-3" />}
    </Button>
  );
}

// ─── Prompt Card ───────────────────────────────────────────────────

function PromptCard({ prompt }: { prompt: PromptTemplate }) {
  const [expanded, setExpanded] = useState(false);
  const [done, setDone] = useState(false);

  // Persist one-time completion in localStorage
  useEffect(() => {
    if (prompt.oneTime) {
      const stored = localStorage.getItem(`prompt-done-${prompt.id}`);
      if (stored === "true") setDone(true);
    }
  }, [prompt.id, prompt.oneTime]);

  const toggleDone = useCallback(() => {
    const next = !done;
    setDone(next);
    localStorage.setItem(`prompt-done-${prompt.id}`, String(next));
  }, [done, prompt.id]);

  return (
    <Card className={`transition-all ${done ? "opacity-50" : ""}`}>
      <CardContent className="p-4">
        <div className="flex items-start justify-between gap-2">
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2 mb-1">
              {prompt.oneTime && (
                <input
                  type="checkbox"
                  checked={done}
                  onChange={toggleDone}
                  className="size-4 rounded accent-primary cursor-pointer"
                  title={done ? "Marcheaza ca nefacut" : "Marcheaza ca facut"}
                />
              )}
              <button
                onClick={() => setExpanded(!expanded)}
                className="flex items-center gap-1 text-sm font-semibold hover:text-primary transition-colors text-left"
              >
                {expanded ? <ChevronDown className="size-3.5 shrink-0" /> : <ChevronRight className="size-3.5 shrink-0" />}
                {prompt.title}
              </button>
            </div>
            <p className="text-xs text-muted-foreground ml-5">{prompt.description}</p>
            <div className="flex flex-wrap gap-1 mt-2 ml-5">
              {prompt.tags.map((tag) => (
                <Badge key={tag} variant="secondary" className="text-[10px] px-1.5 py-0">
                  {tag}
                </Badge>
              ))}
              {prompt.variables?.map((v) => (
                <Badge key={v} variant="outline" className="text-[10px] px-1.5 py-0 border-amber-500/50 text-amber-600 dark:text-amber-400">
                  {`{${v}}`}
                </Badge>
              ))}
            </div>
          </div>
          <CopyButton text={prompt.prompt} className="shrink-0 mt-0.5" />
        </div>

        {expanded && (
          <div className="mt-3 ml-5">
            <div className="relative group">
              <pre className="text-xs bg-muted/50 border rounded-md p-3 whitespace-pre-wrap font-mono leading-relaxed overflow-x-auto max-h-[500px] overflow-y-auto">
                {prompt.prompt}
              </pre>
              <CopyButton
                text={prompt.prompt}
                className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80"
              />
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

// ─── Stats bar ─────────────────────────────────────────────────────

function StatsBar() {
  const totalPrompts = CATEGORIES.reduce((s, c) => s + c.prompts.length, 0);
  const oneTimePrompts = CATEGORIES.reduce(
    (s, c) => s + c.prompts.filter((p) => p.oneTime).length,
    0,
  );
  return (
    <div className="flex items-center gap-4 text-xs text-muted-foreground">
      <span className="flex items-center gap-1"><Brain className="size-3" /> {totalPrompts} prompturi</span>
      <span className="flex items-center gap-1"><ListChecks className="size-3" /> {oneTimePrompts} one-time</span>
      <span className="flex items-center gap-1"><Wrench className="size-3" /> {CATEGORIES.length} categorii</span>
    </div>
  );
}

// ─── Best practices sidebar ────────────────────────────────────────

const BEST_PRACTICES = [
  { icon: <Rocket className="size-3" />, text: "Incepe cu CLAUDE.md — da context inainte de task" },
  { icon: <Brain className="size-3" />, text: "Cere plan inainte de implementare" },
  { icon: <Shield className="size-3" />, text: "npx next build dupa fiecare schimbare" },
  { icon: <Bug className="size-3" />, text: "Nu refactoriza cand faci bugfix" },
  { icon: <Sparkles className="size-3" />, text: "O sesiune = un obiectiv clar" },
  { icon: <TestTube className="size-3" />, text: "Verifica-ti munca: teste, build, manual" },
  { icon: <ListChecks className="size-3" />, text: "Listeaza schimbarile inainte de a le aplica" },
  { icon: <RefreshCw className="size-3" />, text: "Actualizeaza memory/ la sfarsit de sesiune" },
  { icon: <Zap className="size-3" />, text: "/clear intre task-uri diferite" },
  { icon: <Terminal className="size-3" />, text: "Dupa 2 corectii → /clear + prompt mai bun" },
];

// ─── Main Page ─────────────────────────────────────────────────────

export default function PromptsPage() {
  const [search, setSearch] = useState("");

  const filtered = CATEGORIES.map((cat) => ({
    ...cat,
    prompts: cat.prompts.filter(
      (p) =>
        !search ||
        p.title.toLowerCase().includes(search.toLowerCase()) ||
        p.description.toLowerCase().includes(search.toLowerCase()) ||
        p.tags.some((t) => t.toLowerCase().includes(search.toLowerCase())),
    ),
  })).filter((cat) => cat.prompts.length > 0);

  return (
    <div className="max-w-5xl mx-auto p-6 space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-2xl font-bold flex items-center gap-2">
          <Terminal className="size-6" />
          Claude Code Prompts
        </h1>
        <p className="text-sm text-muted-foreground mt-1">
          Biblioteca de prompturi optimizate pentru ArchiTools. Click pe titlu pentru a vedea, buton pentru a copia.
        </p>
        <StatsBar />
      </div>

      {/* Search */}
      <div className="flex gap-3">
        <input
          type="text"
          placeholder="Cauta prompt... (ex: bugfix, security, parcel-sync)"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1 h-9 rounded-md border bg-background px-3 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
        />
        {search && (
          <Button variant="ghost" size="sm" onClick={() => setSearch("")}>
            Sterge
          </Button>
        )}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-[1fr_240px] gap-6">
        {/* Main content */}
        <Tabs defaultValue={CATEGORIES[0]?.id} className="w-full">
          <TabsList className="w-full flex flex-wrap h-auto gap-1 bg-transparent p-0 mb-4">
            {filtered.map((cat) => (
              <TabsTrigger
                key={cat.id}
                value={cat.id}
                className="flex items-center gap-1.5 text-xs data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-3 py-1.5 border"
              >
                {cat.icon}
                {cat.label}
                <Badge variant="secondary" className="text-[10px] px-1 py-0 ml-1">
                  {cat.prompts.length}
                </Badge>
              </TabsTrigger>
            ))}
          </TabsList>

          {filtered.map((cat) => (
            <TabsContent key={cat.id} value={cat.id} className="space-y-3 mt-0">
              <p className="text-xs text-muted-foreground mb-3">{cat.description}</p>
              {cat.prompts.map((prompt) => (
                <PromptCard key={prompt.id} prompt={prompt} />
              ))}
            </TabsContent>
          ))}
        </Tabs>

        {/* Sidebar */}
        <div className="space-y-4">
          <Card>
            <CardContent className="p-4">
              <h3 className="text-sm font-semibold mb-3 flex items-center gap-1.5">
                <Sparkles className="size-3.5" />
                Best Practices
              </h3>
              <div className="space-y-2.5">
                {BEST_PRACTICES.map((bp, i) => (
                  <div key={i} className="flex items-start gap-2 text-xs text-muted-foreground">
                    <span className="mt-0.5 shrink-0">{bp.icon}</span>
                    <span>{bp.text}</span>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-4">
              <h3 className="text-sm font-semibold mb-3 flex items-center gap-1.5">
                <Terminal className="size-3.5" />
                Module disponibile
              </h3>
              <div className="flex flex-wrap gap-1">
                {MODULES.map((m) => (
                  <Badge key={m} variant="outline" className="text-[10px] px-1.5 py-0 cursor-pointer hover:bg-accent" onClick={() => {
                    navigator.clipboard.writeText(m);
                  }}>
                    {m}
                  </Badge>
                ))}
              </div>
              <p className="text-[10px] text-muted-foreground mt-2">Click pe modul = copiaza numele</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
