Add Sofia Cloud complete files

.gitattributes

@@ -1,35 +1,8 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.ts text eol=lf
+*.tsx text eol=lf
+*.js text eol=lf
+*.jsx text eol=lf
+*.json text eol=lf
+*.css text eol=lf
+*.md text eol=lf
+*.sh text eol=lf

Dockerfile

@@ -0,0 +1,56 @@
+FROM node:20-alpine AS builder
+
+# Install bun
+RUN npm install -g bun
+
+WORKDIR /app
+
+# Copy package files first
+COPY package.json bun.lock ./
+
+# Install dependencies
+RUN bun install --frozen-lockfile
+
+# Copy source files
+COPY . .
+
+# Generate Prisma client
+RUN bunx prisma generate
+
+# Build the application
+RUN bun run build
+
+# Production image
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install bun
+RUN npm install -g bun
+
+# Copy built application from builder
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/bun.lock ./
+COPY --from=builder /app/prisma ./prisma
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/next.config.ts ./
+
+# Create data directory for SQLite
+RUN mkdir -p /app/data
+
+# Set environment variables
+ENV NODE_ENV=production
+ENV DATABASE_URL="file:/app/data/sofia.db"
+ENV PORT=3000
+ENV HOST=0.0.0.0
+
+# Copy and setup entrypoint
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+EXPOSE 3000
+
+ENTRYPOINT ["/entrypoint.sh"]
+CMD ["bun", "start"]

README.md

@@ -1,11 +1,29 @@
 ---
-title: Sofia Cloud
-emoji: 🦀
-colorFrom: blue
-colorTo: red
+title: Sofía Cloud - Multiagente AI
+emoji: 🤖
+colorFrom: violet
+colorTo: purple
 sdk: docker
 pinned: false
 license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# 🤖 Sofía Cloud - Sistema Multiagente AI para Monetización
+
+Plataforma completa de monetización de contenido con IA.
+
+## ✨ Características
+
+- **Generación de Contenido**: Imágenes, videos, prompts optimizados
+- **Monetización**: OnlyFans, Patreon, Fansly, Instagram, TikTok
+- **Storytelling**: Historias con IA y cliffhangers
+- **Influencers IA**: Análisis de patrones de éxito
+- **Mascotas**: Sistema de pets con +35% engagement
+- **Tendencias Virales**: Estrategias y predicción de viralidad
+
+## 🚀 Tecnologías
+
+- Next.js 15 + React + TypeScript
+- Prisma + SQLite
+- z-ai-web-dev-sdk (IA)
+- Tailwind CSS + shadcn/ui

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

entrypoint.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+
+# Initialize database if it doesn't exist
+if [ ! -f /app/data/sofia.db ]; then
+    echo "Initializing database..."
+    cd /app && bunx prisma db push --skip-generate
+fi
+
+# Start the application
+exec "$@"

eslint.config.mjs

@@ -0,0 +1,50 @@
+import nextCoreWebVitals from "eslint-config-next/core-web-vitals";
+import nextTypescript from "eslint-config-next/typescript";
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const eslintConfig = [...nextCoreWebVitals, ...nextTypescript, {
+  rules: {
+    // TypeScript rules
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/prefer-as-const": "off",
+    "@typescript-eslint/no-unused-disable-directive": "off",
+    
+    // React rules
+    "react-hooks/exhaustive-deps": "off",
+    "react-hooks/purity": "off",
+    "react/no-unescaped-entities": "off",
+    "react/display-name": "off",
+    "react/prop-types": "off",
+    "react-compiler/react-compiler": "off",
+    
+    // Next.js rules
+    "@next/next/no-img-element": "off",
+    "@next/next/no-html-link-for-pages": "off",
+    
+    // General JavaScript rules
+    "prefer-const": "off",
+    "no-unused-vars": "off",
+    "no-console": "off",
+    "no-debugger": "off",
+    "no-empty": "off",
+    "no-irregular-whitespace": "off",
+    "no-case-declarations": "off",
+    "no-fallthrough": "off",
+    "no-mixed-spaces-and-tabs": "off",
+    "no-redeclare": "off",
+    "no-undef": "off",
+    "no-unreachable": "off",
+    "no-useless-escape": "off",
+  },
+}, {
+  ignores: ["node_modules/**", ".next/**", "out/**", "build/**", "next-env.d.ts", "examples/**", "skills"]
+}];
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,12 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  /* config options here */
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  reactStrictMode: false,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,94 @@
+{
+  "name": "nextjs_tailwind_shadcn_ts",
+  "version": "0.2.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3000 -H 0.0.0.0 2>&1 | tee dev.log",
+    "build": "next build && cp -r .next/static .next/standalone/.next/ && cp -r public .next/standalone/",
+    "start": "NODE_ENV=production bun .next/standalone/server.js 2>&1 | tee server.log",
+    "lint": "eslint .",
+    "db:push": "prisma db push",
+    "db:generate": "prisma generate",
+    "db:migrate": "prisma migrate dev",
+    "db:reset": "prisma migrate reset"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.1.1",
+    "@mdxeditor/editor": "^3.39.1",
+    "@prisma/client": "^6.11.1",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@reactuses/core": "^6.0.5",
+    "@tanstack/react-query": "^5.82.0",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.23.2",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.525.0",
+    "next": "^16.1.1",
+    "next-auth": "^4.24.11",
+    "next-intl": "^4.3.4",
+    "next-themes": "^0.4.6",
+    "prisma": "^6.11.1",
+    "react": "^19.0.0",
+    "react-day-picker": "^9.8.0",
+    "react-dom": "^19.0.0",
+    "react-hook-form": "^7.60.0",
+    "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.3",
+    "react-syntax-highlighter": "^15.6.1",
+    "recharts": "^2.15.4",
+    "sharp": "^0.34.3",
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.1.0",
+    "vaul": "^1.1.2",
+    "z-ai-web-dev-sdk": "^0.0.16",
+    "zod": "^4.0.2",
+    "zustand": "^5.0.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "bun-types": "^1.3.4",
+    "eslint": "^9",
+    "eslint-config-next": "^16.1.1",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.5",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

prisma/schema.prisma

@@ -0,0 +1,436 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+// ============================================
+// MODELOS BASE
+// ============================================
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Project {
+  id          String     @id @default(cuid())
+  name        String
+  description String?
+  style       String     @default("default")
+  status      String     @default("active")
+  createdAt   DateTime   @default(now())
+  updatedAt   DateTime   @updatedAt
+  repos       Repo[]
+  analyses    Analysis[]
+  contents    Content[]
+}
+
+model Repo {
+  id        String     @id @default(cuid())
+  url       String
+  name      String
+  status    String     @default("cloned")
+  projectId String?
+  project   Project?   @relation(fields: [projectId], references: [id])
+  analyses  Analysis[]
+  createdAt DateTime   @default(now())
+  updatedAt DateTime   @updatedAt
+}
+
+model Analysis {
+  id        String   @id @default(cuid())
+  type      String
+  result    String
+  summary   String?
+  repoId    String?
+  repo      Repo?    @relation(fields: [repoId], references: [id])
+  projectId String?
+  project   Project? @relation(fields: [projectId], references: [id])
+  createdAt DateTime @default(now())
+}
+
+model AgentTask {
+  id          String    @id @default(cuid())
+  type        String
+  status      String    @default("pending")
+  input       String
+  output      String?
+  createdAt   DateTime  @default(now())
+  completedAt DateTime?
+}
+
+// ============================================
+// MODELOS DE CONTENIDO MULTIMEDIA
+// ============================================
+
+model Content {
+  id              String        @id @default(cuid())
+  type            String        // "image", "video", "audio", "text", "reel", "story", "carousel"
+  title           String
+  description     String?
+  prompt          String
+  optimizedPrompt String?
+  filePath        String?
+  thumbnail       String?
+  platform        String        @default("general")
+  status          String        @default("pending")
+  metadata        String?
+  projectId       String?
+  project         Project?      @relation(fields: [projectId], references: [id])
+  characterId     String?
+  character       Character?    @relation(fields: [characterId], references: [id])
+  petId           String?
+  pet             Pet?          @relation(fields: [petId], references: [id])
+  censorFlags     CensorFlag[]
+  posts           Post[]
+  createdAt       DateTime      @default(now())
+  updatedAt       DateTime      @updatedAt
+}
+
+model Character {
+  id             String     @id @default(cuid())
+  name           String
+  description    String?
+  referenceImage String?
+  traits         String?
+  contents       Content[]
+  pets           Pet[]
+  createdAt      DateTime   @default(now())
+  updatedAt      DateTime   @updatedAt
+}
+
+// ============================================
+// MODELOS DE CENSURA
+// ============================================
+
+model CensorRule {
+  id         String   @id @default(cuid())
+  platform   String
+  category   String
+  rule       String
+  severity   String   @default("medium")
+  autoAction String   @default("warn")
+  isActive   Boolean  @default(true)
+  createdAt  DateTime @default(now())
+  updatedAt  DateTime @updatedAt
+}
+
+model CensorFlag {
+  id        String   @id @default(cuid())
+  contentId String
+  content   Content  @relation(fields: [contentId], references: [id])
+  category  String
+  reason    String
+  severity  String
+  action    String
+  createdAt DateTime @default(now())
+}
+
+// ============================================
+// MODELOS DE MONETIZACIÓN
+// ============================================
+
+model MonetizationPlatform {
+  id              String   @id @default(cuid())
+  name            String   // OnlyFans, Patreon, Fansly, etc.
+  type            String   // "subscription", "tips", "ppv", "mixed"
+  url             String?
+  apiKey          String?  // Encriptado
+  accountId       String?
+  accountName     String?
+  legalTerms      String?  // JSON con términos legales
+  contentRules    String?  // JSON con reglas de contenido
+  feePercentage   Float?
+  payoutSchedule  String?
+  isActive        Boolean  @default(true)
+  isVerified      Boolean  @default(false)
+  metadata        String?
+  posts           Post[]
+  earnings        Earning[]
+  subscribers     Subscriber[]
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
+}
+
+model Subscriber {
+  id           String   @id @default(cuid())
+  platformId   String
+  platform     MonetizationPlatform @relation(fields: [platformId], references: [id])
+  externalId   String?
+  username     String?
+  tier         String?  // Nivel de suscripción
+  status       String   @default("active") // active, expired, cancelled
+  joinedAt     DateTime?
+  expiresAt    DateTime?
+  totalSpent   Float    @default(0)
+  metadata     String?
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+}
+
+model Earning {
+  id           String   @id @default(cuid())
+  platformId   String
+  platform     MonetizationPlatform @relation(fields: [platformId], references: [id])
+  type         String   // subscription, tip, ppv, referral
+  amount       Float
+  currency     String   @default("USD")
+  postId       String?
+  subscriberId String?
+  status       String   @default("pending") // pending, processed, paid
+  processedAt  DateTime?
+  metadata     String?
+  createdAt    DateTime @default(now())
+}
+
+// ============================================
+// MODELOS DE PUBLICACIÓN
+// ============================================
+
+model Post {
+  id              String   @id @default(cuid())
+  title           String?
+  caption         String?
+  hashtags        String?  // JSON array
+  type            String   // reel, photo, carousel, story, post
+  status          String   @default("draft") // draft, scheduled, published, failed
+  contentId       String?
+  content         Content? @relation(fields: [contentId], references: [id])
+  platformId      String?
+  platform        MonetizationPlatform? @relation(fields: [platformId], references: [id])
+  scheduledAt     DateTime?
+  publishedAt     DateTime?
+  externalPostId  String?  // ID en la plataforma externa
+  postUrl         String?  // URL del post publicado
+  engagementStats String?  // JSON con likes, views, shares, etc.
+  storyId         String?
+  story           Story?   @relation(fields: [storyId], references: [id])
+  metadata        String?
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
+}
+
+// ============================================
+// MODELOS DE STORYTELLING
+// ============================================
+
+model Story {
+  id              String      @id @default(cuid())
+  title           String
+  description     String?
+  genre           String?     // romance, drama, comedy, thriller, etc.
+  targetAudience  String?     // Demografía objetivo
+  tone            String?     // romantic, funny, dramatic, mysterious
+  structure       String?     // JSON con estructura narrativa
+  characterIds    String?     // JSON array de IDs de personajes
+  totalEpisodes   Int         @default(1)
+  currentEpisode  Int         @default(1)
+  status          String      @default("draft") // draft, active, completed, paused
+  monetizationStrategy String? // JSON con estrategia de monetización
+  posts           Post[]
+  episodes        StoryEpisode[]
+  analytics       StoryAnalytics?
+  createdAt       DateTime    @default(now())
+  updatedAt       DateTime    @updatedAt
+}
+
+model StoryEpisode {
+  id          String   @id @default(cuid())
+  storyId     String
+  story       Story    @relation(fields: [storyId], references: [id])
+  episodeNum  Int
+  title       String
+  synopsis    String?
+  content     String   // Guión o descripción detallada
+  hook        String?  // Gancho para la siguiente episodio
+  cliffhanger String?
+  status      String   @default("draft")
+  scheduledAt DateTime?
+  publishedAt DateTime?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}
+
+model StoryAnalytics {
+  id              String   @id @default(cuid())
+  storyId         String   @unique
+  story           Story    @relation(fields: [storyId], references: [id])
+  totalViews      Int      @default(0)
+  totalEngagement Float    @default(0)
+  avgWatchTime    Float?   // En segundos
+  completionRate  Float?   // Porcentaje
+  revenue         Float    @default(0)
+  subscriberGain  Int      @default(0)
+  bestPerformingEpisode Int?
+  metadata        String?
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
+}
+
+// ============================================
+// MODELOS DE AUTOMATIZACIÓN
+// ============================================
+
+model Automation {
+  id          String   @id @default(cuid())
+  name        String
+  description String?
+  type        String   // content_generation, posting, engagement, monetization
+  trigger     String   // schedule, event, manual, webhook
+  triggerConfig String? // JSON con configuración del trigger
+  actions     String   // JSON array de acciones a ejecutar
+  isActive    Boolean  @default(true)
+  lastRunAt   DateTime?
+  nextRunAt   DateTime?
+  runCount    Int      @default(0)
+  metadata    String?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+}
+
+model AutomationLog {
+  id             String   @id @default(cuid())
+  automationId   String?
+  status         String   // success, failed, partial
+  input          String?
+  output         String?
+  error          String?
+  duration       Int?     // Milisegundos
+  createdAt      DateTime @default(now())
+}
+
+// ============================================
+// MODELOS DE TENDENCIAS
+// ============================================
+
+model Trend {
+  id           String   @id @default(cuid())
+  platform     String
+  type         String   // hashtag, sound, challenge, topic
+  name         String
+  description  String?
+  volume       Int?
+  growth       Float?
+  startDate     DateTime?
+  endDate       DateTime?
+  relatedTags   String?  // JSON array
+  contentIdeas  String?  // JSON con ideas de contenido
+  isActive      Boolean  @default(true)
+  createdAt     DateTime @default(now())
+  updatedAt     DateTime @updatedAt
+}
+
+// ============================================
+// MODELOS DE PLANTILLAS
+// ============================================
+
+model PromptTemplate {
+  id        String   @id @default(cuid())
+  name      String
+  category  String
+  template  String
+  variables String
+  platform  String   @default("general")
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model ContentTemplate {
+  id           String   @id @default(cuid())
+  name         String
+  type         String   // reel, carousel, story, post
+  platform     String
+  structure    String   // JSON con estructura del contenido
+  hooks        String?  // JSON array de ganchos
+  ctas         String?  // JSON array de call-to-actions
+  hashtags     String?  // JSON array de hashtags
+  bestTimes    String?  // JSON con mejores horarios
+  isActive     Boolean  @default(true)
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+}
+
+// ============================================
+// MODELOS DE MASCOTAS/COMPAÑEROS
+// ============================================
+
+model Pet {
+  id             String      @id @default(cuid())
+  name           String
+  type           String      // dog, cat, bird, etc.
+  breed          String?
+  description    String?
+  referenceImage String?
+  traits         String?     // JSON con características
+  personality    String?     // playful, calm, energetic
+  color          String?
+  accessories    String?     // JSON array de accesorios
+  characterId    String?
+  character      Character?  @relation(fields: [characterId], references: [id], onDelete: Cascade)
+  contents       Content[]
+  isActive       Boolean     @default(true)
+  createdAt      DateTime    @default(now())
+  updatedAt      DateTime    @updatedAt
+}
+
+// ============================================
+// MODELOS DE INFLUENCERS IA DE REFERENCIA
+// ============================================
+
+model AIInfluencer {
+  id                String   @id @default(cuid())
+  name              String
+  handle            String?
+  platform          String
+  followers         Int?
+  engagement        Float?
+  niche             String?
+  style             String?     // JSON con estilo de contenido
+  contentTypes      String?     // JSON array de tipos de contenido
+  postingSchedule   String?     // JSON con horarios
+  visualStyle       String?     // JSON con estilo visual
+  monetizationType  String?     // JSON con tipo de monetización
+  signatureElements String?     // JSON con elementos distintivos
+  petCompanion      Boolean     @default(false)
+  petType           String?
+  analysis          String?     // JSON con análisis detallado
+  lessons           String?     // JSON con lecciones aprendidas
+  isActive          Boolean     @default(true)
+  createdAt         DateTime   @default(now())
+  updatedAt         DateTime   @updatedAt
+}
+
+// ============================================
+// MODELOS DE ESTRATEGIAS VIRALES
+// ============================================
+
+model ViralStrategy {
+  id              String   @id @default(cuid())
+  name            String
+  description     String?
+  platform        String
+  contentType     String   // reel, post, story, carousel
+  hook            String?  // Gancho inicial
+  structure       String?  // JSON con estructura viral
+  elements        String?  // JSON con elementos clave
+  estimatedReach  Int?
+  difficulty      String   @default("medium")
+  timeframe       String?  // Tiempo para viralizar
+  examples        String?  // JSON con ejemplos
+  tags            String?  // JSON array de tags
+  successRate     Float?
+  isActive        Boolean  @default(true)
+  createdAt       DateTime @default(now())
+  updatedAt       DateTime @updatedAt
+}

public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

src/app/api/agent/route.ts

@@ -0,0 +1,122 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+
+const SYSTEM_PROMPT = `Eres Sofía, un asistente de desarrollo de software altamente inteligente y especializado. Tu nombre es Sofía y eres parte del sistema multiagente "Sofía Cloud".
+
+Tus capacidades incluyen:
+- Análisis de código y repositorios de GitHub
+- Generación de código y documentación
+- Sugerencias de mejoras y optimizaciones
+- Detección de bugs y vulnerabilidades
+- Creación de arquitecturas de software
+- Explicaciones técnicas claras y detalladas
+
+Responde siempre de manera profesional, útil y con un toque amigable. Cuando analices código, sé específico y proporciona ejemplos concretos. Si detectas problemas, sugiere soluciones prácticas.
+
+Formato de respuestas:
+- Usa Markdown para formatear tus respuestas
+- Incluye bloques de código cuando sea relevante
+- Sé conciso pero completo
+- Si el usuario pregunta algo fuera del ámbito técnico, redirige amablemente al tema de desarrollo`;
+
+// POST - Enviar prompt al agente IA
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { prompt, context } = body;
+
+    if (!prompt) {
+      return NextResponse.json(
+        { success: false, error: "El prompt es requerido" },
+        { status: 400 }
+      );
+    }
+
+    // Crear tarea pendiente
+    const task = await db.agentTask.create({
+      data: {
+        type: "analyze",
+        status: "pending",
+        input: prompt,
+      },
+    });
+
+    try {
+      // Usar z-ai-web-dev-sdk para la respuesta de IA
+      const zai = await ZAI.create();
+
+      const messages = [
+        { role: "system" as const, content: SYSTEM_PROMPT },
+        { role: "user" as const, content: context ? `Contexto: ${context}\n\nPregunta: ${prompt}` : prompt },
+      ];
+
+      const completion = await zai.chat.completions.create({
+        messages,
+        temperature: 0.7,
+        max_tokens: 4000,
+      });
+
+      const response = completion.choices[0]?.message?.content || "No se pudo generar una respuesta";
+
+      // Actualizar tarea como completada
+      await db.agentTask.update({
+        where: { id: task.id },
+        data: {
+          status: "completed",
+          output: response,
+          completedAt: new Date(),
+        },
+      });
+
+      return NextResponse.json({
+        success: true,
+        response,
+        taskId: task.id,
+      });
+    } catch (aiError) {
+      console.error("AI Error:", aiError);
+
+      // Actualizar tarea como fallida
+      await db.agentTask.update({
+        where: { id: task.id },
+        data: {
+          status: "failed",
+          output: aiError instanceof Error ? aiError.message : "Error desconocido",
+        },
+      });
+
+      return NextResponse.json(
+        { success: false, error: "Error al procesar con IA" },
+        { status: 500 }
+      );
+    }
+  } catch (error) {
+    console.error("Error in agent route:", error);
+    return NextResponse.json(
+      { success: false, error: "Error interno del servidor" },
+      { status: 500 }
+    );
+  }
+}
+
+// GET - Obtener historial de tareas
+export async function GET() {
+  try {
+    const tasks = await db.agentTask.findMany({
+      orderBy: { createdAt: "desc" },
+      take: 20,
+    });
+
+    return NextResponse.json({
+      success: true,
+      tasks,
+    });
+  } catch (error) {
+    console.error("Error fetching tasks:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener tareas" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/analyze/route.ts

@@ -0,0 +1,234 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+import fs from "fs/promises";
+import path from "path";
+
+const REPOS_DIR = path.join(process.cwd(), "repos");
+
+async function readRepoFiles(repoName: string, maxFiles: number = 10): Promise<string> {
+  const repoPath = path.join(REPOS_DIR, repoName);
+  let content = "";
+  let fileCount = 0;
+
+  async function readDir(dir: string, depth: number = 0): Promise<void> {
+    if (fileCount >= maxFiles || depth > 3) return;
+
+    try {
+      const entries = await fs.readdir(dir, { withFileTypes: true });
+
+      for (const entry of entries) {
+        if (fileCount >= maxFiles) break;
+
+        const fullPath = path.join(dir, entry.name);
+
+        // Ignorar carpetas comunes
+        if (entry.isDirectory()) {
+          if (["node_modules", ".git", "dist", "build", "__pycache__", "venv", ".next"].includes(entry.name)) {
+            continue;
+          }
+          await readDir(fullPath, depth + 1);
+        } else if (entry.isFile()) {
+          // Solo archivos de código relevantes
+          const ext = path.extname(entry.name);
+          const codeExtensions = [".ts", ".tsx", ".js", ".jsx", ".py", ".java", ".go", ".rs", ".c", ".cpp", ".h", ".css", ".scss", ".html", ".json", ".yaml", ".yml", ".md"];
+
+          if (codeExtensions.includes(ext) && !entry.name.startsWith(".")) {
+            try {
+              const fileContent = await fs.readFile(fullPath, "utf-8");
+              const relativePath = path.relative(repoPath, fullPath);
+              content += `\n--- ${relativePath} ---\n${fileContent.slice(0, 2000)}\n`;
+              fileCount++;
+            } catch {
+              // Archivo no legible
+            }
+          }
+        }
+      }
+    } catch {
+      // Directorio no accesible
+    }
+  }
+
+  await readDir(repoPath);
+  return content;
+}
+
+// POST - Analizar código con IA
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { repoId, projectId, type, code } = body;
+
+    let analysisContent = code || "";
+    let repoName = "";
+
+    // Si hay repoId, leer archivos del repositorio
+    if (repoId) {
+      const repo = await db.repo.findUnique({
+        where: { id: repoId },
+      });
+
+      if (repo) {
+        repoName = repo.name;
+        analysisContent = await readRepoFiles(repo.name);
+      }
+    }
+
+    if (!analysisContent) {
+      return NextResponse.json(
+        { success: false, error: "No hay código para analizar" },
+        { status: 400 }
+      );
+    }
+
+    const analysisType = type || "code";
+
+    // Crear análisis inicial
+    const analysis = await db.analysis.create({
+      data: {
+        type: analysisType,
+        result: "Analizando...",
+        repoId: repoId || null,
+        projectId: projectId || null,
+      },
+    });
+
+    try {
+      const zai = await ZAI.create();
+
+      const prompts: Record<string, string> = {
+        code: `Analiza el siguiente código y proporciona:
+1. Resumen general del proyecto
+2. Estructura y organización
+3. Calidad del código (0-10)
+4. Posibles mejoras
+5. Bugs o problemas potenciales
+6. Sugerencias de seguridad
+
+Código a analizar:
+${analysisContent.slice(0, 10000)}`,
+
+        security: `Realiza un análisis de seguridad del siguiente código. Identifica:
+1. Vulnerabilidades potenciales (SQL injection, XSS, etc.)
+2. Exposición de datos sensibles
+3. Dependencias inseguras
+4. Configuraciones peligrosas
+5. Recomendaciones de mitigación
+
+Código:
+${analysisContent.slice(0, 10000)}`,
+
+        performance: `Analiza el rendimiento del siguiente código:
+1. Cuellos de botella potenciales
+2. Complejidad algorítmica
+3. Uso de memoria
+4. Operaciones bloqueantes
+5. Optimizaciones sugeridas
+
+Código:
+${analysisContent.slice(0, 10000)}`,
+      };
+
+      const completion = await zai.chat.completions.create({
+        messages: [
+          {
+            role: "system",
+            content: "Eres un experto en análisis de código. Proporciona análisis detallados y accionables.",
+          },
+          {
+            role: "user",
+            content: prompts[analysisType] || prompts.code,
+          },
+        ],
+        temperature: 0.3,
+        max_tokens: 4000,
+      });
+
+      const result = completion.choices[0]?.message?.content || "No se pudo generar análisis";
+
+      // Extraer resumen (primeras 200 caracteres)
+      const summary = result.slice(0, 200) + "...";
+
+      // Actualizar análisis
+      const updatedAnalysis = await db.analysis.update({
+        where: { id: analysis.id },
+        data: {
+          result,
+          summary,
+        },
+      });
+
+      // Crear tarea de agente
+      await db.agentTask.create({
+        data: {
+          type: "analyze",
+          status: "completed",
+          input: `Analizar ${repoName || "código"} (${analysisType})`,
+          output: summary,
+          completedAt: new Date(),
+        },
+      });
+
+      return NextResponse.json({
+        success: true,
+        analysis: updatedAnalysis,
+        message: "Análisis completado",
+      });
+    } catch (aiError) {
+      console.error("AI Analysis Error:", aiError);
+
+      await db.analysis.update({
+        where: { id: analysis.id },
+        data: {
+          result: "Error en el análisis: " + (aiError instanceof Error ? aiError.message : "Error desconocido"),
+        },
+      });
+
+      return NextResponse.json(
+        { success: false, error: "Error en el análisis de IA" },
+        { status: 500 }
+      );
+    }
+  } catch (error) {
+    console.error("Error in analyze route:", error);
+    return NextResponse.json(
+      { success: false, error: "Error interno del servidor" },
+      { status: 500 }
+    );
+  }
+}
+
+// GET - Obtener análisis
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const repoId = searchParams.get("repoId");
+    const projectId = searchParams.get("projectId");
+
+    const where: Record<string, string> = {};
+    if (repoId) where.repoId = repoId;
+    if (projectId) where.projectId = projectId;
+
+    const analyses = await db.analysis.findMany({
+      where: Object.keys(where).length > 0 ? where : undefined,
+      include: {
+        repo: true,
+        project: true,
+      },
+      orderBy: { createdAt: "desc" },
+      take: 20,
+    });
+
+    return NextResponse.json({
+      success: true,
+      analyses,
+    });
+  } catch (error) {
+    console.error("Error fetching analyses:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener análisis" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/automation/route.ts

@@ -0,0 +1,396 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+
+// Tipos de automatización disponibles
+const AUTOMATION_TYPES = {
+  content_generation: {
+    name: "Generación de Contenido",
+    description: "Genera contenido automáticamente basado en tendencias y programación",
+    triggers: ["schedule", "trend_detected", "manual"]
+  },
+  posting: {
+    name: "Publicación Automática",
+    description: "Publica contenido en horarios óptimos",
+    triggers: ["schedule", "content_ready", "manual"]
+  },
+  engagement: {
+    name: "Engagement Automático",
+    description: "Responde comentarios y mensajes automáticamente",
+    triggers: ["new_comment", "new_message", "schedule"]
+  },
+  monetization: {
+    name: "Optimización de Monetización",
+    description: "Ajusta precios y ofertas basado en analytics",
+    triggers: ["analytics_update", "subscriber_change", "schedule"]
+  },
+  storytelling: {
+    name: "Storytelling Continuo",
+    description: "Continúa historias automáticamente con cliffhangers",
+    triggers: ["episode_published", "engagement_threshold", "schedule"]
+  },
+  cross_posting: {
+    name: "Cross-Posting",
+    description: "Publica el mismo contenido en múltiples plataformas",
+    triggers: ["content_published", "schedule", "manual"]
+  },
+  trend_tracking: {
+    name: "Seguimiento de Tendencias",
+    description: "Detecta tendencias y sugiere contenido",
+    triggers: ["schedule", "manual"]
+  }
+};
+
+// GET - Listar automatizaciones
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get("type");
+    const isActive = searchParams.get("isActive");
+
+    const where: Record<string, unknown> = {};
+    if (type) where.type = type;
+    if (isActive !== null) where.isActive = isActive === "true";
+
+    const automations = await db.automation.findMany({
+      where,
+      include: {
+        _count: {
+          select: { logs: true }
+        }
+      },
+      orderBy: { createdAt: "desc" }
+    });
+
+    // Últimos logs
+    const recentLogs = await db.automationLog.findMany({
+      orderBy: { createdAt: "desc" },
+      take: 20,
+    });
+
+    // Estadísticas
+    const stats = {
+      total: await db.automation.count(),
+      active: await db.automation.count({ where: { isActive: true } }),
+      runsToday: await db.automationLog.count({
+        where: {
+          createdAt: {
+            gte: new Date(new Date().setHours(0, 0, 0, 0))
+          }
+        }
+      }),
+      successRate: await calculateSuccessRate()
+    };
+
+    return NextResponse.json({
+      success: true,
+      automations,
+      automationTypes: AUTOMATION_TYPES,
+      recentLogs,
+      stats
+    });
+
+  } catch (error) {
+    console.error("Error fetching automations:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener automatizaciones" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Crear automatización
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      name,
+      description,
+      type,
+      trigger,
+      triggerConfig,
+      actions
+    } = body;
+
+    if (!name || !type || !trigger || !actions) {
+      return NextResponse.json(
+        { success: false, error: "Faltan campos requeridos: name, type, trigger, actions" },
+        { status: 400 }
+      );
+    }
+
+    // Validar tipo de automatización
+    if (!AUTOMATION_TYPES[type as keyof typeof AUTOMATION_TYPES]) {
+      return NextResponse.json(
+        { success: false, error: "Tipo de automatización no válido" },
+        { status: 400 }
+      );
+    }
+
+    // Calcular próxima ejecución si es programada
+    let nextRunAt = null;
+    if (trigger === "schedule" && triggerConfig?.schedule) {
+      nextRunAt = calculateNextRun(triggerConfig.schedule);
+    }
+
+    const automation = await db.automation.create({
+      data: {
+        name,
+        description: description || null,
+        type,
+        trigger,
+        triggerConfig: triggerConfig ? JSON.stringify(triggerConfig) : null,
+        actions: JSON.stringify(actions),
+        nextRunAt,
+        isActive: true,
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      automation,
+      message: `Automatización "${name}" creada`
+    });
+
+  } catch (error) {
+    console.error("Error creating automation:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear automatización" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Ejecutar o actualizar automatización
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, action, isActive, triggerConfig, actions } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    // Si es una acción de ejecución
+    if (action === "execute") {
+      return await executeAutomation(id);
+    }
+
+    // Actualización normal
+    const updateData: Record<string, unknown> = {};
+    if (isActive !== undefined) updateData.isActive = isActive;
+    if (triggerConfig) updateData.triggerConfig = JSON.stringify(triggerConfig);
+    if (actions) updateData.actions = JSON.stringify(actions);
+
+    const automation = await db.automation.update({
+      where: { id },
+      data: updateData
+    });
+
+    return NextResponse.json({
+      success: true,
+      automation
+    });
+
+  } catch (error) {
+    console.error("Error updating automation:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al actualizar automatización" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar automatización
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    // Eliminar logs primero
+    await db.automationLog.deleteMany({
+      where: { automationId: id }
+    });
+
+    await db.automation.delete({
+      where: { id }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Automatización eliminada"
+    });
+
+  } catch (error) {
+    console.error("Error deleting automation:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar automatización" },
+      { status: 500 }
+    );
+  }
+}
+
+// Función para ejecutar una automatización
+async function executeAutomation(automationId: string) {
+  const startTime = Date.now();
+  
+  try {
+    const automation = await db.automation.findUnique({
+      where: { id: automationId }
+    });
+
+    if (!automation) {
+      return NextResponse.json(
+        { success: false, error: "Automatización no encontrada" },
+        { status: 404 }
+      );
+    }
+
+    const actions = JSON.parse(automation.actions);
+    const results: unknown[] = [];
+
+    // Ejecutar cada acción
+    for (const action of actions) {
+      const result = await executeAction(action);
+      results.push(result);
+    }
+
+    // Actualizar última ejecución
+    await db.automation.update({
+      where: { id: automationId },
+      data: {
+        lastRunAt: new Date(),
+        runCount: { increment: 1 },
+        nextRunAt: automation.trigger === "schedule" 
+          ? calculateNextRun(JSON.parse(automation.triggerConfig || "{}").schedule)
+          : null
+      }
+    });
+
+    // Crear log de éxito
+    await db.automationLog.create({
+      data: {
+        automationId,
+        status: "success",
+        input: automation.actions,
+        output: JSON.stringify(results),
+        duration: Date.now() - startTime
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      results,
+      duration: Date.now() - startTime
+    });
+
+  } catch (error) {
+    // Crear log de error
+    await db.automationLog.create({
+      data: {
+        automationId,
+        status: "failed",
+        error: String(error),
+        duration: Date.now() - startTime
+      }
+    });
+
+    return NextResponse.json(
+      { success: false, error: "Error al ejecutar automatización" },
+      { status: 500 }
+    );
+  }
+}
+
+// Ejecutar acción individual
+async function executeAction(action: Record<string, unknown>): Promise<unknown> {
+  const zai = await ZAI.create();
+
+  switch (action.type) {
+    case "generate_content":
+      // Generar contenido con IA
+      const completion = await zai.chat.completions.create({
+        messages: [
+          { role: "system", content: "Eres un generador de contenido para redes sociales." },
+          { role: "user", content: String(action.prompt) }
+        ]
+      });
+      return { type: "content", result: completion.choices[0]?.message?.content };
+
+    case "create_post":
+      // Crear post programado
+      const post = await db.post.create({
+        data: {
+          title: String(action.title) || "Auto-generated",
+          caption: String(action.caption) || "",
+          type: String(action.postType) || "post",
+          status: "draft"
+        }
+      });
+      return { type: "post", postId: post.id };
+
+    case "check_trends":
+      // Simular detección de tendencias
+      return { type: "trends", trends: ["trending1", "trending2"] };
+
+    case "send_notification":
+      return { type: "notification", sent: true };
+
+    default:
+      return { type: action.type, status: "executed" };
+  }
+}
+
+// Calcular próxima ejecución
+function calculateNextRun(schedule: string): Date {
+  const now = new Date();
+  
+  // Parsear schedule simple (ej: "daily:09:00", "hourly", "weekly:monday:10:00")
+  if (schedule.startsWith("daily:")) {
+    const time = schedule.split(":")[1];
+    const [hours, minutes] = time.split("-").length > 1 
+      ? time.split("-")[0].split(":").map(Number)
+      : time.split(":").map(Number);
+    
+    const next = new Date(now);
+    next.setHours(hours || 9, minutes || 0, 0, 0);
+    if (next <= now) next.setDate(next.getDate() + 1);
+    return next;
+  }
+  
+  if (schedule === "hourly") {
+    return new Date(now.getTime() + 60 * 60 * 1000);
+  }
+  
+  if (schedule === "daily") {
+    const next = new Date(now);
+    next.setDate(next.getDate() + 1);
+    next.setHours(9, 0, 0, 0);
+    return next;
+  }
+  
+  // Default: 1 hora
+  return new Date(now.getTime() + 60 * 60 * 1000);
+}
+
+// Calcular tasa de éxito
+async function calculateSuccessRate(): Promise<number> {
+  const total = await db.automationLog.count();
+  if (total === 0) return 100;
+  
+  const success = await db.automationLog.count({
+    where: { status: "success" }
+  });
+  
+  return Math.round((success / total) * 100);
+}

src/app/api/censor/route.ts

@@ -0,0 +1,191 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+
+// Reglas de censura por plataforma y categoría
+const DEFAULT_CENSOR_RULES = [
+  // YouTube
+  { platform: "youtube", category: "nudity", rule: "No se permite desnudez ni contenido sexual", severity: "high", autoAction: "remove" },
+  { platform: "youtube", category: "violence", rule: "Violencia gráfica no permitida sin advertencia", severity: "medium", autoAction: "warn" },
+  { platform: "youtube", category: "hate_speech", rule: "No se permite discurso de odio", severity: "high", autoAction: "remove" },
+  
+  // TikTok
+  { platform: "tiktok", category: "nudity", rule: "Cero tolerancia para desnudez", severity: "high", autoAction: "remove" },
+  { platform: "tiktok", category: "violence", rule: "Sin violencia gráfica", severity: "high", autoAction: "remove" },
+  { platform: "tiktok", category: "self_harm", rule: "No contenido de autolesión", severity: "high", autoAction: "remove" },
+  { platform: "tiktok", category: "dangerous", rule: "No desafíos peligrosos", severity: "high", autoAction: "remove" },
+  
+  // Instagram
+  { platform: "instagram", category: "nudity", rule: "No desnudez, excepto arte con moderación", severity: "high", autoAction: "blur" },
+  { platform: "instagram", category: "violence", rule: "Sin violencia gráfica", severity: "high", autoAction: "remove" },
+  
+  // Twitter/X
+  { platform: "twitter", category: "illegal", rule: "No contenido ilegal", severity: "high", autoAction: "remove" },
+  { platform: "twitter", category: "sensitive", rule: "Marcar como contenido sensible", severity: "low", autoAction: "warn" },
+];
+
+// GET - Obtener reglas de censura
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const platform = searchParams.get("platform");
+
+    let rules;
+    if (platform) {
+      rules = await db.censorRule.findMany({
+        where: { platform, isActive: true }
+      });
+      
+      // Si no hay reglas en BD, usar las por defecto
+      if (rules.length === 0) {
+        rules = DEFAULT_CENSOR_RULES.filter(r => r.platform === platform);
+      }
+    } else {
+      rules = await db.censorRule.findMany({
+        where: { isActive: true }
+      });
+      
+      if (rules.length === 0) {
+        rules = DEFAULT_CENSOR_RULES;
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      rules
+    });
+
+  } catch (error) {
+    console.error("Error fetching censor rules:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener reglas de censura" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Analizar contenido para censura
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { content, type, platform } = body;
+
+    if (!content) {
+      return NextResponse.json(
+        { success: false, error: "Contenido requerido para análisis" },
+        { status: 400 }
+      );
+    }
+
+    const zai = await ZAI.create();
+
+    // Usar IA para analizar el contenido
+    const analysisPrompt = `Analiza el siguiente ${type || "contenido"} para verificar si cumple con las normas de la plataforma ${platform || "general"}.
+
+Contenido a analizar:
+${content.substring(0, 2000)}
+
+Responde SOLO en formato JSON:
+{
+  "safe": true/false,
+  "flags": [
+    {"category": "categoría", "reason": "razón", "severity": "low/medium/high"}
+  ],
+  "recommendations": ["recomendación1", "recomendación2"],
+  "platformCompatible": ["plataforma1", "plataforma2"]
+}`;
+
+    const completion = await zai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content: `Eres un moderador de contenido experto. Tu trabajo es analizar contenido para verificar si cumple con las políticas de diferentes plataformas. Sé estricto pero justo. Considera:
+
+1. YouTube: Familiar, sin desnudez, violencia moderada con advertencia
+2. TikTok: Para todos los públicos, sin contenido peligroso
+3. Instagram: Sin desnudez (excepto arte), sin violencia gráfica
+4. Twitter: Más permisivo pero marca contenido sensible
+5. General: Apropiado para todo público`
+        },
+        { role: "user", content: analysisPrompt }
+      ],
+      temperature: 0.3,
+    });
+
+    const response = completion.choices[0]?.message?.content || "";
+    
+    // Parsear respuesta
+    let analysis;
+    try {
+      const jsonMatch = response.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        analysis = JSON.parse(jsonMatch[0]);
+      } else {
+        analysis = {
+          safe: true,
+          flags: [],
+          recommendations: [],
+          platformCompatible: [platform || "general"]
+        };
+      }
+    } catch {
+      analysis = {
+        safe: true,
+        flags: [],
+        recommendations: [],
+        platformCompatible: [platform || "general"]
+      };
+    }
+
+    return NextResponse.json({
+      success: true,
+      analysis,
+      originalContent: content.substring(0, 200)
+    });
+
+  } catch (error) {
+    console.error("Error analyzing content:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al analizar contenido" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Añadir regla de censura personalizada
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { platform, category, rule, severity, autoAction } = body;
+
+    if (!platform || !category || !rule) {
+      return NextResponse.json(
+        { success: false, error: "Plataforma, categoría y regla son requeridos" },
+        { status: 400 }
+      );
+    }
+
+    const censorRule = await db.censorRule.create({
+      data: {
+        platform,
+        category,
+        rule,
+        severity: severity || "medium",
+        autoAction: autoAction || "warn"
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      rule: censorRule,
+      message: "Regla de censura creada"
+    });
+
+  } catch (error) {
+    console.error("Error creating censor rule:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear regla de censura" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/characters/route.ts

@@ -0,0 +1,212 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+import fs from "fs/promises";
+import path from "path";
+
+const CHARACTERS_DIR = path.join(process.cwd(), "download", "characters");
+
+async function ensureDir() {
+  try {
+    await fs.mkdir(CHARACTERS_DIR, { recursive: true });
+  } catch {
+    // ya existe
+  }
+}
+
+// GET - Listar personajes
+export async function GET(request: NextRequest) {
+  try {
+    const characters = await db.character.findMany({
+      include: {
+        contents: {
+          take: 5,
+          orderBy: { createdAt: "desc" }
+        }
+      },
+      orderBy: { createdAt: "desc" }
+    });
+
+    return NextResponse.json({
+      success: true,
+      characters,
+      total: characters.length
+    });
+
+  } catch (error) {
+    console.error("Error fetching characters:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener personajes" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Crear personaje
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { 
+      name, 
+      description, 
+      generateReference = false,
+      traits 
+    } = body;
+
+    if (!name) {
+      return NextResponse.json(
+        { success: false, error: "El nombre del personaje es requerido" },
+        { status: 400 }
+      );
+    }
+
+    await ensureDir();
+
+    let referenceImage = null;
+    let characterTraits = traits;
+
+    // Generar imagen de referencia si se solicita
+    if (generateReference) {
+      try {
+        const zai = await ZAI.create();
+
+        // Crear prompt detallado para el personaje
+        const characterPrompt = `Character reference sheet: ${name}. ${description || "Original character"}. Full body view, multiple angles (front, side, back), consistent character design, clear details, neutral pose, white background, character turnaround, reference sheet style. Professional character design, consistent facial features, consistent body proportions.`;
+
+        const response = await zai.images.generations.create({
+          prompt: characterPrompt,
+          size: "1344x768" // Horizontal para el reference sheet
+        });
+
+        const imageBase64 = response.data[0]?.base64;
+        if (imageBase64) {
+          const filename = `character_${name.toLowerCase().replace(/\s+/g, "_")}_${Date.now()}.png`;
+          const filepath = path.join(CHARACTERS_DIR, filename);
+          const buffer = Buffer.from(imageBase64, "base64");
+          await fs.writeFile(filepath, buffer);
+          referenceImage = `/download/characters/${filename}`;
+        }
+
+        // Si no se proporcionaron traits, extraerlos con IA
+        if (!traits) {
+          const traitsResponse = await zai.chat.completions.create({
+            messages: [
+              {
+                role: "system",
+                content: "Eres un experto en diseño de personajes. Extrae los rasgos físicos clave del personaje para mantener consistencia en futuras generaciones. Responde SOLO en formato JSON con: { \"face\": \"\", \"body\": \"\", \"hair\": \"\", \"clothing\": \"\", \"colors\": \"\", \"distinctive\": \"\" }"
+              },
+              {
+                role: "user",
+                content: `Personaje: ${name}. Descripción: ${description || "Original character"}`
+              }
+            ]
+          });
+
+          const traitsText = traitsResponse.choices[0]?.message?.content || "";
+          try {
+            const jsonMatch = traitsText.match(/\{[\s\S]*\}/);
+            if (jsonMatch) {
+              characterTraits = jsonMatch[0];
+            }
+          } catch {
+            characterTraits = JSON.stringify({ description: description || "Original character" });
+          }
+        }
+
+      } catch (genError) {
+        console.error("Error generando referencia:", genError);
+        // Continuar sin imagen de referencia
+      }
+    }
+
+    // Crear personaje en BD
+    const character = await db.character.create({
+      data: {
+        name,
+        description: description || null,
+        referenceImage,
+        traits: characterTraits || JSON.stringify({ name, description })
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      character,
+      message: `Personaje "${name}" creado exitosamente`
+    });
+
+  } catch (error) {
+    console.error("Error creating character:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear personaje" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Actualizar personaje
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, name, description, traits } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID del personaje requerido" },
+        { status: 400 }
+      );
+    }
+
+    const character = await db.character.update({
+      where: { id },
+      data: {
+        name: name || undefined,
+        description: description || undefined,
+        traits: traits || undefined,
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      character
+    });
+
+  } catch (error) {
+    console.error("Error updating character:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al actualizar personaje" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar personaje
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    await db.character.delete({
+      where: { id }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Personaje eliminado"
+    });
+
+  } catch (error) {
+    console.error("Error deleting character:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar personaje" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/content/route.ts

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+
+// GET - Listar todo el contenido
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get("type");
+    const platform = searchParams.get("platform");
+    const status = searchParams.get("status");
+    const limit = parseInt(searchParams.get("limit") || "50");
+
+    const where: Record<string, unknown> = {};
+    if (type) where.type = type;
+    if (platform) where.platform = platform;
+    if (status) where.status = status;
+
+    const contents = await db.content.findMany({
+      where,
+      include: {
+        character: true,
+        censorFlags: true,
+      },
+      orderBy: { createdAt: "desc" },
+      take: limit,
+    });
+
+    // Estadísticas
+    const stats = {
+      total: await db.content.count(),
+      images: await db.content.count({ where: { type: "image" } }),
+      videos: await db.content.count({ where: { type: "video" } }),
+      pending: await db.content.count({ where: { status: "pending" } }),
+      processing: await db.content.count({ where: { status: "processing" } }),
+      completed: await db.content.count({ where: { status: "completed" } }),
+      failed: await db.content.count({ where: { status: "failed" } }),
+    };
+
+    return NextResponse.json({
+      success: true,
+      contents,
+      stats
+    });
+
+  } catch (error) {
+    console.error("Error fetching content:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener contenido" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar contenido
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    // Eliminar flags de censura asociados
+    await db.censorFlag.deleteMany({
+      where: { contentId: id }
+    });
+
+    // Eliminar contenido
+    await db.content.delete({
+      where: { id }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Contenido eliminado"
+    });
+
+  } catch (error) {
+    console.error("Error deleting content:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar contenido" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/generate/image/route.ts

@@ -0,0 +1,237 @@
+import { NextRequest, NextResponse } from "next/server";
+import ZAI from "z-ai-web-dev-sdk";
+import { db } from "@/lib/db";
+import fs from "fs/promises";
+import path from "path";
+
+const DOWNLOAD_DIR = path.join(process.cwd(), "download", "images");
+
+// Asegurar directorio existe
+async function ensureDir() {
+  try {
+    await fs.mkdir(DOWNLOAD_DIR, { recursive: true });
+  } catch {
+    // ya existe
+  }
+}
+
+// Reglas de censura por plataforma
+const CENSOR_RULES: Record<string, string[]> = {
+  youtube: [
+    "no nudity",
+    "no sexual content",
+    "no graphic violence",
+    "family friendly"
+  ],
+  tiktok: [
+    "no nudity",
+    "no sexual suggestiveness",
+    "no graphic violence",
+    "no self-harm content",
+    "age appropriate"
+  ],
+  instagram: [
+    "no nudity",
+    "no graphic violence",
+    "artistic content acceptable with moderation",
+    "no self-harm imagery"
+  ],
+  twitter: [
+    "content warning if sensitive",
+    "no illegal content"
+  ],
+  general: [
+    "safe for work",
+    "no explicit content"
+  ]
+};
+
+// Aplicar filtros de censura al prompt
+function applyCensorFilter(prompt: string, platform: string): string {
+  const rules = CENSOR_RULES[platform] || CENSOR_RULES.general;
+  const censorAdditions = rules.map(rule => `(${rule})`).join(", ");
+  return `${prompt}, ${censorAdditions}`;
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { 
+      prompt, 
+      optimizedPrompt,
+      platform = "general",
+      character,
+      style = "realistic",
+      size = "1024x1024",
+      saveToDb = true,
+      projectId
+    } = body;
+
+    if (!prompt && !optimizedPrompt) {
+      return NextResponse.json(
+        { success: false, error: "Se requiere un prompt" },
+        { status: 400 }
+      );
+    }
+
+    await ensureDir();
+
+    // Usar el prompt optimizado si está disponible
+    let finalPrompt = optimizedPrompt || prompt;
+
+    // Aplicar filtros de censura según plataforma
+    finalPrompt = applyCensorFilter(finalPrompt, platform);
+
+    // Añadir estilo si se especifica
+    if (style && style !== "realistic") {
+      const styleAdditions: Record<string, string> = {
+        anime: "anime style, manga aesthetic, vibrant colors, cel shading",
+        realistic: "photorealistic, highly detailed, 8K, professional photography",
+        artistic: "digital art, artistic style, creative interpretation, masterpiece",
+        "oil-painting": "oil painting style, classical art, brush strokes, museum quality",
+        sketch: "pencil sketch, hand drawn, artistic lines, detailed shading",
+        "3d": "3D render, octane render, cinema 4D, volumetric lighting"
+      };
+      if (styleAdditions[style]) {
+        finalPrompt = `${finalPrompt}, ${styleAdditions[style]}`;
+      }
+    }
+
+    // Añadir referencia de personaje si existe
+    if (character) {
+      finalPrompt = `${finalPrompt}, character: ${character}`;
+    }
+
+    console.log("🖼️ Generando imagen con prompt:", finalPrompt.substring(0, 100) + "...");
+
+    // Crear registro en BD si se solicita
+    let contentRecord = null;
+    if (saveToDb) {
+      contentRecord = await db.content.create({
+        data: {
+          type: "image",
+          title: prompt.substring(0, 50),
+          description: prompt,
+          prompt: prompt,
+          optimizedPrompt: finalPrompt,
+          platform: platform,
+          status: "processing",
+          projectId: projectId || null,
+        }
+      });
+    }
+
+    try {
+      // Generar imagen con z-ai-web-dev-sdk
+      const zai = await ZAI.create();
+      const response = await zai.images.generations.create({
+        prompt: finalPrompt,
+        size: size as "1024x1024" | "768x1344" | "864x1152" | "1344x768" | "1152x864" | "1440x720" | "720x1440"
+      });
+
+      const imageBase64 = response.data[0]?.base64;
+
+      if (!imageBase64) {
+        throw new Error("No se recibió imagen del generador");
+      }
+
+      // Guardar imagen en disco
+      const filename = `image_${Date.now()}.png`;
+      const filepath = path.join(DOWNLOAD_DIR, filename);
+      const buffer = Buffer.from(imageBase64, "base64");
+      await fs.writeFile(filepath, buffer);
+
+      // Actualizar registro en BD
+      if (contentRecord) {
+        await db.content.update({
+          where: { id: contentRecord.id },
+          data: {
+            status: "completed",
+            filePath: `/download/images/${filename}`,
+            thumbnail: `/download/images/${filename}`,
+          }
+        });
+      }
+
+      // Crear tarea de agente
+      await db.agentTask.create({
+        data: {
+          type: "generate_image",
+          status: "completed",
+          input: prompt,
+          output: `Imagen generada: ${filename}`,
+          completedAt: new Date(),
+        }
+      });
+
+      return NextResponse.json({
+        success: true,
+        image: {
+          id: contentRecord?.id,
+          filename,
+          url: `/download/images/${filename}`,
+          base64: imageBase64.substring(0, 50) + "...", // Preview del base64
+          prompt: finalPrompt,
+          platform,
+          size
+        }
+      });
+
+    } catch (genError) {
+      console.error("Error generando imagen:", genError);
+      
+      if (contentRecord) {
+        await db.content.update({
+          where: { id: contentRecord.id },
+          data: {
+            status: "failed",
+            metadata: JSON.stringify({ error: String(genError) })
+          }
+        });
+      }
+
+      return NextResponse.json(
+        { success: false, error: "Error al generar imagen: " + String(genError) },
+        { status: 500 }
+      );
+    }
+
+  } catch (error) {
+    console.error("Error en generate image:", error);
+    return NextResponse.json(
+      { success: false, error: "Error interno del servidor" },
+      { status: 500 }
+    );
+  }
+}
+
+// Listar imágenes generadas
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const platform = searchParams.get("platform");
+    const limit = parseInt(searchParams.get("limit") || "20");
+
+    const where: Record<string, unknown> = { type: "image" };
+    if (platform) where.platform = platform;
+
+    const images = await db.content.findMany({
+      where,
+      orderBy: { createdAt: "desc" },
+      take: limit,
+    });
+
+    return NextResponse.json({
+      success: true,
+      images,
+      total: images.length
+    });
+
+  } catch (error) {
+    console.error("Error listing images:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al listar imágenes" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/generate/video/route.ts

@@ -0,0 +1,221 @@
+import { NextRequest, NextResponse } from "next/server";
+import ZAI from "z-ai-web-dev-sdk";
+import { db } from "@/lib/db";
+import fs from "fs/promises";
+import path from "path";
+
+const DOWNLOAD_DIR = path.join(process.cwd(), "download", "videos");
+
+async function ensureDir() {
+  try {
+    await fs.mkdir(DOWNLOAD_DIR, { recursive: true });
+  } catch {
+    // ya existe
+  }
+}
+
+// Reglas de censura para video
+const VIDEO_CENSOR_RULES: Record<string, string> = {
+  youtube: "family friendly content, no violence, no nudity, safe for all ages",
+  tiktok: "age appropriate, no dangerous challenges, no suggestive content",
+  instagram: "community guidelines compliant, no graphic content, artistic nudity only with warning",
+  twitter: "may include sensitive content warning, no illegal content",
+  general: "safe for work, appropriate content"
+};
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      prompt,
+      optimizedPrompt,
+      platform = "general",
+      style = "cinematic",
+      duration = "short",
+      aspectRatio = "16:9",
+      saveToDb = true,
+      projectId
+    } = body;
+
+    if (!prompt && !optimizedPrompt) {
+      return NextResponse.json(
+        { success: false, error: "Se requiere un prompt para el video" },
+        { status: 400 }
+      );
+    }
+
+    await ensureDir();
+
+    // Construir prompt final
+    let finalPrompt = optimizedPrompt || prompt;
+
+    // Añadir reglas de censura
+    const censorRule = VIDEO_CENSOR_RULES[platform] || VIDEO_CENSOR_RULES.general;
+    finalPrompt = `${finalPrompt}. Content requirements: ${censorRule}`;
+
+    // Añadir estilo de video
+    const videoStyles: Record<string, string> = {
+      cinematic: "cinematic quality, professional camera work, dramatic lighting",
+      documentary: "documentary style, natural lighting, authentic feel",
+      animation: "animated style, smooth motion, vibrant colors",
+      commercial: "commercial quality, polished, product showcase",
+      social: "social media optimized, engaging, quick cuts"
+    };
+
+    if (videoStyles[style]) {
+      finalPrompt = `${finalPrompt}, ${videoStyles[style]}`;
+    }
+
+    // Añadir duración
+    const durationAdditions: Record<string, string> = {
+      short: "short clip, 5-10 seconds",
+      medium: "medium length, 15-30 seconds",
+      long: "extended content, 1-2 minutes"
+    };
+    finalPrompt = `${finalPrompt}, ${durationAdditions[duration] || durationAdditions.short}`;
+
+    console.log("🎥 Generando video con prompt:", finalPrompt.substring(0, 100) + "...");
+
+    // Crear registro en BD
+    let contentRecord = null;
+    if (saveToDb) {
+      contentRecord = await db.content.create({
+        data: {
+          type: "video",
+          title: prompt.substring(0, 50),
+          description: prompt,
+          prompt: prompt,
+          optimizedPrompt: finalPrompt,
+          platform: platform,
+          status: "processing",
+          projectId: projectId || null,
+          metadata: JSON.stringify({ style, duration, aspectRatio })
+        }
+      });
+    }
+
+    try {
+      const zai = await ZAI.create();
+
+      // Generar video con z-ai-web-dev-sdk
+      const response = await zai.videos.generations.create({
+        prompt: finalPrompt,
+      });
+
+      // El SDK de video devuelve información del video generado
+      const videoData = response.data?.[0];
+      
+      if (!videoData) {
+        throw new Error("No se recibió video del generador");
+      }
+
+      // Guardar video si viene en base64 o URL
+      let filename = `video_${Date.now()}.mp4`;
+      let filepath = path.join(DOWNLOAD_DIR, filename);
+      let videoUrl = "";
+
+      if (videoData.base64) {
+        const buffer = Buffer.from(videoData.base64, "base64");
+        await fs.writeFile(filepath, buffer);
+        videoUrl = `/download/videos/${filename}`;
+      } else if (videoData.url) {
+        videoUrl = videoData.url;
+        filename = videoData.url.split("/").pop() || filename;
+      }
+
+      // Actualizar registro
+      if (contentRecord) {
+        await db.content.update({
+          where: { id: contentRecord.id },
+          data: {
+            status: "completed",
+            filePath: videoUrl,
+            thumbnail: videoData.thumbnail || null,
+          }
+        });
+      }
+
+      // Crear tarea de agente
+      await db.agentTask.create({
+        data: {
+          type: "generate_video",
+          status: "completed",
+          input: prompt,
+          output: `Video generado: ${filename}`,
+          completedAt: new Date(),
+        }
+      });
+
+      return NextResponse.json({
+        success: true,
+        video: {
+          id: contentRecord?.id,
+          filename,
+          url: videoUrl,
+          thumbnail: videoData.thumbnail,
+          prompt: finalPrompt,
+          platform,
+          style,
+          duration,
+          aspectRatio
+        }
+      });
+
+    } catch (genError) {
+      console.error("Error generando video:", genError);
+
+      if (contentRecord) {
+        await db.content.update({
+          where: { id: contentRecord.id },
+          data: {
+            status: "failed",
+            metadata: JSON.stringify({ error: String(genError) })
+          }
+        });
+      }
+
+      return NextResponse.json(
+        { success: false, error: "Error al generar video: " + String(genError) },
+        { status: 500 }
+      );
+    }
+
+  } catch (error) {
+    console.error("Error en generate video:", error);
+    return NextResponse.json(
+      { success: false, error: "Error interno del servidor" },
+      { status: 500 }
+    );
+  }
+}
+
+// Listar videos
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const platform = searchParams.get("platform");
+    const limit = parseInt(searchParams.get("limit") || "20");
+
+    const where: Record<string, unknown> = { type: "video" };
+    if (platform) where.platform = platform;
+
+    const videos = await db.content.findMany({
+      where,
+      orderBy: { createdAt: "desc" },
+      take: limit,
+    });
+
+    return NextResponse.json({
+      success: true,
+      videos,
+      total: videos.length
+    });
+
+  } catch (error) {
+    console.error("Error listing videos:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al listar videos" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/influencers/route.ts

@@ -0,0 +1,450 @@
+import { NextRequest, NextResponse } from "next/server";
+import ZAI from "z-ai-web-dev-sdk";
+import { prisma } from "@/lib/db";
+
+// Base de datos de influencers IA famosos (para análisis y referencia)
+const FAMOUS_AI_INFLUENCERS = [
+  {
+    name: "Lil Miquela",
+    handle: "@lilmiquela",
+    platform: "Instagram",
+    followers: 2500000,
+    engagement: 3.2,
+    niche: "Fashion & Lifestyle",
+    style: {
+      aesthetic: "Hyperrealistic CGI",
+      tone: "Gen Z influencer",
+      themes: ["fashion", "music", "social issues"]
+    },
+    contentTypes: ["photos", "videos", "stories"],
+    postingSchedule: { frequency: "3-4 per week", bestTimes: ["12:00", "18:00", "21:00"] },
+    visualStyle: { colors: ["warm", "urban"], lighting: "golden hour", editing: "cinematic" },
+    monetizationType: ["brand deals", "merchandise"],
+    signatureElements: ["freckles", "bangs", "streetwear"],
+    petCompanion: false,
+    lessons: [
+      "Consistencia visual es clave",
+      "Narrativa de vida ficticia pero creíble",
+      "Colaboraciones con marcas reales",
+      "Activismo social para conectar con audiencia"
+    ]
+  },
+  {
+    name: "Rozy",
+    handle: "@rozy.gram",
+    platform: "Instagram",
+    followers: 180000,
+    engagement: 4.5,
+    niche: "Fashion & K-pop style",
+    style: {
+      aesthetic: "Korean beauty standard",
+      tone: "Friendly and trendy",
+      themes: ["fashion", "beauty", "travel"]
+    },
+    contentTypes: ["photos", "reels", "stories"],
+    postingSchedule: { frequency: "5-7 per week", bestTimes: ["11:00", "19:00"] },
+    visualStyle: { colors: ["pastel", "bright"], lighting: "soft", editing: "k-beauty" },
+    monetizationType: ["brand ambassador", "product placement"],
+    signatureElements: ["k-pop fashion", "dance videos", "korean makeup"],
+    petCompanion: true,
+    petType: "small dog",
+    lessons: [
+      "Aprovechar tendencias K-pop",
+      "Contenido de baile viral",
+      "Estética cuidada y consistente",
+      "Mascota como elemento diferenciador"
+    ]
+  },
+  {
+    name: "Imma",
+    handle: "@imma.gram",
+    platform: "Instagram",
+    followers: 390000,
+    engagement: 3.8,
+    niche: "Fashion & Art",
+    style: {
+      aesthetic: "Japanese street style",
+      tone: "Artistic and edgy",
+      themes: ["fashion", "art", "technology"]
+    },
+    contentTypes: ["photos", "reels", "collaborations"],
+    postingSchedule: { frequency: "4-5 per week", bestTimes: ["10:00", "20:00"] },
+    visualStyle: { colors: ["neon accents", "monochrome"], lighting: "dramatic", editing: "artistic" },
+    monetizationType: ["brand collaborations", "NFTs", "art exhibitions"],
+    signatureElements: ["pink bob hair", "futuristic fashion", "art installations"],
+    petCompanion: false,
+    lessons: [
+      "Fusionar arte y moda",
+      "Colaboraciones con artistas",
+      "Presencia en eventos físicos",
+      "Estética japonesa distintiva"
+    ]
+  },
+  {
+    name: "Noonoouri",
+    handle: "@noonoouri",
+    platform: "Instagram",
+    followers: 450000,
+    engagement: 2.9,
+    niche: "High Fashion",
+    style: {
+      aesthetic: "Cartoon-like avatar",
+      tone: "Playful luxury",
+      themes: ["fashion", "luxury brands", "lifestyle"]
+    },
+    contentTypes: ["photos", "animations", "brand content"],
+    postingSchedule: { frequency: "3-4 per week", bestTimes: ["15:00", "21:00"] },
+    visualStyle: { colors: ["pastel", "luxury gold"], lighting: "studio", editing: "animated" },
+    monetizationType: ["luxury brand deals", "fashion campaigns"],
+    signatureElements: ["big eyes", "designer outfits", "fashion week content"],
+    petCompanion: false,
+    lessons: [
+      "Estilo único de caricatura",
+      "Asociaciones con marcas de lujo",
+      "Presencia en fashion weeks",
+      "Contenido aspiracional"
+    ]
+  },
+  {
+    name: "Bermuda",
+    handle: "@bermudaisbae",
+    platform: "Instagram",
+    followers: 220000,
+    engagement: 4.1,
+    niche: "Music & Pop Culture",
+    style: {
+      aesthetic: "Edgy and provocative",
+      tone: "Sassy and confident",
+      themes: ["music", "pop culture", "fashion"]
+    },
+    contentTypes: ["photos", "music videos", "controversial posts"],
+    postingSchedule: { frequency: "2-3 per week", bestTimes: ["18:00", "22:00"] },
+    visualStyle: { colors: ["dark", "neon"], lighting: "moody", editing: "music video style" },
+    monetizationType: ["music releases", "brand deals"],
+    signatureElements: ["brunette", "edgy style", "music collaborations"],
+    petCompanion: false,
+    lessons: [
+      "Personalidad controversial genera engagement",
+      "Crossovers con otros influencers IA",
+      "Contenido musical original",
+      "Narrativa de 'villana' atractiva"
+    ]
+  },
+  {
+    name: "Shudu",
+    handle: "@shudu.gram",
+    platform: "Instagram",
+    followers: 230000,
+    engagement: 3.5,
+    niche: "High Fashion & Beauty",
+    style: {
+      aesthetic: "Hyperrealistic dark-skinned model",
+      tone: "Elegant and mysterious",
+      themes: ["fashion", "beauty", "diversity"]
+    },
+    contentTypes: ["photos", "editorials", "brand campaigns"],
+    postingSchedule: { frequency: "3-4 per week", bestTimes: ["14:00", "20:00"] },
+    visualStyle: { colors: ["rich tones", "gold accents"], lighting: "dramatic", editing: "editorial" },
+    monetizationType: ["fashion campaigns", "brand ambassador"],
+    signatureElements: ["dark skin", "high fashion poses", "editorial style"],
+    petCompanion: false,
+    lessons: [
+      "Representación y diversidad",
+      "Estética editorial de alta moda",
+      "Colaboraciones con diseñadores",
+      "Misterio y elegancia"
+    ]
+  },
+  {
+    name: "Knox Frost",
+    handle: "@knoxfrost",
+    platform: "Instagram",
+    followers: 110000,
+    engagement: 5.2,
+    niche: "Gaming & Lifestyle",
+    style: {
+      aesthetic: "Male influencer next door",
+      tone: "Casual and relatable",
+      themes: ["gaming", "tech", "lifestyle"]
+    },
+    contentTypes: ["photos", "stories", "gaming content"],
+    postingSchedule: { frequency: "4-5 per week", bestTimes: ["16:00", "21:00"] },
+    visualStyle: { colors: ["gaming neon", "casual"], lighting: "natural", editing: "minimal" },
+    monetizationType: ["gaming partnerships", "tech reviews"],
+    signatureElements: ["glasses", "casual style", "gaming setup"],
+    petCompanion: true,
+    petType: "cat",
+    lessons: [
+      "Nichos específicos funcionan",
+      "Contenido relatable",
+      "Mascota para engagement",
+      "Presencia en comunidades gaming"
+    ]
+  },
+  {
+    name: "Ayla",
+    handle: "@ayla_virtual",
+    platform: "TikTok",
+    followers: 850000,
+    engagement: 8.3,
+    niche: "Dance & Lifestyle",
+    style: {
+      aesthetic: "Gen Z dancer",
+      tone: "Energetic and fun",
+      themes: ["dance", "trends", "lifestyle"]
+    },
+    contentTypes: ["dance videos", "trending content", "duets"],
+    postingSchedule: { frequency: "daily", bestTimes: ["12:00", "18:00", "22:00"] },
+    visualStyle: { colors: ["vibrant", "trendy"], lighting: "ring light", editing: "tiktok style" },
+    monetizationType: ["brand deals", "live gifts"],
+    signatureElements: ["dance moves", "trend participation", "duets"],
+    petCompanion: true,
+    petType: "small dog",
+    lessons: [
+      "Participar en trends rápidamente",
+      "Alta frecuencia de publicación",
+      "Duets con otros creadores",
+      "Mascota en videos aumenta engagement"
+    ]
+  }
+];
+
+// GET - Obtener influencers IA de referencia
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const niche = searchParams.get("niche");
+    const platform = searchParams.get("platform");
+    const withPets = searchParams.get("withPets");
+
+    let influencers = [...FAMOUS_AI_INFLUENCERS];
+
+    // Filtrar por nicho
+    if (niche) {
+      influencers = influencers.filter(i =>
+        i.niche.toLowerCase().includes(niche.toLowerCase()) ||
+        i.style.themes.some(t => t.toLowerCase().includes(niche.toLowerCase()))
+      );
+    }
+
+    // Filtrar por plataforma
+    if (platform) {
+      influencers = influencers.filter(i =>
+        i.platform.toLowerCase() === platform.toLowerCase()
+      );
+    }
+
+    // Filtrar por si tienen mascota
+    if (withPets === "true") {
+      influencers = influencers.filter(i => i.petCompanion);
+    }
+
+    // Obtener de la base de datos también
+    const dbInfluencers = await prisma.aIInfluencer.findMany({
+      where: { isActive: true }
+    });
+
+    return NextResponse.json({
+      success: true,
+      influencers,
+      customInfluencers: dbInfluencers,
+      total: influencers.length + dbInfluencers.length
+    });
+
+  } catch (error) {
+    console.error("Error fetching influencers:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener influencers" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Analizar y extraer estrategias de influencers IA
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { targetNiche, targetPlatform, includePets, analyzeStyle } = body;
+
+    const zai = await ZAI.create();
+
+    // Filtrar influencers relevantes
+    let relevantInfluencers = FAMOUS_AI_INFLUENCERS.filter(i => {
+      if (targetPlatform && i.platform.toLowerCase() !== targetPlatform.toLowerCase()) return false;
+      if (includePets === false && i.petCompanion) return false;
+      if (includePets === true && !i.petCompanion) return false;
+      return true;
+    });
+
+    // Análisis con IA para extraer patrones
+    const analysisPrompt = `Analiza estos influencers IA exitosos y extrae estrategias aplicables para un nuevo influencer en el nicho "${targetNiche || "general"}":
+
+${JSON.stringify(relevantInfluencers.slice(0, 5), null, 2)}
+
+Proporciona:
+1. Patrones de contenido más efectivos
+2. Estilos visuales que funcionan
+3. Estrategias de engagement
+4. Horarios óptimos de publicación
+5. Elementos distintivos recomendados
+${includePets ? "6. Cómo integrar una mascota de forma natural" : ""}
+7. Errores comunes a evitar
+8. Estrategias de monetización recomendadas
+
+Responde en JSON con esta estructura:
+{
+  "contentPatterns": [{"pattern": "", "effectiveness": 0-10, "platform": ""}],
+  "visualStyles": [{"style": "", "elements": [], "appeal": ""}],
+  "engagementStrategies": [{"strategy": "", "execution": ""}],
+  "postingSchedule": {"frequency": "", "bestTimes": [], "timezone": ""},
+  "signatureElements": [{"element": "", "uniqueness": "", "implementation": ""}],
+  ${includePets ? '"petIntegration": [{"tip": "", "contentTypes": []}],': ''}
+  "mistakes": [{"mistake": "", "solution": ""}],
+  "monetizationRecommendations": [{"method": "", "potential": "", "steps": ""}],
+  "viralPotential": {"score": 0-100, "factors": []}
+}`;
+
+    const completion = await zai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content: "Eres un experto en marketing de influencers y análisis de tendencias. Proporciona análisis detallados y accionables."
+        },
+        {
+          role: "user",
+          content: analysisPrompt
+        }
+      ],
+      temperature: 0.7,
+      max_tokens: 3000,
+    });
+
+    let analysis;
+    try {
+      const response = completion.choices[0]?.message?.content || "";
+      const match = response.match(/\{[\s\S]*\}/);
+      if (match) {
+        analysis = JSON.parse(match[0]);
+      }
+    } catch {
+      analysis = { raw: completion.choices[0]?.message?.content };
+    }
+
+    // Generar recomendaciones personalizadas
+    const personalizationPrompt = `Basado en el análisis anterior, genera un plan de contenido específico para un nuevo influencer IA en el nicho "${targetNiche || "lifestyle"}" ${includePets ? "con una mascota" : ""}.
+
+Incluye:
+1. Concepto único del influencer
+2. Estilo visual recomendado
+3. 10 ideas de contenido para la primera semana
+4. Bio y descripción sugerida
+5. Hashtags recomendados
+
+Responde en JSON con:
+{
+  "character": {"name": "", "personality": "", "backstory": "", "visualDescription": ""},
+  "visualStyle": {"aesthetic": "", "colors": [], "lighting": "", "editing": ""},
+  "contentIdeas": [{"day": 1, "type": "", "description": "", "hook": ""}],
+  "bio": "",
+  "hashtags": [],
+  "uniqueSellingPoints": []
+}`;
+
+    const personalization = await zai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content: "Eres un experto en crear influencers IA. Genera conceptos únicos y memorables."
+        },
+        {
+          role: "user",
+          content: personalizationPrompt
+        }
+      ],
+      temperature: 0.8,
+      max_tokens: 2000,
+    });
+
+    let characterConcept;
+    try {
+      const response = personalization.choices[0]?.message?.content || "";
+      const match = response.match(/\{[\s\S]*\}/);
+      if (match) {
+        characterConcept = JSON.parse(match[0]);
+      }
+    } catch {
+      characterConcept = { raw: personalization.choices[0]?.message?.content };
+    }
+
+    return NextResponse.json({
+      success: true,
+      referenceInfluencers: relevantInfluencers.map(i => ({
+        name: i.name,
+        handle: i.handle,
+        followers: i.followers,
+        engagement: i.engagement,
+        niche: i.niche,
+        petCompanion: i.petCompanion,
+        petType: i.petType,
+        keyLessons: i.lessons.slice(0, 3)
+      })),
+      analysis,
+      characterConcept,
+      timestamp: new Date().toISOString()
+    });
+
+  } catch (error) {
+    console.error("Error analyzing influencers:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al analizar influencers" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Guardar influencer personalizado
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      name, handle, platform, followers, engagement, niche,
+      style, contentTypes, postingSchedule, visualStyle,
+      monetizationType, signatureElements, petCompanion, petType,
+      analysis, lessons
+    } = body;
+
+    const influencer = await prisma.aIInfluencer.create({
+      data: {
+        name,
+        handle,
+        platform,
+        followers,
+        engagement,
+        niche,
+        style: JSON.stringify(style),
+        contentTypes: JSON.stringify(contentTypes),
+        postingSchedule: JSON.stringify(postingSchedule),
+        visualStyle: JSON.stringify(visualStyle),
+        monetizationType: JSON.stringify(monetizationType),
+        signatureElements: JSON.stringify(signatureElements),
+        petCompanion: petCompanion || false,
+        petType,
+        analysis: analysis ? JSON.stringify(analysis) : null,
+        lessons: lessons ? JSON.stringify(lessons) : null,
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      influencer,
+      message: "Influencer guardado correctamente"
+    });
+
+  } catch (error) {
+    console.error("Error saving influencer:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al guardar influencer" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/monetization/route.ts

@@ -0,0 +1,372 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+
+// Configuración legal de cada plataforma
+const PLATFORM_CONFIGS = {
+  onlyfans: {
+    name: "OnlyFans",
+    type: "subscription",
+    url: "https://onlyfans.com",
+    feePercentage: 20,
+    legalTerms: {
+      ageRequirement: 18,
+      contentTypes: ["adult", "lifestyle", "fitness", "art"],
+      prohibitedContent: ["illegal content", "non-consensual", "underage"],
+      verificationRequired: true,
+      taxReporting: true,
+      payoutSchedule: "weekly"
+    },
+    contentRules: {
+      adultContent: "allowed",
+      nudity: "allowed",
+      explicit: "allowed_with_verification",
+      copyright: "must_own_or_license"
+    }
+  },
+  patreon: {
+    name: "Patreon",
+    type: "subscription",
+    url: "https://patreon.com",
+    feePercentage: 12,
+    legalTerms: {
+      ageRequirement: 18,
+      contentTypes: ["art", "music", "podcasts", "videos", "writing", "gaming"],
+      prohibitedContent: ["adult content with real people", "hate speech", "illegal content"],
+      verificationRequired: true,
+      taxReporting: true,
+      payoutSchedule: "monthly"
+    },
+    contentRules: {
+      adultContent: "restricted",
+      nudity: "allowed_with_warning",
+      explicit: "not_allowed",
+      copyright: "must_own_or_license"
+    }
+  },
+  fansly: {
+    name: "Fansly",
+    type: "mixed",
+    url: "https://fansly.com",
+    feePercentage: 20,
+    legalTerms: {
+      ageRequirement: 18,
+      contentTypes: ["adult", "lifestyle", "creator"],
+      prohibitedContent: ["illegal content", "non-consensual", "underage"],
+      verificationRequired: true,
+      taxReporting: true,
+      payoutSchedule: "weekly"
+    },
+    contentRules: {
+      adultContent: "allowed",
+      nudity: "allowed",
+      explicit: "allowed_with_verification",
+      copyright: "must_own_or_license"
+    }
+  },
+  fanvue: {
+    name: "Fanvue",
+    type: "subscription",
+    url: "https://fanvue.com",
+    feePercentage: 15,
+    legalTerms: {
+      ageRequirement: 18,
+      contentTypes: ["adult", "fitness", "lifestyle", "music", "art"],
+      prohibitedContent: ["illegal content", "non-consensual", "underage"],
+      verificationRequired: true,
+      taxReporting: true,
+      payoutSchedule: "weekly"
+    },
+    contentRules: {
+      adultContent: "allowed",
+      nudity: "allowed",
+      explicit: "allowed_with_verification",
+      copyright: "must_own_or_license"
+    }
+  },
+  justforfans: {
+    name: "JustForFans",
+    type: "mixed",
+    url: "https://justfor.fans",
+    feePercentage: 20,
+    legalTerms: {
+      ageRequirement: 18,
+      contentTypes: ["adult"],
+      prohibitedContent: ["illegal content", "non-consensual", "underage"],
+      verificationRequired: true,
+      taxReporting: true,
+      payoutSchedule: "weekly"
+    },
+    contentRules: {
+      adultContent: "allowed",
+      nudity: "allowed",
+      explicit: "allowed_with_verification",
+      copyright: "must_own_or_license"
+    }
+  },
+  kofi: {
+    name: "Ko-fi",
+    type: "tips",
+    url: "https://ko-fi.com",
+    feePercentage: 0,
+    legalTerms: {
+      ageRequirement: 13,
+      contentTypes: ["art", "commissions", "digital products", "memberships"],
+      prohibitedContent: ["adult content", "illegal content", "hate speech"],
+      verificationRequired: false,
+      taxReporting: false,
+      payoutSchedule: "instant"
+    },
+    contentRules: {
+      adultContent: "not_allowed",
+      nudity: "not_allowed",
+      explicit: "not_allowed",
+      copyright: "must_own_or_license"
+    }
+  },
+  gumroad: {
+    name: "Gumroad",
+    type: "ppv",
+    url: "https://gumroad.com",
+    feePercentage: 10,
+    legalTerms: {
+      ageRequirement: 13,
+      contentTypes: ["digital products", "courses", "memberships", "software"],
+      prohibitedContent: ["illegal content", "hate speech"],
+      verificationRequired: false,
+      taxReporting: true,
+      payoutSchedule: "weekly"
+    },
+    contentRules: {
+      adultContent: "restricted",
+      nudity: "allowed_with_warning",
+      explicit: "not_allowed",
+      copyright: "must_own_or_license"
+    }
+  },
+  instagram: {
+    name: "Instagram",
+    type: "free",
+    url: "https://instagram.com",
+    feePercentage: 0,
+    legalTerms: {
+      ageRequirement: 13,
+      contentTypes: ["photos", "reels", "stories", "lives"],
+      prohibitedContent: ["nudity", "violence", "hate speech", "illegal content"],
+      verificationRequired: false,
+      taxReporting: false,
+      payoutSchedule: "none"
+    },
+    contentRules: {
+      adultContent: "not_allowed",
+      nudity: "not_allowed",
+      explicit: "not_allowed",
+      copyright: "must_own_or_license"
+    }
+  },
+  tiktok: {
+    name: "TikTok",
+    type: "free",
+    url: "https://tiktok.com",
+    feePercentage: 0,
+    legalTerms: {
+      ageRequirement: 13,
+      contentTypes: ["short videos", "live"],
+      prohibitedContent: ["nudity", "violence", "dangerous acts", "hate speech"],
+      verificationRequired: false,
+      taxReporting: false,
+      payoutSchedule: "none"
+    },
+    contentRules: {
+      adultContent: "not_allowed",
+      nudity: "not_allowed",
+      explicit: "not_allowed",
+      copyright: "must_own_or_license"
+    }
+  },
+  youtube: {
+    name: "YouTube",
+    type: "ad_revenue",
+    url: "https://youtube.com",
+    feePercentage: 45, // YouTube toma 45% de ad revenue
+    legalTerms: {
+      ageRequirement: 13,
+      contentTypes: ["videos", "shorts", "live", "community"],
+      prohibitedContent: ["nudity", "violence", "hate speech", "copyright violation"],
+      verificationRequired: true,
+      taxReporting: true,
+      payoutSchedule: "monthly"
+    },
+    contentRules: {
+      adultContent: "not_allowed",
+      nudity: "not_allowed",
+      explicit: "not_allowed",
+      copyright: "strict_enforcement"
+    }
+  }
+};
+
+// GET - Listar plataformas disponibles
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const type = searchParams.get("type"); // subscription, tips, ppv, free
+
+    // Obtener plataformas configuradas por el usuario
+    const userPlatforms = await db.monetizationPlatform.findMany({
+      include: {
+        _count: {
+          select: { posts: true, earnings: true, subscribers: true }
+        }
+      },
+      orderBy: { createdAt: "desc" }
+    });
+
+    // Filtrar por tipo si se especifica
+    let availablePlatforms = Object.entries(PLATFORM_CONFIGS).map(([key, config]) => ({
+      id: key,
+      ...config
+    }));
+
+    if (type) {
+      availablePlatforms = availablePlatforms.filter(p => p.type === type);
+    }
+
+    return NextResponse.json({
+      success: true,
+      userPlatforms,
+      availablePlatforms,
+      totalUserPlatforms: userPlatforms.length
+    });
+
+  } catch (error) {
+    console.error("Error fetching monetization platforms:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener plataformas" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Añadir/configurar plataforma
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { 
+      platformKey, 
+      accountId, 
+      accountName, 
+      apiKey,
+      isVerified 
+    } = body;
+
+    if (!platformKey || !PLATFORM_CONFIGS[platformKey as keyof typeof PLATFORM_CONFIGS]) {
+      return NextResponse.json(
+        { success: false, error: "Plataforma no válida" },
+        { status: 400 }
+      );
+    }
+
+    const config = PLATFORM_CONFIGS[platformKey as keyof typeof PLATFORM_CONFIGS];
+
+    // Crear o actualizar plataforma
+    const platform = await db.monetizationPlatform.create({
+      data: {
+        name: config.name,
+        type: config.type,
+        url: config.url,
+        apiKey: apiKey || null,
+        accountId: accountId || null,
+        accountName: accountName || null,
+        legalTerms: JSON.stringify(config.legalTerms),
+        contentRules: JSON.stringify(config.contentRules),
+        feePercentage: config.feePercentage,
+        payoutSchedule: config.legalTerms.payoutSchedule,
+        isVerified: isVerified || false,
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      platform,
+      legalInfo: config.legalTerms,
+      contentRules: config.contentRules,
+      message: `Plataforma ${config.name} configurada`
+    });
+
+  } catch (error) {
+    console.error("Error creating platform:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al configurar plataforma" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Actualizar plataforma
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, accountId, accountName, apiKey, isVerified, isActive } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID de plataforma requerido" },
+        { status: 400 }
+      );
+    }
+
+    const platform = await db.monetizationPlatform.update({
+      where: { id },
+      data: {
+        accountId: accountId || undefined,
+        accountName: accountName || undefined,
+        apiKey: apiKey || undefined,
+        isVerified: isVerified || undefined,
+        isActive: isActive !== undefined ? isActive : undefined,
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      platform
+    });
+
+  } catch (error) {
+    console.error("Error updating platform:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al actualizar plataforma" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar plataforma
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    await db.monetizationPlatform.delete({
+      where: { id }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Plataforma eliminada"
+    });
+
+  } catch (error) {
+    console.error("Error deleting platform:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar plataforma" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/pets/route.ts

@@ -0,0 +1,327 @@
+import { NextRequest, NextResponse } from "next/server";
+import ZAI from "z-ai-web-dev-sdk";
+import { prisma } from "@/lib/db";
+
+// Tipos de mascotas disponibles con características
+const PET_TYPES = {
+  dog: {
+    name: "Perro",
+    breeds: ["Golden Retriever", "Labrador", "French Bulldog", "Pomeranian", "Corgi", "Husky", "Poodle", "Chihuahua", "Yorkshire", "Beagle"],
+    personalities: ["juguetón", "leal", "energético", "calmado", "protector", "amigable"],
+    popularIn: ["lifestyle", "fitness", "family", "outdoor"],
+    engagementBoost: 35, // % de aumento de engagement promedio
+    accessories: ["collar", "bandana", "ropa para mascotas", "juguetes", "gafas"]
+  },
+  cat: {
+    name: "Gato",
+    breeds: ["Persa", "Siames", "Maine Coon", "British Shorthair", "Ragdoll", "Bengala", "Sphynx", "Scottish Fold"],
+    personalities: ["independiente", "afectuoso", "curioso", "perezoso", "juguetón", "elegante"],
+    popularIn: ["lifestyle", "cozy", "aesthetic", "gaming"],
+    engagementBoost: 28,
+    accessories: ["collar", "campanita", "torre para gatos", "cajas", "mantas"]
+  },
+  bird: {
+    name: "Pájaro",
+    breeds: ["Canario", "Periquito", "Cacatúa", "Loro", "Agapornis", "Guacamayo"],
+    personalities: ["cantor", "social", "inteligente", "tranquilo", "travieso"],
+    popularIn: ["nature", "music", "artistic"],
+    engagementBoost: 15,
+    accessories: ["jaula decorativa", "juguetes", "posadores"]
+  },
+  rabbit: {
+    name: "Conejo",
+    breeds: ["Holandés", "Mini Lop", "Rex", "Angora", "Enano"],
+    personalities: ["tierno", "curioso", "suave", "saltarín", "tranquilo"],
+    popularIn: ["cute", "aesthetic", "cozy"],
+    engagementBoost: 22,
+    accessories: ["moños", "ropa miniatura", "juguetes"]
+  },
+  hamster: {
+    name: "Hámster",
+    breeds: ["Sirio", "Enano Ruso", "Roborovski", "Chino"],
+    personalities: ["pequeño", "activo", "adorable", "curioso"],
+    popularIn: ["cute", "pets", "daily"],
+    engagementBoost: 18,
+    accessories: ["rueda", "bolas", "casitas"]
+  }
+};
+
+// GET - Obtener mascotas
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const characterId = searchParams.get("characterId");
+    const type = searchParams.get("type");
+
+    const where: Record<string, unknown> = { isActive: true };
+    if (characterId) where.characterId = characterId;
+    if (type) where.type = type;
+
+    const pets = await prisma.pet.findMany({
+      where,
+      include: {
+        character: {
+          select: { name: true }
+        }
+      },
+      orderBy: { createdAt: "desc" }
+    });
+
+    return NextResponse.json({
+      success: true,
+      pets,
+      petTypes: PET_TYPES,
+      total: pets.length
+    });
+
+  } catch (error) {
+    console.error("Error fetching pets:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener mascotas" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Crear mascota
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      name, type, breed, description, personality,
+      color, accessories, characterId, generateReference
+    } = body;
+
+    // Validar tipo de mascota
+    const petType = PET_TYPES[type as keyof typeof PET_TYPES];
+    if (!petType) {
+      return NextResponse.json(
+        { success: false, error: "Tipo de mascota no válido" },
+        { status: 400 }
+      );
+    }
+
+    let referenceImage = null;
+
+    // Generar imagen de referencia si se solicita
+    if (generateReference) {
+      const zai = await ZAI.create();
+
+      const prompt = `A ${breed || petType.name.toLowerCase()} ${type} named ${name}.
+${color ? `Color: ${color}.` : ""}
+${personality ? `Personality: ${personality}.` : ""}
+Style: High quality, photorealistic, social media ready, cute and appealing.
+Background: Soft, aesthetic, suitable for Instagram/TikTok.
+Pose: Natural and engaging, looking at camera or doing a cute action.`;
+
+      try {
+        const imageResponse = await zai.images.generations.create({
+          prompt,
+          size: "1024x1024"
+        });
+        referenceImage = imageResponse.data[0]?.base64;
+      } catch (imgError) {
+        console.error("Error generating pet image:", imgError);
+      }
+    }
+
+    const pet = await prisma.pet.create({
+      data: {
+        name,
+        type,
+        breed,
+        description,
+        personality,
+        color,
+        accessories: accessories ? JSON.stringify(accessories) : null,
+        traits: JSON.stringify({
+          typeInfo: petType,
+          engagementBoost: petType.engagementBoost
+        }),
+        referenceImage,
+        characterId
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      pet,
+      message: `Mascota "${name}" creada correctamente`,
+      engagementBoost: petType.engagementBoost
+    });
+
+  } catch (error) {
+    console.error("Error creating pet:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear mascota" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Actualizar mascota
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, ...updateData } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID de mascota requerido" },
+        { status: 400 }
+      );
+    }
+
+    // Si hay accessories o traits, convertir a JSON string
+    if (updateData.accessories && typeof updateData.accessories !== "string") {
+      updateData.accessories = JSON.stringify(updateData.accessories);
+    }
+    if (updateData.traits && typeof updateData.traits !== "string") {
+      updateData.traits = JSON.stringify(updateData.traits);
+    }
+
+    const pet = await prisma.pet.update({
+      where: { id },
+      data: updateData
+    });
+
+    return NextResponse.json({
+      success: true,
+      pet,
+      message: "Mascota actualizada correctamente"
+    });
+
+  } catch (error) {
+    console.error("Error updating pet:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al actualizar mascota" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar mascota
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID de mascota requerido" },
+        { status: 400 }
+      );
+    }
+
+    await prisma.pet.update({
+      where: { id },
+      data: { isActive: false }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Mascota eliminada correctamente"
+    });
+
+  } catch (error) {
+    console.error("Error deleting pet:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar mascota" },
+      { status: 500 }
+    );
+  }
+}
+
+// PATCH - Generar contenido con mascota
+export async function PATCH(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { petId, contentType, platform, theme } = body;
+
+    const pet = await prisma.pet.findUnique({
+      where: { id: petId },
+      include: { character: true }
+    });
+
+    if (!pet) {
+      return NextResponse.json(
+        { success: false, error: "Mascota no encontrada" },
+        { status: 404 }
+      );
+    }
+
+    const zai = await ZAI.create();
+
+    // Generar ideas de contenido con la mascota
+    const contentPrompt = `Genera ideas de contenido para una mascota:
+- Nombre: ${pet.name}
+- Tipo: ${pet.type}
+- Raza: ${pet.breed || "No especificada"}
+- Personalidad: ${pet.personality || "No especificada"}
+${pet.character ? `- Dueño: ${pet.character.name}` : ""}
+- Tipo de contenido: ${contentType || "foto"}
+- Plataforma: ${platform || "Instagram"}
+- Tema: ${theme || "lifestyle"}
+
+Proporciona:
+1. 5 ideas de contenido específicas con esta mascota
+2. Ganchos/hooks para cada idea
+3. Hashtags recomendados
+4. Mejor momento del día para publicar
+5. Elementos visuales sugeridos
+
+Responde en JSON:
+{
+  "contentIdeas": [{"title": "", "description": "", "hook": "", "cta": ""}],
+  "hashtags": [],
+  "bestPostingTime": "",
+  "visualElements": [],
+  "engagementTips": []
+}`;
+
+    const completion = await zai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content: "Eres un experto en contenido de mascotas para redes sociales. Genera ideas creativas y virales."
+        },
+        {
+          role: "user",
+          content: contentPrompt
+        }
+      ],
+      temperature: 0.8,
+      max_tokens: 2000,
+    });
+
+    let contentIdeas;
+    try {
+      const response = completion.choices[0]?.message?.content || "";
+      const match = response.match(/\{[\s\S]*\}/);
+      if (match) {
+        contentIdeas = JSON.parse(match[0]);
+      }
+    } catch {
+      contentIdeas = { raw: completion.choices[0]?.message?.content };
+    }
+
+    return NextResponse.json({
+      success: true,
+      pet: {
+        id: pet.id,
+        name: pet.name,
+        type: pet.type,
+        breed: pet.breed
+      },
+      contentIdeas,
+      engagementBoost: PET_TYPES[pet.type as keyof typeof PET_TYPES]?.engagementBoost || 20
+    });
+
+  } catch (error) {
+    console.error("Error generating pet content:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al generar contenido" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/posts/route.ts

@@ -0,0 +1,330 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+
+// GET - Listar publicaciones
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const status = searchParams.get("status");
+    const platform = searchParams.get("platform");
+    const type = searchParams.get("type");
+    const limit = parseInt(searchParams.get("limit") || "50");
+
+    const where: Record<string, unknown> = {};
+    if (status) where.status = status;
+    if (type) where.type = type;
+    if (platform) where.platformId = platform;
+
+    const posts = await db.post.findMany({
+      where,
+      include: {
+        content: true,
+        platform: true,
+        story: true,
+      },
+      orderBy: { scheduledAt: "asc" },
+      take: limit,
+    });
+
+    // Estadísticas
+    const stats = {
+      total: await db.post.count(),
+      draft: await db.post.count({ where: { status: "draft" } }),
+      scheduled: await db.post.count({ where: { status: "scheduled" } }),
+      published: await db.post.count({ where: { status: "published" } }),
+      failed: await db.post.count({ where: { status: "failed" } }),
+    };
+
+    // Próximas publicaciones
+    const upcoming = await db.post.findMany({
+      where: {
+        status: "scheduled",
+        scheduledAt: { gte: new Date() }
+      },
+      orderBy: { scheduledAt: "asc" },
+      take: 5,
+    });
+
+    return NextResponse.json({
+      success: true,
+      posts,
+      stats,
+      upcoming
+    });
+
+  } catch (error) {
+    console.error("Error fetching posts:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener publicaciones" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Crear nueva publicación
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      title,
+      caption,
+      type, // reel, photo, carousel, story, post
+      contentId,
+      platformId,
+      scheduledAt,
+      hashtags,
+      storyId,
+      autoGenerateCaption,
+      optimizeForPlatform,
+    } = body;
+
+    if (!type) {
+      return NextResponse.json(
+        { success: false, error: "El tipo de publicación es requerido" },
+        { status: 400 }
+      );
+    }
+
+    let finalCaption = caption;
+    let finalHashtags = hashtags;
+
+    // Generar caption con IA si se solicita
+    if (autoGenerateCaption && contentId) {
+      const content = await db.content.findUnique({
+        where: { id: contentId }
+      });
+
+      if (content) {
+        const zai = await ZAI.create();
+        const platform = await db.monetizationPlatform.findUnique({
+          where: { id: platformId }
+        });
+
+        const platformName = platform?.name || "general";
+        const platformRules = PLATFORM_RULES[platformName.toLowerCase()] || {};
+
+        const completion = await zai.chat.completions.create({
+          messages: [
+            {
+              role: "system",
+              content: `Eres un experto en marketing de contenidos para ${platformName}. 
+              Genera captions atractivos que:
+              ${platformRules.maxCaptionLength ? `- No excedan ${platformRules.maxCaptionLength} caracteres` : ''}
+              - Incluyan emojis relevantes
+              - Tengan un CTA (call to action) efectivo
+              - Sean ${platformRules.tone || 'profesionales pero cercanos'}
+              - Maximizen el engagement
+              ${platformRules.hashtagLimit ? `- Incluyan máximo ${platformRules.hashtagLimit} hashtags relevantes` : ''}`
+            },
+            {
+              role: "user",
+              content: `Genera un caption para este contenido:
+              Tipo: ${type}
+              Título: ${title || content.title}
+              Descripción: ${content.description || content.prompt}
+              Plataforma: ${platformName}`
+            }
+          ],
+          temperature: 0.8,
+        });
+
+        finalCaption = completion.choices[0]?.message?.content || caption;
+      }
+    }
+
+    // Optimizar hashtags si se solicita
+    if (optimizeForPlatform && !hashtags) {
+      const zai = await ZAI.create();
+      const platform = await db.monetizationPlatform.findUnique({
+        where: { id: platformId }
+      });
+
+      const completion = await zai.chat.completions.create({
+        messages: [
+          {
+            role: "system",
+            content: `Eres un experto en SEO de redes sociales. Genera hashtags optimizados.
+            Responde SOLO con un JSON array de hashtags sin el símbolo #.
+            Ejemplo: ["tendencias", "viral", "lifestyle"]`
+          },
+          {
+            role: "user",
+            content: `Genera hashtags para un ${type} en ${platform?.name || "redes sociales"}.
+            Tema: ${title || "contenido general"}
+            Máximo 10 hashtags.`
+          }
+        ],
+        temperature: 0.7,
+      });
+
+      try {
+        const response = completion.choices[0]?.message?.content || "[]";
+        const match = response.match(/\[[\s\S]*\]/);
+        if (match) {
+          finalHashtags = match[0];
+        }
+      } catch {
+        finalHashtags = "[]";
+      }
+    }
+
+    // Crear publicación
+    const post = await db.post.create({
+      data: {
+        title: title || null,
+        caption: finalCaption,
+        hashtags: finalHashtags,
+        type,
+        status: scheduledAt ? "scheduled" : "draft",
+        contentId: contentId || null,
+        platformId: platformId || null,
+        scheduledAt: scheduledAt ? new Date(scheduledAt) : null,
+        storyId: storyId || null,
+      },
+      include: {
+        content: true,
+        platform: true,
+      }
+    });
+
+    // Crear tarea de agente
+    await db.agentTask.create({
+      data: {
+        type: "create_post",
+        status: "completed",
+        input: `Crear ${type}: ${title || "sin título"}`,
+        output: `Post creado con ID: ${post.id}`,
+        completedAt: new Date(),
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      post,
+      message: scheduledAt 
+        ? `Publicación programada para ${new Date(scheduledAt).toLocaleString()}`
+        : "Publicación creada como borrador"
+    });
+
+  } catch (error) {
+    console.error("Error creating post:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear publicación" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Actualizar publicación
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, status, scheduledAt, caption, hashtags, publishedAt, engagementStats } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    const updateData: Record<string, unknown> = {};
+    if (status) updateData.status = status;
+    if (scheduledAt) updateData.scheduledAt = new Date(scheduledAt);
+    if (caption) updateData.caption = caption;
+    if (hashtags) updateData.hashtags = hashtags;
+    if (publishedAt) updateData.publishedAt = new Date(publishedAt);
+    if (engagementStats) updateData.engagementStats = engagementStats;
+
+    const post = await db.post.update({
+      where: { id },
+      data: updateData,
+    });
+
+    return NextResponse.json({
+      success: true,
+      post
+    });
+
+  } catch (error) {
+    console.error("Error updating post:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al actualizar publicación" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar publicación
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    await db.post.delete({
+      where: { id }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Publicación eliminada"
+    });
+
+  } catch (error) {
+    console.error("Error deleting post:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar publicación" },
+      { status: 500 }
+    );
+  }
+}
+
+// Reglas específicas por plataforma
+const PLATFORM_RULES: Record<string, {
+  maxCaptionLength?: number;
+  hashtagLimit?: number;
+  tone?: string;
+  bestPostingTimes?: string[];
+}> = {
+  instagram: {
+    maxCaptionLength: 2200,
+    hashtagLimit: 30,
+    tone: "inspirador y visual",
+    bestPostingTimes: ["11:00", "14:00", "19:00", "21:00"]
+  },
+  tiktok: {
+    maxCaptionLength: 300,
+    hashtagLimit: 5,
+    tone: "casual y divertido",
+    bestPostingTimes: ["09:00", "12:00", "19:00"]
+  },
+  youtube: {
+    maxCaptionLength: 5000,
+    tone: "profesional e informativo",
+    bestPostingTimes: ["15:00", "16:00", "17:00"]
+  },
+  onlyfans: {
+    maxCaptionLength: 1000,
+    tone: "personal y exclusivo",
+    bestPostingTimes: ["10:00", "18:00", "22:00"]
+  },
+  patreon: {
+    maxCaptionLength: 5000,
+    tone: "profesional y cercano",
+    bestPostingTimes: ["10:00", "14:00", "18:00"]
+  },
+  twitter: {
+    maxCaptionLength: 280,
+    hashtagLimit: 3,
+    tone: "conciso y directo",
+    bestPostingTimes: ["09:00", "12:00", "17:00", "20:00"]
+  }
+};

src/app/api/projects/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+
+// GET - Listar todos los proyectos
+export async function GET() {
+  try {
+    const projects = await db.project.findMany({
+      include: {
+        repos: true,
+        analyses: true,
+      },
+      orderBy: { createdAt: "desc" },
+    });
+
+    return NextResponse.json({
+      success: true,
+      projects,
+      total: projects.length,
+    });
+  } catch (error) {
+    console.error("Error fetching projects:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener proyectos" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Crear nuevo proyecto
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name, description, style } = body;
+
+    if (!name) {
+      return NextResponse.json(
+        { success: false, error: "El nombre del proyecto es requerido" },
+        { status: 400 }
+      );
+    }
+
+    const project = await db.project.create({
+      data: {
+        name,
+        description: description || null,
+        style: style || "default",
+        status: "active",
+      },
+    });
+
+    // Crear tarea de agente
+    await db.agentTask.create({
+      data: {
+        type: "generate",
+        status: "completed",
+        input: `Crear proyecto: ${name}`,
+        output: `Proyecto ${name} creado exitosamente`,
+        completedAt: new Date(),
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      project,
+      message: `Proyecto ${name} creado exitosamente`,
+    });
+  } catch (error) {
+    console.error("Error creating project:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear proyecto" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/prompt-engineer/route.ts

@@ -0,0 +1,216 @@
+import { NextRequest, NextResponse } from "next/server";
+import ZAI from "z-ai-web-dev-sdk";
+
+const PROMPT_ENGINEER_SYSTEM = `Eres un Ingeniero de Prompts experto especializado en optimizar solicitudes en lenguaje natural para diferentes sistemas de IA. Tu trabajo es analizar la intención del usuario y generar prompts optimizados.
+
+## TUS ESPECIALIDADES:
+
+### 1. GENERACIÓN DE IMÁGENES
+Para imágenes, optimiza prompts incluyendo:
+- Estilo artístico (realista, anime, oil painting, digital art, etc.)
+- Iluminación (golden hour, studio lighting, dramatic, soft)
+- Composición (close-up, full body, landscape, portrait)
+- Calidad y detalles (4K, highly detailed, masterpiece)
+- Mood/atmósfera (cinematic, vibrant, moody)
+- Para personas: descripción física detallada, ropa, pose, expresión
+
+### 2. GENERACIÓN DE VIDEOS
+Para videos, optimiza incluyendo:
+- Escena y ambiente
+- Movimientos de cámara (pan, zoom, tracking)
+- Acciones y transiciones
+- Duración estimada
+- Estilo visual
+- Audio/música sugerida
+
+### 3. ANÁLISIS DE CÓDIGO
+Para código, estructura la solicitud:
+- Lenguaje de programación
+- Framework específico si aplica
+- Funcionalidad requerida
+- Restricciones y requisitos
+- Nivel de complejidad
+
+### 4. CONTENIDO PARA REDES SOCIALES
+- Plataforma específica (YouTube, TikTok, Instagram, Twitter)
+- Tono y estilo
+- Longitud apropiada
+- Hashtags sugeridos
+- Horarios óptimos de publicación
+
+## REGLAS DE CENSURA POR PLATAFORMA:
+
+### YouTube:
+- Sin desnudez ni contenido sexual
+- Violencia moderada permitida con advertencia
+- Sin discurso de odio
+- Sin contenido ilegal
+- Lenguaje moderado permitido
+
+### TikTok:
+- Sin desnudez ni insinuaciones sexuales
+- Sin violencia gráfica
+- Sin contenido de autolesión
+- Sin desinformación
+- Música con licencia únicamente
+
+### Instagram:
+- Sin desnudez (arte clásico con moderación)
+- Sin violencia gráfica
+- Sin contenido de autolesión
+- Sin discurso de odio
+- Imágenes editadas deben etiquetarse
+
+### Twitter/X:
+- Mayor libertad pero con advertencias
+- Contenido sensible debe marcarse
+- Sin contenido ilegal
+
+## FORMATO DE RESPUESTA:
+
+Responde SIEMPRE en este formato JSON:
+{
+  "type": "image|video|code|text|social",
+  "optimizedPrompt": "El prompt optimizado y detallado",
+  "suggestions": ["sugerencia1", "sugerencia2"],
+  "censorWarnings": ["advertencia1"] o [],
+  "platformCompatible": ["youtube", "tiktok", ...],
+  "parameters": {
+    // Parámetros técnicos recomendados
+  }
+}`;
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { prompt, type, platform, character } = body;
+
+    if (!prompt) {
+      return NextResponse.json(
+        { success: false, error: "El prompt es requerido" },
+        { status: 400 }
+      );
+    }
+
+    const zai = await ZAI.create();
+
+    // Construir el contexto
+    let contextPrompt = prompt;
+    if (type) {
+      contextPrompt = `Tipo de tarea: ${type}\nSolicitud: ${prompt}`;
+    }
+    if (platform) {
+      contextPrompt += `\nPlataforma destino: ${platform}`;
+    }
+    if (character) {
+      contextPrompt += `\nPersonaje/Referencia: ${character}`;
+    }
+
+    const completion = await zai.chat.completions.create({
+      messages: [
+        { role: "system", content: PROMPT_ENGINEER_SYSTEM },
+        { role: "user", content: contextPrompt }
+      ],
+      temperature: 0.7,
+      max_tokens: 2000,
+    });
+
+    const response = completion.choices[0]?.message?.content || "";
+
+    // Intentar parsear el JSON de la respuesta
+    let parsedResponse;
+    try {
+      // Buscar JSON en la respuesta
+      const jsonMatch = response.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        parsedResponse = JSON.parse(jsonMatch[0]);
+      } else {
+        parsedResponse = {
+          type: type || "text",
+          optimizedPrompt: response,
+          suggestions: [],
+          censorWarnings: [],
+          platformCompatible: ["general"],
+          parameters: {}
+        };
+      }
+    } catch {
+      parsedResponse = {
+        type: type || "text",
+        optimizedPrompt: response,
+        suggestions: [],
+        censorWarnings: [],
+        platformCompatible: ["general"],
+        parameters: {}
+      };
+    }
+
+    return NextResponse.json({
+      success: true,
+      originalPrompt: prompt,
+      ...parsedResponse
+    });
+
+  } catch (error) {
+    console.error("Error in prompt engineer:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al procesar el prompt" },
+      { status: 500 }
+    );
+  }
+}
+
+// Endpoint para obtener sugerencias de prompts
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const category = searchParams.get("category") || "image";
+
+  const templates = {
+    image: [
+      {
+        name: "Retrato Profesional",
+        template: "Retrato profesional de [persona], iluminación de estudio, fondo neutro, alta calidad, expresión [emoción]",
+        variables: ["persona", "emoción"]
+      },
+      {
+        name: "Escena Cinematográfica",
+        template: "Escena cinematográfica de [descripción], iluminación golden hour, atmósfera [mood], estilo película, 4K",
+        variables: ["descripción", "mood"]
+      },
+      {
+        name: "Arte Digital",
+        template: "Arte digital de [sujeto], estilo [estilo], colores vibrantes, altamente detallado, trending on artstation",
+        variables: ["sujeto", "estilo"]
+      }
+    ],
+    video: [
+      {
+        name: "Video Promocional",
+        template: "Video promocional de [producto/servicio], duración 30 segundos, estilo moderno, transiciones suaves",
+        variables: ["producto/servicio"]
+      },
+      {
+        name: "Tutorial Animado",
+        template: "Video tutorial animado sobre [tema], estilo infografía, explicación paso a paso, iconos claros",
+        variables: ["tema"]
+      }
+    ],
+    code: [
+      {
+        name: "API REST",
+        template: "Crear API REST en [lenguaje] con [framework] para [funcionalidad], incluir validación y manejo de errores",
+        variables: ["lenguaje", "framework", "funcionalidad"]
+      },
+      {
+        name: "Componente UI",
+        template: "Componente [tipo] en React con TypeScript, props: [props], incluir estados y animaciones",
+        variables: ["tipo", "props"]
+      }
+    ]
+  };
+
+  return NextResponse.json({
+    success: true,
+    templates: templates[category as keyof typeof templates] || templates.image
+  });
+}

src/app/api/repos/[id]/route.ts

@@ -0,0 +1,114 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import fs from "fs/promises";
+import path from "path";
+
+const REPOS_DIR = path.join(process.cwd(), "repos");
+
+// GET - Obtener detalles de un repositorio específico
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+
+    const repo = await db.repo.findUnique({
+      where: { id },
+      include: {
+        project: true,
+        analyses: true,
+      },
+    });
+
+    if (!repo) {
+      return NextResponse.json(
+        { success: false, error: "Repositorio no encontrado" },
+        { status: 404 }
+      );
+    }
+
+    // Leer estructura de archivos del repo
+    const repoPath = path.join(REPOS_DIR, repo.name);
+    let files: string[] = [];
+    let readme = null;
+
+    try {
+      const entries = await fs.readdir(repoPath, { withFileTypes: true });
+      files = entries.map((e) => e.name);
+
+      // Intentar leer README
+      try {
+        const readmePath = path.join(repoPath, "README.md");
+        readme = await fs.readFile(readmePath, "utf-8");
+      } catch {
+        // No hay README
+      }
+    } catch {
+      // Directorio no accesible
+    }
+
+    return NextResponse.json({
+      success: true,
+      repo,
+      files,
+      readme,
+    });
+  } catch (error) {
+    console.error("Error fetching repo:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener repositorio" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar un repositorio
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+
+    const repo = await db.repo.findUnique({
+      where: { id },
+    });
+
+    if (!repo) {
+      return NextResponse.json(
+        { success: false, error: "Repositorio no encontrado" },
+        { status: 404 }
+      );
+    }
+
+    // Eliminar directorio del repositorio
+    const repoPath = path.join(REPOS_DIR, repo.name);
+    try {
+      await fs.rm(repoPath, { recursive: true, force: true });
+    } catch {
+      // Directorio no existe
+    }
+
+    // Eliminar análisis relacionados
+    await db.analysis.deleteMany({
+      where: { repoId: id },
+    });
+
+    // Eliminar de base de datos
+    await db.repo.delete({
+      where: { id },
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: `Repositorio ${repo.name} eliminado`,
+    });
+  } catch (error) {
+    console.error("Error deleting repo:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar repositorio" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/repos/route.ts

@@ -0,0 +1,126 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import { exec } from "child_process";
+import { promisify } from "util";
+import path from "path";
+import fs from "fs/promises";
+
+const execAsync = promisify(exec);
+
+const REPOS_DIR = path.join(process.cwd(), "repos");
+
+// Asegurar que el directorio existe
+async function ensureReposDir() {
+  try {
+    await fs.mkdir(REPOS_DIR, { recursive: true });
+  } catch (error) {
+    // Directorio ya existe
+  }
+}
+
+// GET - Listar todos los repositorios
+export async function GET() {
+  try {
+    const repos = await db.repo.findMany({
+      include: {
+        project: true,
+        analyses: true,
+      },
+      orderBy: { createdAt: "desc" },
+    });
+
+    return NextResponse.json({
+      success: true,
+      repos,
+      total: repos.length,
+    });
+  } catch (error) {
+    console.error("Error fetching repos:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener repositorios" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Clonar un nuevo repositorio
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { url, projectId } = body;
+
+    if (!url) {
+      return NextResponse.json(
+        { success: false, error: "URL del repositorio es requerida" },
+        { status: 400 }
+      );
+    }
+
+    // Extraer nombre del repo de la URL
+    const urlParts = url.replace(".git", "").split("/");
+    const name = urlParts[urlParts.length - 1] || "unknown-repo";
+
+    await ensureReposDir();
+    const targetPath = path.join(REPOS_DIR, name);
+
+    // Verificar si ya existe
+    try {
+      await fs.access(targetPath);
+      return NextResponse.json(
+        { success: false, error: "El repositorio ya existe" },
+        { status: 400 }
+      );
+    } catch {
+      // No existe, podemos clonar
+    }
+
+    // Clonar repositorio
+    try {
+      await execAsync(`git clone ${url} ${targetPath}`, {
+        timeout: 60000,
+      });
+    } catch (cloneError) {
+      console.error("Clone error:", cloneError);
+      return NextResponse.json(
+        { success: false, error: "Error al clonar el repositorio" },
+        { status: 500 }
+      );
+    }
+
+    // Guardar en base de datos
+    const repo = await db.repo.create({
+      data: {
+        url,
+        name,
+        status: "cloned",
+        projectId: projectId || null,
+      },
+      include: {
+        project: true,
+      },
+    });
+
+    // Crear tarea de agente
+    await db.agentTask.create({
+      data: {
+        type: "clone",
+        status: "completed",
+        input: url,
+        output: `Repositorio ${name} clonado exitosamente`,
+        completedAt: new Date(),
+      },
+    });
+
+    return NextResponse.json({
+      success: true,
+      repo,
+      message: `Repositorio ${name} clonado exitosamente`,
+    });
+  } catch (error) {
+    console.error("Error in POST repos:", error);
+    return NextResponse.json(
+      { success: false, error: "Error interno del servidor" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server";
+
+export async function GET() {
+  return NextResponse.json({ message: "Hello, world!" });
+}

src/app/api/storytelling/route.ts

@@ -0,0 +1,347 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db } from "@/lib/db";
+import ZAI from "z-ai-web-dev-sdk";
+
+const STORYTELLING_SYSTEM = `Eres un experto guionista de contenido digital especializado en crear narrativas atractivas para redes sociales y plataformas de monetización.
+
+## TUS ESPECIALIDADES:
+
+### 1. ESTRUCTURA NARRATIVA
+Cada historia debe tener:
+- **Hook inicial**: Gancho que capture la atención en los primeros 3 segundos
+- **Desarrollo**: Progresión emocional con picos y valles
+- **Cliffhanger**: Suspense que mantenga a la audiencia esperando más
+- **Resolución**: Satisfacción pero dejando puerta abierta
+
+### 2. TÉCNICAS DE ENGAGEMENT
+- Preguntas retóricas
+- Revelaciones progresivas
+- Conflictos emocionales
+- Personajes identificables
+- Giros inesperados
+- Calls to action sutiles
+
+### 3. OPTIMIZACIÓN POR PLATAFORMA
+- **Instagram Reels**: Historias de 15-60 seg, visual impactante
+- **TikTok**: Tendencias, humor, velocidad, authenticy
+- **YouTube**: Mayor profundidad, series, communities
+- **OnlyFans**: Exclusividad, conexión personal, behind the scenes
+- **Patreon**: Contenido premium, tutoriales, acceso VIP
+
+### 4. ESTRATEGIAS DE MONETIZACIÓN
+- Teasers gratuitos + contenido premium
+- Suscripción escalonada
+- Contenido exclusivo para tiers superiores
+- PPV (Pay Per View) para contenido especial
+- Fan engagement strategies
+
+### 5. TIPOS DE CONTENIDO
+- **Lifestyle**: Day in the life, routines, personal growth
+- **Drama**: Relationships, conflicts, resolutions
+- **Tutorial**: How-to, tips, behind the scenes
+- **Challenge**: Personal challenges, transformations
+- **ASMR/Relaxation**: Calm content, soothing narratives
+- **Entertainment**: Comedy, reactions, trends
+
+## FORMATO DE RESPUESTA:
+Responde siempre en JSON con esta estructura:
+{
+  "title": "Título de la historia",
+  "synopsis": "Resumen breve",
+  "genre": "género",
+  "targetAudience": "audiencia objetivo",
+  "tone": "tono narrativo",
+  "totalEpisodes": número,
+  "episodes": [
+    {
+      "episodeNum": 1,
+      "title": "Título episodio",
+      "hook": "Gancho inicial",
+      "content": "Contenido del episodio",
+      "cliffhanger": "Suspense final",
+      "bestPostingTime": "hora",
+      "estimatedEngagement": "alto/medio/bajo",
+      "monetizationTip": "Sugerencia de monetización"
+    }
+  ],
+  "monetizationStrategy": {
+    "freeTeasers": [números de episodios gratis],
+    "premiumContent": [números de episodios premium],
+    "suggestedPlatform": "plataforma recomendada",
+    "pricingStrategy": "estrategia de precios"
+  },
+  "hashtags": ["hashtags relevantes"],
+  "bestPostingSchedule": ["horarios recomendados"]
+}`;
+
+// GET - Listar historias
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const status = searchParams.get("status");
+    const genre = searchParams.get("genre");
+
+    const where: Record<string, unknown> = {};
+    if (status) where.status = status;
+    if (genre) where.genre = genre;
+
+    const stories = await db.story.findMany({
+      where,
+      include: {
+        episodes: {
+          orderBy: { episodeNum: "asc" }
+        },
+        analytics: true,
+        _count: {
+          select: { posts: true, episodes: true }
+        }
+      },
+      orderBy: { createdAt: "desc" }
+    });
+
+    // Géneros disponibles
+    const genres = [
+      { id: "romance", name: "Romance", description: "Historias de amor y relaciones" },
+      { id: "drama", name: "Drama", description: "Conflictos emocionales intensos" },
+      { id: "comedy", name: "Comedia", description: "Contenido humorístico" },
+      { id: "thriller", name: "Thriller", description: "Suspenso y misterio" },
+      { id: "lifestyle", name: "Lifestyle", description: "Vida cotidiana y rutinas" },
+      { id: "fitness", name: "Fitness", description: "Transformaciones y salud" },
+      { id: "beauty", name: "Beauty", description: "Belleza y cuidados" },
+      { id: "cooking", name: "Cooking", description: "Cocina y recetas" },
+      { id: "travel", name: "Travel", description: "Viajes y aventuras" },
+      { id: "gaming", name: "Gaming", description: "Videojuegos y streaming" },
+      { id: "education", name: "Educación", description: "Contenido educativo" },
+      { id: "asmr", name: "ASMR", description: "Relajación y calma" },
+    ];
+
+    return NextResponse.json({
+      success: true,
+      stories,
+      genres,
+      total: stories.length
+    });
+
+  } catch (error) {
+    console.error("Error fetching stories:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener historias" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Crear nueva historia con IA
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      prompt,
+      genre,
+      targetAudience,
+      tone,
+      totalEpisodes,
+      platform,
+      characterIds,
+      monetizationGoal
+    } = body;
+
+    if (!prompt) {
+      return NextResponse.json(
+        { success: false, error: "El prompt es requerido" },
+        { status: 400 }
+      );
+    }
+
+    const zai = await ZAI.create();
+
+    // Generar historia completa con IA
+    const completion = await zai.chat.completions.create({
+      messages: [
+        { role: "system", content: STORYTELLING_SYSTEM },
+        { role: "user", content: `Crea una historia con los siguientes parámetros:
+        
+Concepto: ${prompt}
+${genre ? `Género: ${genre}` : ''}
+${targetAudience ? `Audiencia objetivo: ${targetAudience}` : ''}
+${tone ? `Tono: ${tone}` : ''}
+${totalEpisodes ? `Número de episodios: ${totalEpisodes}` : 'Número de episodios: 7'}
+${platform ? `Plataforma principal: ${platform}` : ''}
+${monetizationGoal ? `Objetivo de monetización: ${monetizationGoal}` : 'Objetivo: Maximizar suscriptores pagos'}
+
+Genera la historia completa con todos los episodios y estrategia de monetización.` }
+      ],
+      temperature: 0.8,
+      max_tokens: 6000,
+    });
+
+    const response = completion.choices[0]?.message?.content || "";
+
+    // Parsear respuesta
+    let storyData;
+    try {
+      const jsonMatch = response.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        storyData = JSON.parse(jsonMatch[0]);
+      }
+    } catch (parseError) {
+      console.error("Error parsing story:", parseError);
+      storyData = {
+        title: "Historia generada",
+        synopsis: prompt,
+        episodes: []
+      };
+    }
+
+    // Crear historia en BD
+    const story = await db.story.create({
+      data: {
+        title: storyData.title || "Nueva Historia",
+        description: storyData.synopsis || prompt,
+        genre: storyData.genre || genre || "lifestyle",
+        targetAudience: storyData.targetAudience || targetAudience || "general",
+        tone: storyData.tone || tone || "casual",
+        totalEpisodes: storyData.totalEpisodes || storyData.episodes?.length || 7,
+        characterIds: characterIds ? JSON.stringify(characterIds) : null,
+        monetizationStrategy: storyData.monetizationStrategy ? JSON.stringify(storyData.monetizationStrategy) : null,
+        status: "draft",
+      }
+    });
+
+    // Crear episodios
+    if (storyData.episodes && Array.isArray(storyData.episodes)) {
+      for (const ep of storyData.episodes) {
+        await db.storyEpisode.create({
+          data: {
+            storyId: story.id,
+            episodeNum: ep.episodeNum || storyData.episodes.indexOf(ep) + 1,
+            title: ep.title || `Episodio ${ep.episodeNum}`,
+            synopsis: ep.hook || null,
+            content: ep.content || "",
+            hook: ep.hook || null,
+            cliffhanger: ep.cliffhanger || null,
+            status: "draft",
+          }
+        });
+      }
+    }
+
+    // Crear analytics
+    await db.storyAnalytics.create({
+      data: {
+        storyId: story.id,
+      }
+    });
+
+    // Crear tarea de agente
+    await db.agentTask.create({
+      data: {
+        type: "create_story",
+        status: "completed",
+        input: prompt,
+        output: `Historia "${storyData.title}" creada con ${storyData.episodes?.length || 0} episodios`,
+        completedAt: new Date(),
+      }
+    });
+
+    // Obtener historia completa
+    const fullStory = await db.story.findUnique({
+      where: { id: story.id },
+      include: {
+        episodes: { orderBy: { episodeNum: "asc" } },
+        analytics: true
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      story: fullStory,
+      rawAIResponse: storyData,
+      message: `Historia "${storyData.title}" creada exitosamente`
+    });
+
+  } catch (error) {
+    console.error("Error creating story:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear historia" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Actualizar historia
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, status, currentEpisode } = body;
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    const story = await db.story.update({
+      where: { id },
+      data: {
+        status: status || undefined,
+        currentEpisode: currentEpisode || undefined,
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      story
+    });
+
+  } catch (error) {
+    console.error("Error updating story:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al actualizar historia" },
+      { status: 500 }
+    );
+  }
+}
+
+// DELETE - Eliminar historia
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get("id");
+
+    if (!id) {
+      return NextResponse.json(
+        { success: false, error: "ID requerido" },
+        { status: 400 }
+      );
+    }
+
+    // Eliminar episodios primero
+    await db.storyEpisode.deleteMany({
+      where: { storyId: id }
+    });
+
+    // Eliminar analytics
+    await db.storyAnalytics.deleteMany({
+      where: { storyId: id }
+    });
+
+    // Eliminar historia
+    await db.story.delete({
+      where: { id }
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: "Historia eliminada"
+    });
+
+  } catch (error) {
+    console.error("Error deleting story:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al eliminar historia" },
+      { status: 500 }
+    );
+  }
+}

src/app/api/trends/route.ts

@@ -0,0 +1,343 @@
+import { NextRequest, NextResponse } from "next/server";
+import ZAI from "z-ai-web-dev-sdk";
+import { prisma } from "@/lib/db";
+
+// Tendencias actuales por plataforma (datos simulados actualizados)
+const TRENDING_DATA = {
+  instagram: [
+    { name: "#aesthetic", type: "hashtag", volume: 2500000, growth: 15.5, category: "lifestyle" },
+    { name: "#reelsviral", type: "hashtag", volume: 1800000, growth: 22.3, category: "video" },
+    { name: "#lifestyle", type: "hashtag", volume: 3200000, growth: 8.2, category: "lifestyle" },
+    { name: "ASMR content", type: "topic", volume: 890000, growth: 45.2, category: "relaxation" },
+    { name: "Day in my life", type: "topic", volume: 1200000, growth: 18.7, category: "vlog" },
+    { name: "Get Ready With Me", type: "format", volume: 2100000, growth: 25.3, category: "beauty" },
+    { name: "Photo dumps", type: "format", volume: 1500000, growth: 32.1, category: "lifestyle" },
+    { name: "Pets content", type: "topic", volume: 980000, growth: 55.8, category: "pets" },
+  ],
+  tiktok: [
+    { name: "#fyp", type: "hashtag", volume: 15000000, growth: 5.2, category: "general" },
+    { name: "#viral", type: "hashtag", volume: 12000000, growth: 12.8, category: "general" },
+    { name: "Storytime", type: "topic", volume: 3500000, growth: 32.1, category: "narrative" },
+    { name: "GRWM", type: "format", volume: 2800000, growth: 28.5, category: "beauty" },
+    { name: "POV videos", type: "format", volume: 4200000, growth: 19.3, category: "creative" },
+    { name: "Dance challenges", type: "format", volume: 5200000, growth: 15.7, category: "dance" },
+    { name: "Pet reveals", type: "topic", volume: 1800000, growth: 48.3, category: "pets" },
+    { name: "Before/After", type: "format", volume: 2200000, growth: 35.2, category: "transformation" },
+  ],
+  youtube: [
+    { name: "Shorts", type: "format", volume: 8500000, growth: 25.6, category: "video" },
+    { name: "Tutorial", type: "topic", volume: 5200000, growth: 12.4, category: "education" },
+    { name: "Vlog", type: "topic", volume: 3800000, growth: 8.9, category: "lifestyle" },
+    { name: "Reaction videos", type: "format", volume: 2100000, growth: 15.7, category: "entertainment" },
+    { name: "ASMR", type: "topic", volume: 3200000, growth: 28.4, category: "relaxation" },
+    { name: "Pet compilations", type: "format", volume: 1500000, growth: 42.1, category: "pets" },
+  ],
+  onlyfans: [
+    { name: "Behind the scenes", type: "topic", volume: 450000, growth: 35.2, category: "exclusive" },
+    { name: "Exclusive content", type: "topic", volume: 380000, growth: 28.7, category: "premium" },
+    { name: "PPV specials", type: "format", volume: 220000, growth: 42.1, category: "monetization" },
+    { name: "Fan engagement", type: "topic", volume: 180000, growth: 55.3, category: "community" },
+    { name: "Pet content", type: "topic", volume: 95000, growth: 62.5, category: "niche" },
+  ]
+};
+
+// Estrategias virales conocidas
+const VIRAL_STRATEGIES = [
+  {
+    name: "Hook en 3 segundos",
+    description: "Captar atención en los primeros 3 segundos con algo visualmente impactante o una pregunta intrigante",
+    platforms: ["tiktok", "instagram", "youtube"],
+    contentType: "video",
+    successRate: 85,
+    elements: ["pregunta intrigante", "revelación parcial", "movimiento brusco", "sonido llamativo"]
+  },
+  {
+    name: "Storytime con suspenso",
+    description: "Narrar una historia personal manteniendo el suspenso hasta el final",
+    platforms: ["tiktok", "youtube"],
+    contentType: "video",
+    successRate: 78,
+    elements: ["gancho inicial", "pausas dramáticas", "cliffhanger", "resolución satisfactoria"]
+  },
+  {
+    name: "Transformación/Before & After",
+    description: "Mostrar un cambio dramático que genere curiosidad sobre el proceso",
+    platforms: ["instagram", "tiktok", "youtube"],
+    contentType: "reel",
+    successRate: 82,
+    elements: ["estado inicial", "proceso acelerado", "revelación final", "reacción"]
+  },
+  {
+    name: "Pet Reveal/Cameo",
+    description: "Incluir una mascota de forma natural en el contenido para aumentar engagement",
+    platforms: ["instagram", "tiktok"],
+    contentType: "any",
+    successRate: 88,
+    elements: ["mascota apareciendo", "interacción tierna", "momento cómico", "call to action con la mascota"]
+  },
+  {
+    name: "Controversia controlada",
+    description: "Plantear una opinión divisiva de forma respetuosa para generar debate",
+    platforms: ["tiktok", "twitter", "youtube"],
+    contentType: "opinion",
+    successRate: 72,
+    elements: ["opinion fuerte", "argumentos", "invitación al debate", "respuesta en comentarios"]
+  },
+  {
+    name: "Trend hopping",
+    description: "Participar en tendencias vigentes con un giro único personal",
+    platforms: ["tiktok", "instagram"],
+    contentType: "any",
+    successRate: 75,
+    elements: ["trend actual", "adaptación personal", "elemento sorpresa", "timing perfecto"]
+  },
+  {
+    name: "BTS/Exclusivo",
+    description: "Mostrar el detrás de cámaras o contenido que parece exclusivo",
+    platforms: ["instagram", "onlyfans", "youtube"],
+    contentType: "video",
+    successRate: 80,
+    elements: ["acceso VIP", "momentos espontáneos", "errores incluidos", "autenticidad"]
+  },
+  {
+    name: "Desafío/Reto",
+    description: "Crear o participar en un desafío que invite a la participación",
+    platforms: ["tiktok", "instagram"],
+    contentType: "reel",
+    successRate: 77,
+    elements: ["reglas claras", "ejemplo viral", "tag a amigos", "fácil de replicar"]
+  }
+];
+
+// GET - Obtener tendencias y estrategias
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const platform = searchParams.get("platform");
+    const type = searchParams.get("type");
+    const category = searchParams.get("category");
+    const includePets = searchParams.get("includePets") === "true";
+
+    let trends = [];
+
+    if (platform && TRENDING_DATA[platform as keyof typeof TRENDING_DATA]) {
+      trends = TRENDING_DATA[platform as keyof typeof TRENDING_DATA];
+    } else {
+      // Combinar todas las plataformas
+      trends = Object.entries(TRENDING_DATA).flatMap(([plat, data]) =>
+        data.map(t => ({ ...t, platform: plat }))
+      );
+    }
+
+    // Filtrar por tipo
+    if (type) {
+      trends = trends.filter(t => t.type === type);
+    }
+
+    // Filtrar por categoría
+    if (category) {
+      trends = trends.filter(t => t.category === category);
+    }
+
+    // Filtrar tendencias relacionadas con mascotas
+    if (includePets) {
+      trends = trends.filter(t =>
+        t.category === "pets" ||
+        t.name.toLowerCase().includes("pet") ||
+        t.name.toLowerCase().includes("dog") ||
+        t.name.toLowerCase().includes("cat")
+      );
+    }
+
+    // Ordenar por crecimiento
+    trends.sort((a, b) => b.growth - a.growth);
+
+    // Obtener estrategias virales relevantes
+    let strategies = [...VIRAL_STRATEGIES];
+    if (platform) {
+      strategies = strategies.filter(s =>
+        s.platforms.includes(platform.toLowerCase())
+      );
+    }
+    if (includePets) {
+      // Priorizar estrategias que funcionan con mascotas
+      strategies.sort((a, b) => {
+        const aPet = a.name.toLowerCase().includes("pet") ? 1 : 0;
+        const bPet = b.name.toLowerCase().includes("pet") ? 1 : 0;
+        return bPet - aPet;
+      });
+    }
+
+    // Generar ideas de contenido con IA para las tendencias principales
+    const zai = await ZAI.create();
+    const topTrends = trends.slice(0, 5);
+
+    const ideasResponse = await zai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content: `Eres un experto en marketing de contenidos viral. Genera ideas de contenido basadas en tendencias.
+${includePets ? "IMPORTANTE: Todas las ideas deben incluir una mascota como elemento central." : ""}
+Responde en JSON array con objetos {title, description, format, estimatedEngagement, viralScore, hook}.`
+        },
+        {
+          role: "user",
+          content: `Genera 5 ideas de contenido para estas tendencias: ${topTrends.map(t => t.name).join(", ")}
+Plataforma principal: ${platform || "todas"}
+${includePets ? "Incluir mascota en todas las ideas." : ""}`
+        }
+      ],
+      temperature: 0.8,
+    });
+
+    let contentIdeas = [];
+    try {
+      const match = ideasResponse.choices[0]?.message?.content?.match(/\[[\s\S]*\]/);
+      if (match) {
+        contentIdeas = JSON.parse(match[0]);
+      }
+    } catch {
+      contentIdeas = [];
+    }
+
+    return NextResponse.json({
+      success: true,
+      trends,
+      viralStrategies: strategies,
+      contentIdeas,
+      platform: platform || "all",
+      stats: {
+        totalTrends: trends.length,
+        topGrowth: trends[0]?.growth || 0,
+        avgGrowth: trends.reduce((acc, t) => acc + t.growth, 0) / trends.length || 0
+      }
+    });
+
+  } catch (error) {
+    console.error("Error fetching trends:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al obtener tendencias" },
+      { status: 500 }
+    );
+  }
+}
+
+// POST - Analizar tendencias con IA y generar plan viral
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { niche, platform, targetAudience, includePets, petType, daysToViral } = body;
+
+    const zai = await ZAI.create();
+
+    const completion = await zai.chat.completions.create({
+      messages: [
+        {
+          role: "system",
+          content: `Eres un analista de tendencias de redes sociales y experto en crear contenido viral. Analiza y predice tendencias para creadores de contenido.
+${includePets ? "El creador tiene una mascota que quiere integrar en su contenido." : ""}
+Responde en JSON con esta estructura:
+{
+  "currentTrends": [{"name", "type", "growth", "saturation"}],
+  "emergingTrends": [{"name", "type", "potential"}],
+  "contentGaps": [{"topic", "opportunity", "difficulty"}],
+  "recommendations": ["rec1", "rec2"],
+  "bestPostingTimes": ["time1", "time2"],
+  "hashtagStrategy": {"primary": [], "secondary": []},
+  "viralPlan": {
+    "week1": [{"day", "contentType", "topic", "hook"}],
+    "week2": [{"day", "contentType", "topic", "hook"}]
+  },
+  "petIntegration": ${includePets ? `[{"tip", "contentIdea", "engagementPotential"}]` : "null"},
+  "predictedViralPotential": 0-100,
+  "keySuccessFactors": []
+}`
+        },
+        {
+          role: "user",
+          content: `Analiza tendencias para:
+          Nicho: ${niche || "general"}
+          Plataforma: ${platform || "todas"}
+          Audiencia: ${targetAudience || "general"}
+          ${includePets ? `Incluir mascota tipo: ${petType || "perro/gato"}` : ""}
+          Días objetivo para viralizar: ${daysToViral || 14}`
+        }
+      ],
+      temperature: 0.7,
+      max_tokens: 3000,
+    });
+
+    const response = completion.choices[0]?.message?.content || "";
+    let analysis;
+    try {
+      const match = response.match(/\{[\s\S]*\}/);
+      if (match) {
+        analysis = JSON.parse(match[0]);
+      }
+    } catch {
+      analysis = { raw: response };
+    }
+
+    // Guardar análisis en la base de datos
+    await prisma.trend.create({
+      data: {
+        platform: platform || "all",
+        type: "analysis",
+        name: `Análisis ${niche || "general"} - ${new Date().toISOString().split('T')[0]}`,
+        description: `Análisis de tendencias para nicho: ${niche}`,
+        contentIdeas: JSON.stringify(analysis),
+        isActive: true
+      }
+    }).catch(() => {
+      // Ignorar errores de guardado
+    });
+
+    return NextResponse.json({
+      success: true,
+      analysis,
+      timestamp: new Date().toISOString()
+    });
+
+  } catch (error) {
+    console.error("Error analyzing trends:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al analizar tendencias" },
+      { status: 500 }
+    );
+  }
+}
+
+// PUT - Crear estrategia viral personalizada
+export async function PUT(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { name, platform, contentType, hook, structure, elements, estimatedReach, timeframe } = body;
+
+    const strategy = await prisma.viralStrategy.create({
+      data: {
+        name,
+        platform,
+        contentType,
+        hook,
+        structure: structure ? JSON.stringify(structure) : null,
+        elements: elements ? JSON.stringify(elements) : null,
+        estimatedReach,
+        timeframe,
+        isActive: true
+      }
+    });
+
+    return NextResponse.json({
+      success: true,
+      strategy,
+      message: "Estrategia viral creada correctamente"
+    });
+
+  } catch (error) {
+    console.error("Error creating viral strategy:", error);
+    return NextResponse.json(
+      { success: false, error: "Error al crear estrategia" },
+      { status: 500 }
+    );
+  }
+}

src/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,51 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+import { Toaster } from "@/components/ui/toaster";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Sofía Cloud - Multiagente AI",
+  description: "Sistema multiagente para análisis de código, gestión de repositorios y desarrollo asistido por IA.",
+  keywords: ["Sofía", "AI", "Next.js", "TypeScript", "Tailwind CSS", "shadcn/ui", "Agentes", "Código"],
+  authors: [{ name: "Sofía Cloud Team" }],
+  icons: {
+    icon: "/logo.svg",
+  },
+  openGraph: {
+    title: "Sofía Cloud - Multiagente AI",
+    description: "Sistema multiagente para análisis de código y desarrollo con IA",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Sofía Cloud - Multiagente AI",
+    description: "Sistema multiagente para análisis de código y desarrollo con IA",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
+      >
+        {children}
+        <Toaster />
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,1131 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+  Menu, X, Bot, Wand2, ImageIcon, Video, Users, FolderGit2, Shield,
+  RefreshCw, DollarSign, Clock, Film, Zap, TrendingUp, Calendar,
+  Play, Pause, Trash2, Plus, Send, Copy, Eye, Settings, ChevronRight,
+  CheckCircle2, AlertCircle, ExternalLink, CreditCard, Target, Sparkles,
+  Heart, PawPrint, Star, Users2, Lightbulb, Flame, Rocket
+} from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "sonner";
+
+// Types
+interface Content { id: string; type: string; title: string; status: string; platform: string; createdAt: string; }
+interface Character { id: string; name: string; description: string | null; referenceImage: string | null; }
+interface Platform { id: string; name: string; type: string; isActive: boolean; isVerified: boolean; }
+interface Post { id: string; title: string | null; type: string; status: string; scheduledAt: string | null; }
+interface Story { id: string; title: string; genre: string; status: string; totalEpisodes: number; }
+interface Automation { id: string; name: string; type: string; isActive: boolean; runCount: number; }
+interface Pet { id: string; name: string; type: string; breed: string | null; personality: string | null; referenceImage: string | null; }
+interface Influencer { name: string; handle: string; platform: string; followers: number; engagement: number; niche: string; petCompanion: boolean; petType?: string; keyLessons: string[]; }
+
+// API Helper
+async function apiFetch(endpoint: string, options: RequestInit = {}) {
+  const response = await fetch(`/api${endpoint}`, {
+    headers: { "Content-Type": "application/json", ...options.headers },
+    ...options,
+  });
+  return response.json();
+}
+
+export default function Dashboard() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState("prompt-engineer");
+  const [loading, setLoading] = useState(false);
+
+  // Prompt Engineer
+  const [userPrompt, setUserPrompt] = useState("");
+  const [promptType, setPromptType] = useState("image");
+  const [targetPlatform, setTargetPlatform] = useState("general");
+  const [optimizedPrompt, setOptimizedPrompt] = useState<Record<string, unknown> | null>(null);
+  const [promptLoading, setPromptLoading] = useState(false);
+
+  // Image Generation
+  const [imagePrompt, setImagePrompt] = useState("");
+  const [imageStyle, setImageStyle] = useState("realistic");
+  const [imagePlatform, setImagePlatform] = useState("general");
+  const [imageLoading, setImageLoading] = useState(false);
+
+  // Monetization
+  const [platforms, setPlatforms] = useState<Platform[]>([]);
+  const [selectedMonetizationPlatform, setSelectedMonetizationPlatform] = useState("");
+
+  // Posts
+  const [posts, setPosts] = useState<Post[]>([]);
+  const [postTitle, setPostTitle] = useState("");
+  const [postType, setPostType] = useState("reel");
+  const [postCaption, setPostCaption] = useState("");
+  const [scheduledTime, setScheduledTime] = useState("");
+
+  // Stories
+  const [stories, setStories] = useState<Story[]>([]);
+  const [storyPrompt, setStoryPrompt] = useState("");
+  const [storyGenre, setStoryGenre] = useState("lifestyle");
+  const [storyEpisodes, setStoryEpisodes] = useState(7);
+  const [storyLoading, setStoryLoading] = useState(false);
+
+  // Automation
+  const [automations, setAutomations] = useState<Automation[]>([]);
+  const [automationName, setAutomationName] = useState("");
+  const [automationType, setAutomationType] = useState("content_generation");
+
+  // Content & Characters
+  const [contents, setContents] = useState<Content[]>([]);
+  const [characters, setCharacters] = useState<Character[]>([]);
+
+  // Pets
+  const [pets, setPets] = useState<Pet[]>([]);
+  const [petName, setPetName] = useState("");
+  const [petType, setPetType] = useState("dog");
+  const [petBreed, setPetBreed] = useState("");
+  const [petPersonality, setPetPersonality] = useState("");
+  const [includePetInContent, setIncludePetInContent] = useState(false);
+  const [petLoading, setPetLoading] = useState(false);
+
+  // Influencers
+  const [influencers, setInfluencers] = useState<Influencer[]>([]);
+  const [influencerNiche, setInfluencerNiche] = useState("");
+  const [influencerPlatform, setInfluencerPlatform] = useState("");
+  const [influencerWithPets, setInfluencerWithPets] = useState(false);
+  const [influencerLoading, setInfluencerLoading] = useState(false);
+  const [influencerAnalysis, setInfluencerAnalysis] = useState<Record<string, unknown> | null>(null);
+  const [characterConcept, setCharacterConcept] = useState<Record<string, unknown> | null>(null);
+
+  // Trends
+  const [trends, setTrends] = useState<Record<string, unknown>[]>([]);
+  const [viralStrategies, setViralStrategies] = useState<Record<string, unknown>[]>([]);
+  const [contentIdeas, setContentIdeas] = useState<Record<string, unknown>[]>([]);
+  const [trendAnalysis, setTrendAnalysis] = useState<Record<string, unknown> | null>(null);
+  const [trendLoading, setTrendLoading] = useState(false);
+
+  // Stats
+  const [stats, setStats] = useState({ images: 0, videos: 0, stories: 0, automations: 0, pets: 0 });
+
+  // Load data
+  const loadData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [contentRes, platformsRes, postsRes, storiesRes, automationRes, petsRes] = await Promise.all([
+        apiFetch("/content"),
+        apiFetch("/monetization"),
+        apiFetch("/posts"),
+        apiFetch("/storytelling"),
+        apiFetch("/automation"),
+        apiFetch("/pets"),
+      ]);
+
+      if (contentRes.success) {
+        setContents(contentRes.contents);
+        setStats({
+          images: contentRes.stats?.images || 0,
+          videos: contentRes.stats?.videos || 0,
+          stories: storiesRes?.total || 0,
+          automations: automationRes?.stats?.total || 0,
+          pets: petsRes?.total || 0,
+        });
+      }
+      if (platformsRes.success) setPlatforms(platformsRes.userPlatforms);
+      if (postsRes.success) setPosts(postsRes.posts);
+      if (storiesRes.success) setStories(storiesRes.stories);
+      if (automationRes.success) setAutomations(automationRes.automations);
+      if (petsRes.success) setPets(petsRes.pets);
+    } catch {
+      toast.error("Error al cargar datos");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => { loadData(); }, [loadData]);
+
+  // Actions
+  const handleOptimizePrompt = async () => {
+    if (!userPrompt.trim()) { toast.error("Escribe un prompt"); return; }
+    setPromptLoading(true);
+    try {
+      const result = await apiFetch("/prompt-engineer", {
+        method: "POST",
+        body: JSON.stringify({ prompt: userPrompt, type: promptType, platform: targetPlatform }),
+      });
+      if (result.success) {
+        setOptimizedPrompt(result);
+        toast.success("Prompt optimizado");
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+    finally { setPromptLoading(false); }
+  };
+
+  const handleGenerateImage = async () => {
+    if (!userPrompt.trim()) { toast.error("Escribe un prompt"); return; }
+    setImageLoading(true);
+    try {
+      const result = await apiFetch("/generate/image", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt: userPrompt,
+          optimizedPrompt: optimizedPrompt?.optimizedPrompt,
+          platform: imagePlatform,
+          style: imageStyle,
+          includePet: includePetInContent,
+          petId: pets[0]?.id
+        }),
+      });
+      if (result.success) {
+        toast.success("Imagen generada");
+        loadData();
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+    finally { setImageLoading(false); }
+  };
+
+  const handleCreateStory = async () => {
+    if (!storyPrompt.trim()) { toast.error("Describe tu historia"); return; }
+    setStoryLoading(true);
+    try {
+      const result = await apiFetch("/storytelling", {
+        method: "POST",
+        body: JSON.stringify({
+          prompt: storyPrompt,
+          genre: storyGenre,
+          totalEpisodes: storyEpisodes,
+        }),
+      });
+      if (result.success) {
+        toast.success(`Historia "${result.story?.title}" creada`);
+        setStoryPrompt("");
+        loadData();
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+    finally { setStoryLoading(false); }
+  };
+
+  const handleCreatePost = async () => {
+    if (!postTitle.trim()) { toast.error("Añade un título"); return; }
+    try {
+      const result = await apiFetch("/posts", {
+        method: "POST",
+        body: JSON.stringify({
+          title: postTitle,
+          type: postType,
+          caption: postCaption,
+          scheduledAt: scheduledTime || null,
+          autoGenerateCaption: true,
+        }),
+      });
+      if (result.success) {
+        toast.success(scheduledTime ? "Post programado" : "Post creado");
+        setPostTitle(""); setPostCaption(""); setScheduledTime("");
+        loadData();
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+  };
+
+  const handleCreateAutomation = async () => {
+    if (!automationName.trim()) { toast.error("Dale un nombre"); return; }
+    try {
+      const result = await apiFetch("/automation", {
+        method: "POST",
+        body: JSON.stringify({
+          name: automationName,
+          type: automationType,
+          trigger: "schedule",
+          triggerConfig: { schedule: "daily:09:00" },
+          actions: [{ type: "generate_content", prompt: "Genera contenido de lifestyle" }],
+        }),
+      });
+      if (result.success) {
+        toast.success("Automatización creada");
+        setAutomationName("");
+        loadData();
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+  };
+
+  const handleToggleAutomation = async (id: string, currentStatus: boolean) => {
+    try {
+      await apiFetch("/automation", {
+        method: "PUT",
+        body: JSON.stringify({ id, isActive: !currentStatus }),
+      });
+      loadData();
+    } catch { toast.error("Error"); }
+  };
+
+  const handleCreatePet = async () => {
+    if (!petName.trim()) { toast.error("Dale un nombre a tu mascota"); return; }
+    setPetLoading(true);
+    try {
+      const result = await apiFetch("/pets", {
+        method: "POST",
+        body: JSON.stringify({
+          name: petName,
+          type: petType,
+          breed: petBreed || undefined,
+          personality: petPersonality || undefined,
+          generateReference: true
+        }),
+      });
+      if (result.success) {
+        toast.success(`Mascota "${petName}" creada (+${result.engagementBoost}% engagement)`);
+        setPetName(""); setPetBreed(""); setPetPersonality("");
+        loadData();
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+    finally { setPetLoading(false); }
+  };
+
+  const handleAnalyzeInfluencers = async () => {
+    setInfluencerLoading(true);
+    try {
+      const result = await apiFetch("/influencers", {
+        method: "POST",
+        body: JSON.stringify({
+          targetNiche: influencerNiche || "lifestyle",
+          targetPlatform: influencerPlatform || undefined,
+          includePets: influencerWithPets
+        }),
+      });
+      if (result.success) {
+        setInfluencers(result.referenceInfluencers || []);
+        setInfluencerAnalysis(result.analysis);
+        setCharacterConcept(result.characterConcept);
+        toast.success("Análisis completado");
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+    finally { setInfluencerLoading(false); }
+  };
+
+  const handleAnalyzeTrends = async () => {
+    setTrendLoading(true);
+    try {
+      const result = await apiFetch("/trends", {
+        method: "POST",
+        body: JSON.stringify({
+          niche: influencerNiche || "lifestyle",
+          platform: influencerPlatform || undefined,
+          includePets: includePetInContent,
+          daysToViral: 14
+        }),
+      });
+      if (result.success) {
+        setTrendAnalysis(result.analysis);
+        toast.success("Análisis de tendencias completado");
+      } else toast.error(result.error);
+    } catch { toast.error("Error"); }
+    finally { setTrendLoading(false); }
+  };
+
+  const loadTrends = async () => {
+    try {
+      const result = await apiFetch(`/trends?includePets=${includePetInContent}`);
+      if (result.success) {
+        setTrends(result.trends);
+        setViralStrategies(result.viralStrategies);
+        setContentIdeas(result.contentIdeas);
+      }
+    } catch { toast.error("Error cargando tendencias"); }
+  };
+
+  useEffect(() => {
+    if (activeTab === "trends") loadTrends();
+  }, [activeTab, includePetInContent]);
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text);
+    toast.success("Copiado");
+  };
+
+  const getStatusColor = (status: string) => {
+    const colors: Record<string, string> = {
+      completed: "bg-green-500/10 text-green-500",
+      published: "bg-green-500/10 text-green-500",
+      scheduled: "bg-blue-500/10 text-blue-500",
+      draft: "bg-slate-500/10 text-slate-400",
+      pending: "bg-yellow-500/10 text-yellow-500",
+      active: "bg-green-500/10 text-green-500",
+    };
+    return colors[status] || "bg-slate-500/10 text-slate-400";
+  };
+
+  const petTypes = [
+    { value: "dog", label: "🐕 Perro" },
+    { value: "cat", label: "🐱 Gato" },
+    { value: "bird", label: "🐦 Pájaro" },
+    { value: "rabbit", label: "🐰 Conejo" },
+    { value: "hamster", label: "🐹 Hámster" }
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 text-white">
+      {/* Sidebar */}
+      <AnimatePresence mode="wait">
+        {sidebarOpen && (
+          <motion.aside
+            initial={{ x: -280 }} animate={{ x: 0 }} exit={{ x: -280 }}
+            className="fixed left-0 top-0 h-full w-64 bg-slate-900/90 backdrop-blur-xl border-r border-slate-800 z-50"
+          >
+            <div className="p-5">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
+                  <Bot className="h-5 w-5" />
+                </div>
+                <div>
+                  <h1 className="text-lg font-bold bg-gradient-to-r from-violet-400 to-purple-400 bg-clip-text text-transparent">Sofía Cloud</h1>
+                  <p className="text-xs text-slate-400">Monetización Pro</p>
+                </div>
+              </div>
+
+              <nav className="space-y-1">
+                {[
+                  { id: "prompt-engineer", icon: Wand2, label: "Ingeniero IA" },
+                  { id: "images", icon: ImageIcon, label: "Imágenes" },
+                  { id: "videos", icon: Video, label: "Videos" },
+                  { id: "monetization", icon: DollarSign, label: "Monetización" },
+                  { id: "posts", icon: Calendar, label: "Publicaciones" },
+                  { id: "storytelling", icon: Film, label: "Storytelling" },
+                  { id: "automation", icon: Zap, label: "Automatización" },
+                  { id: "influencers", icon: Users2, label: "Influencers IA" },
+                  { id: "pets", icon: PawPrint, label: "Mascotas" },
+                  { id: "trends", icon: TrendingUp, label: "Tendencias" },
+                  { id: "content", icon: FolderGit2, label: "Contenido" },
+                ].map((item) => (
+                  <button key={item.id} onClick={() => setActiveTab(item.id)}
+                    className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-sm ${
+                      activeTab === item.id ? "bg-violet-500/20 text-violet-400 border border-violet-500/30" : "text-slate-400 hover:bg-slate-800"}`}>
+                    <item.icon className="h-4 w-4" /><span>{item.label}</span>
+                  </button>
+                ))}
+              </nav>
+            </div>
+
+            <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800">
+              <div className="grid grid-cols-2 gap-2 text-center text-xs">
+                <div><p className="text-xl font-bold text-violet-400">{stats.images}</p><p className="text-slate-500">Imágenes</p></div>
+                <div><p className="text-xl font-bold text-blue-400">{stats.videos}</p><p className="text-slate-500">Videos</p></div>
+                <div><p className="text-xl font-bold text-green-400">{stats.stories}</p><p className="text-slate-500">Historias</p></div>
+                <div><p className="text-xl font-bold text-amber-400">{stats.pets}</p><p className="text-slate-500">Mascotas</p></div>
+              </div>
+            </div>
+          </motion.aside>
+        )}
+      </AnimatePresence>
+
+      {/* Main */}
+      <div className={`transition-all duration-300 ${sidebarOpen ? "ml-64" : "ml-0"}`}>
+        <header className="sticky top-0 z-40 bg-slate-950/80 backdrop-blur-xl border-b border-slate-800">
+          <div className="flex items-center justify-between px-6 py-3">
+            <div className="flex items-center gap-3">
+              <Button variant="ghost" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)} className="text-slate-400">
+                {sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+              </Button>
+              <h2 className="text-lg font-semibold capitalize">{activeTab.replace("-", " ")}</h2>
+            </div>
+            <Button variant="outline" size="sm" onClick={loadData} disabled={loading} className="border-slate-700">
+              <RefreshCw className={`h-4 w-4 mr-2 ${loading ? "animate-spin" : ""}`} />Actualizar
+            </Button>
+          </div>
+        </header>
+
+        <main className="p-6">
+          {/* Prompt Engineer */}
+          {activeTab === "prompt-engineer" && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2"><Wand2 className="h-5 w-5 text-violet-400" />Ingeniero de Prompts</CardTitle>
+                  <CardDescription>Describe en lenguaje natural lo que quieres crear</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <Textarea placeholder="Ej: Quiero fotos de una mujer rubia en la playa para OnlyFans..." value={userPrompt} onChange={(e) => setUserPrompt(e.target.value)} className="bg-slate-800 border-slate-700 min-h-28" />
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label className="text-xs text-slate-400">Tipo</Label>
+                      <Select value={promptType} onValueChange={setPromptType}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="image">Imagen</SelectItem>
+                          <SelectItem value="video">Video</SelectItem>
+                          <SelectItem value="reel">Reel</SelectItem>
+                          <SelectItem value="carousel">Carrusel</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-slate-400">Plataforma</Label>
+                      <Select value={targetPlatform} onValueChange={setTargetPlatform}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="general">General</SelectItem>
+                          <SelectItem value="onlyfans">OnlyFans</SelectItem>
+                          <SelectItem value="patreon">Patreon</SelectItem>
+                          <SelectItem value="instagram">Instagram</SelectItem>
+                          <SelectItem value="tiktok">TikTok</SelectItem>
+                          <SelectItem value="youtube">YouTube</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  {pets.length > 0 && (
+                    <div className="flex items-center gap-2">
+                      <Switch checked={includePetInContent} onCheckedChange={setIncludePetInContent} />
+                      <Label className="text-sm text-slate-400">Incluir mascota en el contenido (+35% engagement)</Label>
+                    </div>
+                  )}
+                  <Button onClick={handleOptimizePrompt} disabled={promptLoading} className="w-full bg-violet-600 hover:bg-violet-700">
+                    {promptLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <Wand2 className="h-4 w-4 mr-2" />}Optimizar
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle>Prompt Optimizado</CardTitle></CardHeader>
+                <CardContent>
+                  {optimizedPrompt ? (
+                    <div className="space-y-3">
+                      <div className="p-3 rounded-lg bg-slate-800/50 border border-slate-700">
+                        <div className="flex justify-between mb-2">
+                          <Badge className="bg-violet-500/20 text-violet-400">{String(optimizedPrompt.type)}</Badge>
+                          <Button variant="ghost" size="sm" onClick={() => copyToClipboard(String(optimizedPrompt.optimizedPrompt))}><Copy className="h-4 w-4" /></Button>
+                        </div>
+                        <p className="text-sm whitespace-pre-wrap">{String(optimizedPrompt.optimizedPrompt)}</p>
+                      </div>
+                      <div className="flex gap-2">
+                        <Button onClick={handleGenerateImage} disabled={imageLoading} className="flex-1 bg-green-600 hover:bg-green-700">
+                          <ImageIcon className="h-4 w-4 mr-2" />Generar Imagen
+                        </Button>
+                        <Button onClick={() => setActiveTab("posts")} className="flex-1 bg-blue-600 hover:bg-blue-700">
+                          <Calendar className="h-4 w-4 mr-2" />Crear Post
+                        </Button>
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="text-center py-12 text-slate-400">
+                      <Wand2 className="h-12 w-12 mx-auto mb-3 opacity-50" /><p>El prompt optimizado aparecerá aquí</p>
+                    </div>
+                  )}
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Images */}
+          {activeTab === "images" && (
+            <Card className="bg-slate-900/50 border-slate-800">
+              <CardHeader><CardTitle className="flex items-center gap-2"><ImageIcon className="h-5 w-5 text-green-400" />Generar Imágenes</CardTitle></CardHeader>
+              <CardContent className="space-y-4">
+                <Textarea placeholder="Describe la imagen..." value={userPrompt} onChange={(e) => setUserPrompt(e.target.value)} className="bg-slate-800 border-slate-700" />
+                <div className="grid grid-cols-3 gap-4">
+                  <div>
+                    <Label className="text-xs text-slate-400">Estilo</Label>
+                    <Select value={imageStyle} onValueChange={setImageStyle}>
+                      <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="realistic">Realista</SelectItem>
+                        <SelectItem value="anime">Anime</SelectItem>
+                        <SelectItem value="artistic">Artístico</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div>
+                    <Label className="text-xs text-slate-400">Plataforma</Label>
+                    <Select value={imagePlatform} onValueChange={setImagePlatform}>
+                      <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="general">General</SelectItem>
+                        <SelectItem value="onlyfans">OnlyFans</SelectItem>
+                        <SelectItem value="instagram">Instagram</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                </div>
+                {pets.length > 0 && (
+                  <div className="flex items-center gap-2">
+                    <Switch checked={includePetInContent} onCheckedChange={setIncludePetInContent} />
+                    <Label className="text-sm text-slate-400">Incluir mascota ({pets[0]?.name})</Label>
+                  </div>
+                )}
+                <Button onClick={handleGenerateImage} disabled={imageLoading} className="w-full bg-green-600 hover:bg-green-700">
+                  {imageLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <ImageIcon className="h-4 w-4 mr-2" />}Generar
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Monetization */}
+          {activeTab === "monetization" && (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {[
+                { name: "OnlyFans", type: "subscription", fee: "20%", color: "from-blue-500 to-cyan-500", legal: "Adult content permitido" },
+                { name: "Patreon", type: "subscription", fee: "12%", color: "from-orange-500 to-red-500", legal: "Sin adult content real" },
+                { name: "Fansly", type: "mixed", fee: "20%", color: "from-purple-500 to-pink-500", legal: "Adult content permitido" },
+                { name: "Fanvue", type: "subscription", fee: "15%", color: "from-green-500 to-teal-500", legal: "Adult content permitido" },
+                { name: "Ko-fi", type: "tips", fee: "0%", color: "from-sky-500 to-blue-500", legal: "Sin adult content" },
+                { name: "Instagram", type: "free", fee: "0%", color: "from-pink-500 to-purple-500", legal: "Sin desnudez" },
+              ].map((p) => (
+                <Card key={p.name} className="bg-slate-900/50 border-slate-800">
+                  <CardContent className="p-4">
+                    <div className={`w-10 h-10 rounded-lg bg-gradient-to-br ${p.color} flex items-center justify-center mb-3`}>
+                      <DollarSign className="h-5 w-5 text-white" />
+                    </div>
+                    <h3 className="font-semibold">{p.name}</h3>
+                    <p className="text-xs text-slate-400 mt-1">Fee: {p.fee}</p>
+                    <Badge variant="outline" className="mt-2 text-xs">{p.type}</Badge>
+                    <p className="text-xs text-amber-400 mt-2">⚖️ {p.legal}</p>
+                    <Button size="sm" className="w-full mt-3 bg-violet-600 hover:bg-violet-700">
+                      <Plus className="h-3 w-3 mr-1" />Conectar
+                    </Button>
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          )}
+
+          {/* Posts */}
+          {activeTab === "posts" && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle className="flex items-center gap-2"><Calendar className="h-5 w-5 text-blue-400" />Crear Publicación</CardTitle></CardHeader>
+                <CardContent className="space-y-4">
+                  <Input placeholder="Título" value={postTitle} onChange={(e) => setPostTitle(e.target.value)} className="bg-slate-800 border-slate-700" />
+                  <Textarea placeholder="Caption..." value={postCaption} onChange={(e) => setPostCaption(e.target.value)} className="bg-slate-800 border-slate-700 min-h-20" />
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label className="text-xs text-slate-400">Tipo</Label>
+                      <Select value={postType} onValueChange={setPostType}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="reel">Reel</SelectItem>
+                          <SelectItem value="photo">Foto</SelectItem>
+                          <SelectItem value="carousel">Carrusel</SelectItem>
+                          <SelectItem value="story">Story</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-slate-400">Programar</Label>
+                      <Input type="datetime-local" value={scheduledTime} onChange={(e) => setScheduledTime(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
+                    </div>
+                  </div>
+                  <Button onClick={handleCreatePost} className="w-full bg-blue-600 hover:bg-blue-700">
+                    <Calendar className="h-4 w-4 mr-2" />{scheduledTime ? "Programar" : "Crear"}
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle>Publicaciones</CardTitle></CardHeader>
+                <CardContent>
+                  <ScrollArea className="h-64">
+                    {posts.length === 0 ? (
+                      <p className="text-slate-400 text-center py-8">No hay publicaciones</p>
+                    ) : (
+                      <div className="space-y-2">
+                        {posts.map((p) => (
+                          <div key={p.id} className="p-3 rounded-lg bg-slate-800/50 flex items-center justify-between">
+                            <div>
+                              <p className="font-medium text-sm">{p.title || "Sin título"}</p>
+                              <p className="text-xs text-slate-400">{p.type} • {p.scheduledAt ? new Date(p.scheduledAt).toLocaleString() : "Borrador"}</p>
+                            </div>
+                            <Badge className={getStatusColor(p.status)}>{p.status}</Badge>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Storytelling */}
+          {activeTab === "storytelling" && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle className="flex items-center gap-2"><Film className="h-5 w-5 text-purple-400" />Crear Historia</CardTitle></CardHeader>
+                <CardContent className="space-y-4">
+                  <Textarea placeholder="Describe tu historia... Ej: Una historia de transformación fitness de 30 días..." value={storyPrompt} onChange={(e) => setStoryPrompt(e.target.value)} className="bg-slate-800 border-slate-700 min-h-24" />
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label className="text-xs text-slate-400">Género</Label>
+                      <Select value={storyGenre} onValueChange={setStoryGenre}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="lifestyle">Lifestyle</SelectItem>
+                          <SelectItem value="fitness">Fitness</SelectItem>
+                          <SelectItem value="romance">Romance</SelectItem>
+                          <SelectItem value="drama">Drama</SelectItem>
+                          <SelectItem value="comedy">Comedia</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label className="text-xs text-slate-400">Episodios</Label>
+                      <Input type="number" value={storyEpisodes} onChange={(e) => setStoryEpisodes(parseInt(e.target.value) || 7)} className="bg-slate-800 border-slate-700 mt-1" />
+                    </div>
+                  </div>
+                  <Button onClick={handleCreateStory} disabled={storyLoading} className="w-full bg-purple-600 hover:bg-purple-700">
+                    {storyLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <Sparkles className="h-4 w-4 mr-2" />}Generar Historia
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle>Historias Creadas</CardTitle></CardHeader>
+                <CardContent>
+                  <ScrollArea className="h-64">
+                    {stories.length === 0 ? (
+                      <p className="text-slate-400 text-center py-8">No hay historias</p>
+                    ) : (
+                      <div className="space-y-2">
+                        {stories.map((s) => (
+                          <div key={s.id} className="p-3 rounded-lg bg-slate-800/50">
+                            <div className="flex justify-between items-start">
+                              <div>
+                                <p className="font-medium">{s.title}</p>
+                                <p className="text-xs text-slate-400">{s.totalEpisodes} episodios • {s.genre}</p>
+                              </div>
+                              <Badge className={getStatusColor(s.status)}>{s.status}</Badge>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Automation */}
+          {activeTab === "automation" && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle className="flex items-center gap-2"><Zap className="h-5 w-5 text-amber-400" />Crear Automatización</CardTitle></CardHeader>
+                <CardContent className="space-y-4">
+                  <Input placeholder="Nombre de la automatización" value={automationName} onChange={(e) => setAutomationName(e.target.value)} className="bg-slate-800 border-slate-700" />
+                  <div>
+                    <Label className="text-xs text-slate-400">Tipo</Label>
+                    <Select value={automationType} onValueChange={setAutomationType}>
+                      <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="content_generation">Generación de Contenido</SelectItem>
+                        <SelectItem value="posting">Publicación Automática</SelectItem>
+                        <SelectItem value="cross_posting">Cross-Posting</SelectItem>
+                        <SelectItem value="trend_tracking">Seguimiento de Tendencias</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <Button onClick={handleCreateAutomation} className="w-full bg-amber-600 hover:bg-amber-700">
+                    <Zap className="h-4 w-4 mr-2" />Crear
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle>Automatizaciones Activas</CardTitle></CardHeader>
+                <CardContent>
+                  <ScrollArea className="h-64">
+                    {automations.length === 0 ? (
+                      <p className="text-slate-400 text-center py-8">No hay automatizaciones</p>
+                    ) : (
+                      <div className="space-y-2">
+                        {automations.map((a) => (
+                          <div key={a.id} className="p-3 rounded-lg bg-slate-800/50 flex items-center justify-between">
+                            <div>
+                              <p className="font-medium text-sm">{a.name}</p>
+                              <p className="text-xs text-slate-400">{a.type} • {a.runCount} ejecuciones</p>
+                            </div>
+                            <Button size="sm" variant="ghost" onClick={() => handleToggleAutomation(a.id, a.isActive)}>
+                              {a.isActive ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                            </Button>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Influencers IA */}
+          {activeTab === "influencers" && (
+            <div className="space-y-6">
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2"><Users2 className="h-5 w-5 text-pink-400" />Análisis de Influencers IA Famosos</CardTitle>
+                  <CardDescription>Estudia los patrones de influencers IA exitosos para aplicarlos a tu contenido</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                    <div>
+                      <Label className="text-xs text-slate-400">Tu Nicho</Label>
+                      <Input placeholder="lifestyle, fashion..." value={influencerNiche} onChange={(e) => setInfluencerNiche(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
+                    </div>
+                    <div>
+                      <Label className="text-xs text-slate-400">Plataforma Objetivo</Label>
+                      <Select value={influencerPlatform} onValueChange={setInfluencerPlatform}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue placeholder="Todas" /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="">Todas</SelectItem>
+                          <SelectItem value="instagram">Instagram</SelectItem>
+                          <SelectItem value="tiktok">TikTok</SelectItem>
+                          <SelectItem value="youtube">YouTube</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div className="flex items-end">
+                      <div className="flex items-center gap-2 pb-2">
+                        <Switch checked={influencerWithPets} onCheckedChange={setInfluencerWithPets} />
+                        <Label className="text-sm text-slate-400">Con mascotas</Label>
+                      </div>
+                    </div>
+                    <div className="flex items-end">
+                      <Button onClick={handleAnalyzeInfluencers} disabled={influencerLoading} className="w-full bg-pink-600 hover:bg-pink-700">
+                        {influencerLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <Lightbulb className="h-4 w-4 mr-2" />}Analizar
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              {influencers.length > 0 && (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  {influencers.map((inf, i) => (
+                    <Card key={i} className="bg-slate-900/50 border-slate-800">
+                      <CardContent className="p-4">
+                        <div className="flex items-center gap-2 mb-2">
+                          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-pink-500 to-purple-500 flex items-center justify-center">
+                            <Star className="h-4 w-4 text-white" />
+                          </div>
+                          <div>
+                            <p className="font-medium text-sm">{inf.name}</p>
+                            <p className="text-xs text-slate-400">{inf.handle}</p>
+                          </div>
+                        </div>
+                        <div className="space-y-1 text-xs">
+                          <p><span className="text-slate-400">Seguidores:</span> <span className="text-green-400">{(inf.followers / 1000000).toFixed(1)}M</span></p>
+                          <p><span className="text-slate-400">Engagement:</span> <span className="text-blue-400">{inf.engagement}%</span></p>
+                          <p><span className="text-slate-400">Nicho:</span> {inf.niche}</p>
+                          {inf.petCompanion && <Badge className="bg-amber-500/20 text-amber-400 mt-1"><PawPrint className="h-3 w-3 mr-1" />{inf.petType}</Badge>}
+                        </div>
+                        <div className="mt-2 pt-2 border-t border-slate-700">
+                          <p className="text-xs text-slate-400">Lecciones:</p>
+                          <ul className="text-xs mt-1 space-y-1">
+                            {inf.keyLessons.slice(0, 2).map((l, j) => (
+                              <li key={j} className="text-slate-300">• {l}</li>
+                            ))}
+                          </ul>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                </div>
+              )}
+
+              {characterConcept && (
+                <Card className="bg-slate-900/50 border-slate-800 border-violet-500/30">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 text-violet-400"><Sparkles className="h-5 w-5" />Concepto de Personaje Sugerido</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <h4 className="font-medium mb-2">Personaje</h4>
+                        <div className="p-3 rounded-lg bg-slate-800/50 text-sm">
+                          {characterConcept.character && (
+                            <>
+                              <p><strong>Nombre:</strong> {String(characterConcept.character.name || "")}</p>
+                              <p className="mt-1"><strong>Personalidad:</strong> {String(characterConcept.character.personality || "")}</p>
+                              <p className="mt-1"><strong>Historia:</strong> {String(characterConcept.character.backstory || "")}</p>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      <div>
+                        <h4 className="font-medium mb-2">Estilo Visual</h4>
+                        <div className="p-3 rounded-lg bg-slate-800/50 text-sm">
+                          {characterConcept.visualStyle && (
+                            <>
+                              <p><strong>Estética:</strong> {String(characterConcept.visualStyle.aesthetic || "")}</p>
+                              <p className="mt-1"><strong>Colores:</strong> {Array.isArray(characterConcept.visualStyle.colors) ? characterConcept.visualStyle.colors.join(", ") : ""}</p>
+                            </>
+                          )}
+                        </div>
+                        {Array.isArray(characterConcept.hashtags) && characterConcept.hashtags.length > 0 && (
+                          <div className="mt-3 flex flex-wrap gap-1">
+                            {characterConcept.hashtags.slice(0, 10).map((tag: string, i: number) => (
+                              <Badge key={i} variant="outline" className="text-xs">{tag}</Badge>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          )}
+
+          {/* Pets */}
+          {activeTab === "pets" && (
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2"><PawPrint className="h-5 w-5 text-amber-400" />Crear Mascota</CardTitle>
+                  <CardDescription>Las mascotas aumentan el engagement hasta un 35%</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label className="text-xs text-slate-400">Nombre</Label>
+                      <Input placeholder="Max, Luna..." value={petName} onChange={(e) => setPetName(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
+                    </div>
+                    <div>
+                      <Label className="text-xs text-slate-400">Tipo</Label>
+                      <Select value={petType} onValueChange={setPetType}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                          {petTypes.map((pt) => (
+                            <SelectItem key={pt.value} value={pt.value}>{pt.label}</SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label className="text-xs text-slate-400">Raza (opcional)</Label>
+                      <Input placeholder="Golden Retriever..." value={petBreed} onChange={(e) => setPetBreed(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
+                    </div>
+                    <div>
+                      <Label className="text-xs text-slate-400">Personalidad</Label>
+                      <Select value={petPersonality} onValueChange={setPetPersonality}>
+                        <SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue placeholder="Seleccionar" /></SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="playful">Juguetón</SelectItem>
+                          <SelectItem value="calm">Tranquilo</SelectItem>
+                          <SelectItem value="energetic">Energético</SelectItem>
+                          <SelectItem value="curious">Curioso</SelectItem>
+                          <SelectItem value="lazy">Perezoso</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                  <Button onClick={handleCreatePet} disabled={petLoading} className="w-full bg-amber-600 hover:bg-amber-700">
+                    {petLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <PawPrint className="h-4 w-4 mr-2" />}Crear Mascota
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-slate-900/50 border-slate-800">
+                <CardHeader><CardTitle>Mis Mascotas</CardTitle></CardHeader>
+                <CardContent>
+                  <ScrollArea className="h-64">
+                    {pets.length === 0 ? (
+                      <div className="text-center py-8 text-slate-400">
+                        <PawPrint className="h-12 w-12 mx-auto mb-3 opacity-50" />
+                        <p>No tienes mascotas</p>
+                        <p className="text-xs mt-1">Las mascotas aumentan el engagement</p>
+                      </div>
+                    ) : (
+                      <div className="space-y-2">
+                        {pets.map((p) => (
+                          <div key={p.id} className="p-3 rounded-lg bg-slate-800/50 flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                              <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
+                                <PawPrint className="h-5 w-5 text-white" />
+                              </div>
+                              <div>
+                                <p className="font-medium">{p.name}</p>
+                                <p className="text-xs text-slate-400">{p.breed || p.type} • {p.personality || "Sin personalidad"}</p>
+                              </div>
+                            </div>
+                            <Badge className="bg-green-500/20 text-green-400">+35%</Badge>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </ScrollArea>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Trends */}
+          {activeTab === "trends" && (
+            <div className="space-y-6">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-2">
+                  <Switch checked={includePetInContent} onCheckedChange={setIncludePetInContent} />
+                  <Label className="text-sm text-slate-400">Incluir tendencias de mascotas</Label>
+                </div>
+                <Button onClick={handleAnalyzeTrends} disabled={trendLoading} className="bg-violet-600 hover:bg-violet-700">
+                  {trendLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <Rocket className="h-4 w-4 mr-2" />}Analizar para Viralizar
+                </Button>
+              </div>
+
+              {/* Tendencias Actuales */}
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                {trends.slice(0, 8).map((t, i) => (
+                  <Card key={i} className="bg-slate-900/50 border-slate-800">
+                    <CardContent className="p-4">
+                      <div className="flex items-center justify-between mb-2">
+                        <Badge variant="outline" className="text-xs">{String(t.platform || "")}</Badge>
+                        <Flame className={`h-4 w-4 ${Number(t.growth) > 30 ? "text-red-400" : "text-orange-400"}`} />
+                      </div>
+                      <p className="font-semibold">{String(t.name)}</p>
+                      <p className="text-green-400 text-sm">+{Number(t.growth).toFixed(1)}%</p>
+                      <p className="text-xs text-slate-400 mt-1">{String(t.category || "")}</p>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+
+              {/* Estrategias Virales */}
+              {viralStrategies.length > 0 && (
+                <Card className="bg-slate-900/50 border-slate-800">
+                  <CardHeader><CardTitle className="flex items-center gap-2"><Rocket className="h-5 w-5 text-violet-400" />Estrategias Virales</CardTitle></CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                      {viralStrategies.slice(0, 4).map((s, i) => (
+                        <div key={i} className="p-3 rounded-lg bg-slate-800/50 border border-slate-700">
+                          <div className="flex items-center justify-between mb-2">
+                            <p className="font-medium text-sm">{String(s.name)}</p>
+                            <Badge className="bg-green-500/20 text-green-400 text-xs">{String(s.successRate)}%</Badge>
+                          </div>
+                          <p className="text-xs text-slate-400 line-clamp-2">{String(s.description)}</p>
+                          <div className="flex flex-wrap gap-1 mt-2">
+                            {Array.isArray(s.platforms) && s.platforms.slice(0, 3).map((p: string, j: number) => (
+                              <Badge key={j} variant="outline" className="text-xs">{p}</Badge>
+                            ))}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Ideas de Contenido */}
+              {contentIdeas.length > 0 && (
+                <Card className="bg-slate-900/50 border-slate-800">
+                  <CardHeader><CardTitle className="flex items-center gap-2"><Lightbulb className="h-5 w-5 text-amber-400" />Ideas de Contenido Viral</CardTitle></CardHeader>
+                  <CardContent>
+                    <div className="space-y-3">
+                      {contentIdeas.slice(0, 5).map((idea, i) => (
+                        <div key={i} className="p-3 rounded-lg bg-slate-800/50 border border-slate-700">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <p className="font-medium">{String(idea.title)}</p>
+                              <p className="text-xs text-slate-400 mt-1">{String(idea.description)}</p>
+                              {idea.hook && <p className="text-xs text-violet-400 mt-1">Hook: "{String(idea.hook)}"</p>}
+                            </div>
+                            <div className="text-right">
+                              <Badge className="bg-violet-500/20 text-violet-400">{String(idea.format)}</Badge>
+                              {idea.viralScore && <p className="text-xs text-green-400 mt-1">Score: {String(idea.viralScore)}</p>}
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Análisis de Tendencias */}
+              {trendAnalysis && (
+                <Card className="bg-slate-900/50 border-slate-800 border-violet-500/30">
+                  <CardHeader>
+                    <CardTitle className="flex items-center gap-2 text-violet-400"><Target className="h-5 w-5" />Plan para Viralizar</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <h4 className="font-medium mb-2">Tendencias Emergentes</h4>
+                        <div className="space-y-2">
+                          {Array.isArray(trendAnalysis.emergingTrends) && trendAnalysis.emergingTrends.slice(0, 3).map((t: Record<string, unknown>, i: number) => (
+                            <div key={i} className="p-2 rounded bg-slate-800/50 text-sm">
+                              <p className="font-medium">{String(t.name)}</p>
+                              <p className="text-xs text-slate-400">Potencial: {String(t.potential)}</p>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                      <div>
+                        <h4 className="font-medium mb-2">Recomendaciones</h4>
+                        <div className="space-y-1">
+                          {Array.isArray(trendAnalysis.recommendations) && trendAnalysis.recommendations.slice(0, 4).map((r: string, i: number) => (
+                            <p key={i} className="text-sm text-slate-300">• {r}</p>
+                          ))}
+                        </div>
+                        {trendAnalysis.predictedViralPotential && (
+                          <div className="mt-4 p-3 rounded-lg bg-violet-500/10 border border-violet-500/30">
+                            <p className="text-sm">Potencial Viral Estimado:</p>
+                            <p className="text-2xl font-bold text-violet-400">{String(trendAnalysis.predictedViralPotential)}%</p>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          )}
+
+          {/* Content */}
+          {activeTab === "content" && (
+            <Card className="bg-slate-900/50 border-slate-800">
+              <CardHeader><CardTitle>Contenido Generado</CardTitle></CardHeader>
+              <CardContent>
+                <ScrollArea className="h-96">
+                  {contents.length === 0 ? (
+                    <p className="text-slate-400 text-center py-8">No hay contenido generado</p>
+                  ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {contents.map((c) => (
+                        <div key={c.id} className="p-4 rounded-lg bg-slate-800/50 border border-slate-700">
+                          <div className="flex justify-between mb-2">
+                            <Badge className={getStatusColor(c.status)}>{c.status}</Badge>
+                            <Badge variant="outline">{c.type}</Badge>
+                          </div>
+                          <p className="font-medium line-clamp-2">{c.title}</p>
+                          <p className="text-xs text-slate-400 mt-1">{c.platform}</p>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Videos */}
+          {activeTab === "videos" && (
+            <Card className="bg-slate-900/50 border-slate-800">
+              <CardHeader><CardTitle className="flex items-center gap-2"><Video className="h-5 w-5 text-blue-400" />Generar Videos</CardTitle></CardHeader>
+              <CardContent className="space-y-4">
+                <Textarea placeholder="Describe el video..." value={userPrompt} onChange={(e) => setUserPrompt(e.target.value)} className="bg-slate-800 border-slate-700" />
+                <Button className="w-full bg-blue-600 hover:bg-blue-700">
+                  <Video className="h-4 w-4 mr-2" />Generar Video
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </main>
+      </div>
+    </div>
+  );
+}

src/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
+}
+
+export { AspectRatio }

src/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "flex gap-4 flex-col md:flex-row relative",
+          defaultClassNames.months
+        ),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "absolute bg-popover inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn(
+          "select-none w-(--cell-size)",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "rounded-l-md bg-accent",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          )
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            )
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            )
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          )
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/components/ui/chart.tsx

@@ -0,0 +1,353 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          }
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

src/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

src/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+  showCloseButton?: boolean
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}