import { useState } from "react";

const Section = ({ title, children, defaultOpen = false }) => {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className="mb-4 border border-gray-200 rounded-xl overflow-hidden">
      <button
        onClick={() => setOpen(!open)}
        className="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 transition-colors"
      >
        <span className="text-lg font-bold text-gray-900">{title}</span>
        <span className="text-xl text-gray-500">{open ? "−" : "+"}</span>
      </button>
      {open && <div className="p-5 bg-white">{children}</div>}
    </div>
  );
};

const Badge = ({ color, children }) => {
  const colors = {
    blue: "bg-blue-100 text-blue-800",
    green: "bg-green-100 text-green-800",
    purple: "bg-purple-100 text-purple-800",
    orange: "bg-orange-100 text-orange-800",
    red: "bg-red-100 text-red-800",
    gray: "bg-gray-100 text-gray-800",
    teal: "bg-teal-100 text-teal-800",
  };
  return (
    <span className={`px-2 py-0.5 rounded-full text-xs font-semibold ${colors[color]}`}>
      {children}
    </span>
  );
};

const ServerBox = ({ title, subtitle, color, children }) => {
  const borderColors = {
    blue: "border-blue-400 bg-blue-50",
    purple: "border-purple-400 bg-purple-50",
    green: "border-green-400 bg-green-50",
  };
  return (
    <div className={`border-2 rounded-xl p-4 ${borderColors[color]}`}>
      <h3 className="font-bold text-lg mb-1">{title}</h3>
      <p className="text-xs text-gray-500 mb-3">{subtitle}</p>
      {children}
    </div>
  );
};

const AppBlock = ({ name, purpose, port, badge }) => (
  <div className="flex items-center gap-2 p-2 bg-white rounded-lg border border-gray-200 mb-2">
    <div className="flex-1">
      <div className="flex items-center gap-2">
        <span className="font-semibold text-sm">{name}</span>
        {badge && <Badge color={badge.color}>{badge.text}</Badge>}
      </div>
      <p className="text-xs text-gray-500">{purpose}</p>
    </div>
    {port && <span className="text-xs font-mono text-gray-400">:{port}</span>}
  </div>
);

const CostRow = ({ item, monthly, notes }) => (
  <div className="flex items-center justify-between py-2 border-b border-gray-100">
    <div>
      <span className="font-medium text-sm">{item}</span>
      {notes && <p className="text-xs text-gray-400">{notes}</p>}
    </div>
    <span className="font-bold text-sm">{monthly}</span>
  </div>
);

const Step = ({ num, title, code }) => (
  <div className="mb-4">
    <div className="flex items-center gap-2 mb-2">
      <span className="w-6 h-6 rounded-full bg-gray-900 text-white text-xs flex items-center justify-center font-bold">
        {num}
      </span>
      <span className="font-semibold text-sm">{title}</span>
    </div>
    {code && (
      <pre className="bg-gray-900 text-green-400 text-xs p-3 rounded-lg overflow-x-auto whitespace-pre-wrap">
        {code}
      </pre>
    )}
  </div>
);

const Arrow = ({ label }) => (
  <div className="flex flex-col items-center py-2">
    <span className="text-xs text-gray-500 mb-1">{label}</span>
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" className="text-gray-400">
      <path d="M12 4v16m0 0l-4-4m4 4l4-4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  </div>
);

export default function Architecture() {
  const [tab, setTab] = useState("overview");

  const tabs = [
    { id: "overview", label: "Architecture" },
    { id: "hostinger", label: "Hostinger VPS" },
    { id: "vastai", label: "Vast.ai GPU" },
    { id: "models", label: "AI Models" },
    { id: "setup", label: "Setup Guide" },
    { id: "costs", label: "Costs" },
  ];

  return (
    <div className="min-h-screen bg-white p-4 max-w-4xl mx-auto">
      <div className="mb-6">
        <h1 className="text-2xl font-black text-gray-900">IGNY8 Self-Hosted AI Infrastructure</h1>
        <p className="text-sm text-gray-500 mt-1">Hostinger VPS + Vast.ai GPU — Zero API Costs Architecture</p>
      </div>

      <div className="flex gap-1 mb-6 overflow-x-auto pb-2">
        {tabs.map((t) => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={`px-3 py-1.5 rounded-lg text-xs font-semibold whitespace-nowrap transition-colors ${
              tab === t.id ? "bg-gray-900 text-white" : "bg-gray-100 text-gray-600 hover:bg-gray-200"
            }`}
          >
            {t.label}
          </button>
        ))}
      </div>

      {tab === "overview" && (
        <div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
            <ServerBox title="Hostinger VPS" subtitle="CPU-only • Web + AI Orchestration" color="blue">
              <AppBlock name="Plesk" purpose="Web hosting panel — client sites, IGNY8 frontend" port="8443" />
              <AppBlock name="Flowise" purpose="AI workflow builder — RAG chatbots, content pipelines" port="3000" badge={{ color: "green", text: "IGNY8 Core" }} />
              <AppBlock name="Open WebUI" purpose="ChatGPT-like interface for clients" port="3001" badge={{ color: "blue", text: "Client-facing" }} />
              <AppBlock name="Chroma" purpose="Vector database for RAG / knowledge bases" port="8000" />
              <AppBlock name="LiteLLM" purpose="API gateway — routes to Vast.ai GPU" port="4000" badge={{ color: "purple", text: "Bridge" }} />
              <AppBlock name="Nginx" purpose="Reverse proxy + SSL for all services" port="443" />
            </ServerBox>

            <ServerBox title="Vast.ai GPU Server" subtitle="2x RTX 3090 (48GB) • AI Inference" color="purple">
              <AppBlock name="Ollama" purpose="LLM inference engine" port="11434" badge={{ color: "orange", text: "GPU" }} />
              <AppBlock name="Qwen3 32B" purpose="Content writing for IGNY8" badge={{ color: "green", text: "Text Gen" }} />
              <AppBlock name="Qwen3 30B-A3B" purpose="Fast inference for chat / SEO tasks" badge={{ color: "green", text: "Text Gen" }} />
              <AppBlock name="FLUX.1 / SD 3.5" purpose="Image generation via ComfyUI" port="8188" badge={{ color: "teal", text: "Image Gen" }} />
              <AppBlock name="Wan 2.1 / LTX-Video" purpose="Video generation via ComfyUI" badge={{ color: "red", text: "Video Gen" }} />
              <AppBlock name="ComfyUI" purpose="Unified UI for image + video generation" port="8188" />
            </ServerBox>
          </div>

          <div className="bg-gray-50 rounded-xl p-4 mb-4">
            <h3 className="font-bold text-sm mb-3">How They Connect</h3>
            <div className="space-y-2 text-xs">
              <div className="flex items-center gap-2">
                <Badge color="blue">Hostinger</Badge>
                <span className="text-gray-400">→ LiteLLM proxy →</span>
                <Badge color="purple">Vast.ai Ollama</Badge>
                <span className="text-gray-500">Text generation (OpenAI-compatible API)</span>
              </div>
              <div className="flex items-center gap-2">
                <Badge color="blue">Flowise</Badge>
                <span className="text-gray-400">→ LiteLLM →</span>
                <Badge color="purple">Qwen3 models</Badge>
                <span className="text-gray-500">IGNY8 content writing pipeline</span>
              </div>
              <div className="flex items-center gap-2">
                <Badge color="blue">IGNY8 App</Badge>
                <span className="text-gray-400">→ HTTP API →</span>
                <Badge color="purple">ComfyUI</Badge>
                <span className="text-gray-500">Image/video generation requests</span>
              </div>
              <div className="flex items-center gap-2">
                <Badge color="blue">Open WebUI</Badge>
                <span className="text-gray-400">→ Ollama API →</span>
                <Badge color="purple">Any loaded model</Badge>
                <span className="text-gray-500">Client chat interface</span>
              </div>
            </div>
          </div>

          <div className="bg-green-50 border border-green-200 rounded-xl p-4">
            <h3 className="font-bold text-sm text-green-800 mb-2">Zero API Cost Model</h3>
            <div className="text-xs text-green-700 space-y-1">
              <p>• All LLM inference runs on your own GPU — no OpenAI/Anthropic API charges</p>
              <p>• Image generation uses open-source FLUX.1/SD 3.5 — no Midjourney/DALL-E costs</p>
              <p>• Video generation uses Wan 2.1/LTX-Video — no Runway/Sora costs</p>
              <p>• Only fixed costs: Hostinger VPS (~$12-25/mo) + Vast.ai GPU (~$200/mo)</p>
              <p>• Total: ~$215-225/month for unlimited AI generation</p>
            </div>
          </div>
        </div>
      )}

      {tab === "hostinger" && (
        <div>
          <Section title="Recommended VPS Plan" defaultOpen={true}>
            <div className="space-y-3">
              <div className="bg-blue-50 p-3 rounded-lg">
                <p className="font-bold text-sm">KVM 4 or higher recommended</p>
                <p className="text-xs text-gray-600 mt-1">4 vCPU, 16GB RAM, 200GB NVMe — handles Plesk + all CPU services comfortably</p>
              </div>
              <div className="text-sm space-y-2">
                <p className="font-semibold">What runs on Hostinger (CPU-only):</p>
                <div className="grid grid-cols-2 gap-2">
                  <div className="bg-white p-2 rounded border"><span className="font-mono text-xs">Plesk</span> — Web hosting panel</div>
                  <div className="bg-white p-2 rounded border"><span className="font-mono text-xs">Flowise</span> — AI workflow engine</div>
                  <div className="bg-white p-2 rounded border"><span className="font-mono text-xs">Open WebUI</span> — Chat interface</div>
                  <div className="bg-white p-2 rounded border"><span className="font-mono text-xs">Chroma</span> — Vector DB</div>
                  <div className="bg-white p-2 rounded border"><span className="font-mono text-xs">LiteLLM</span> — API proxy</div>
                  <div className="bg-white p-2 rounded border"><span className="font-mono text-xs">Nginx</span> — Reverse proxy</div>
                </div>
              </div>
              <div className="text-xs text-gray-500 bg-yellow-50 p-3 rounded-lg">
                <strong>Important:</strong> Don't install Ollama on Hostinger — it will be too slow on CPU. All AI inference goes through LiteLLM → Vast.ai GPU server.
              </div>
            </div>
          </Section>

          <Section title="Docker Compose Stack">
            <pre className="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-x-auto whitespace-pre-wrap">{`# docker-compose.yml on Hostinger VPS

version: '3.8'

services:
  flowise:
    image: flowiseai/flowise
    ports:
      - "3000:3000"
    volumes:
      - flowise_data:/root/.flowise
    environment:
      - FLOWISE_USERNAME=admin
      - FLOWISE_PASSWORD=your_secure_password
    restart: always

  chromadb:
    image: chromadb/chroma
    ports:
      - "8000:8000"
    volumes:
      - chroma_data:/chroma/chroma
    restart: always

  litellm:
    image: ghcr.io/berriai/litellm:main-latest
    ports:
      - "4000:4000"
    volumes:
      - ./litellm_config.yaml:/app/config.yaml
    command: ["--config", "/app/config.yaml"]
    restart: always

  open-webui:
    image: ghcr.io/open-webui/open-webui:main
    ports:
      - "3001:8080"
    environment:
      # Point to Vast.ai Ollama (via SSH tunnel)
      - OLLAMA_BASE_URL=http://litellm:4000
    volumes:
      - openwebui_data:/app/backend/data
    restart: always

volumes:
  flowise_data:
  chroma_data:
  openwebui_data:`}</pre>
          </Section>

          <Section title="LiteLLM Config (Bridge to Vast.ai)">
            <pre className="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-x-auto whitespace-pre-wrap">{`# litellm_config.yaml
# Routes all AI requests to your Vast.ai GPU server

model_list:
  - model_name: qwen3-32b
    litellm_params:
      model: ollama/qwen3:32b
      api_base: http://VAST_AI_IP:11434
      
  - model_name: qwen3-30b-moe
    litellm_params:
      model: ollama/qwen3:30b-a3b
      api_base: http://VAST_AI_IP:11434

  - model_name: qwen3-14b
    litellm_params:
      model: ollama/qwen3:14b
      api_base: http://VAST_AI_IP:11434

  - model_name: qwen3-8b
    litellm_params:
      model: ollama/qwen3:8b
      api_base: http://VAST_AI_IP:11434

general_settings:
  master_key: sk-your-master-key-here`}</pre>
            <div className="mt-3 text-xs text-gray-500 bg-orange-50 p-3 rounded-lg">
              <strong>Security:</strong> Use SSH tunnel or WireGuard VPN between Hostinger and Vast.ai. Never expose Ollama port directly to the internet.
            </div>
          </Section>

          <Section title="Nginx Reverse Proxy">
            <pre className="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-x-auto whitespace-pre-wrap">{`# /etc/nginx/sites-available/ai-services

# Flowise — IGNY8 AI workflows
server {
    listen 443 ssl;
    server_name flowise.yourdomain.com;
    ssl_certificate /etc/letsencrypt/live/...;
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# Open WebUI — Client chat
server {
    listen 443 ssl;
    server_name chat.yourdomain.com;
    ssl_certificate /etc/letsencrypt/live/...;
    location / {
        proxy_pass http://localhost:3001;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

# LiteLLM — API endpoint
server {
    listen 443 ssl;
    server_name api.yourdomain.com;
    ssl_certificate /etc/letsencrypt/live/...;
    location / {
        proxy_pass http://localhost:4000;
    }
}`}</pre>
          </Section>
        </div>
      )}

      {tab === "vastai" && (
        <div>
          <Section title="Server Spec: m:49870" defaultOpen={true}>
            <div className="grid grid-cols-2 gap-3 mb-4">
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-gray-500">GPU</p>
                <p className="font-bold">2x RTX 3090 (48GB total)</p>
              </div>
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-gray-500">CPU</p>
                <p className="font-bold">AMD EPYC 7543 (13.5/128 cores)</p>
              </div>
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-gray-500">RAM</p>
                <p className="font-bold">54GB / 516GB</p>
              </div>
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-gray-500">Storage</p>
                <p className="font-bold">442GB NVMe</p>
              </div>
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-gray-500">Location</p>
                <p className="font-bold">Bulgaria</p>
              </div>
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-gray-500">Cost</p>
                <p className="font-bold">$0.277/hr (~$200/mo)</p>
              </div>
            </div>
            <div className="bg-yellow-50 border border-yellow-200 p-3 rounded-lg text-xs">
              <strong>Note:</strong> 97.2% reliability = ~20hrs downtime/month. For production, consider m:24191 (Czechia, 99.38% reliability, $0.288/hr) or set up auto-failback to a paid API in LiteLLM config.
            </div>
          </Section>

          <Section title="What Runs on Vast.ai GPU">
            <div className="space-y-3">
              <div className="bg-white border-2 border-green-300 rounded-lg p-3">
                <div className="flex items-center gap-2 mb-2">
                  <Badge color="green">Text Gen</Badge>
                  <span className="font-bold text-sm">Ollama + Qwen3 Models</span>
                </div>
                <p className="text-xs text-gray-600">IGNY8 content writing, SEO content, chat responses</p>
                <div className="mt-2 text-xs space-y-1">
                  <p>• Qwen3 32B (dense) — ~20GB VRAM, best quality</p>
                  <p>• Qwen3 30B-A3B (MoE) — ~19GB VRAM, fastest</p>
                  <p>• Qwen3 14B — ~9GB VRAM, for concurrent tasks</p>
                  <p>• Load models on demand via Ollama</p>
                </div>
              </div>

              <div className="bg-white border-2 border-teal-300 rounded-lg p-3">
                <div className="flex items-center gap-2 mb-2">
                  <Badge color="teal">Image Gen</Badge>
                  <span className="font-bold text-sm">ComfyUI + FLUX.1 / Stable Diffusion</span>
                </div>
                <p className="text-xs text-gray-600">Blog images, social media graphics, product visuals for IGNY8</p>
                <div className="mt-2 text-xs space-y-1">
                  <p>• FLUX.1 [dev] — best quality, ~12GB VRAM</p>
                  <p>• Stable Diffusion 3.5 — wide ecosystem, ~8GB VRAM</p>
                  <p>• SDXL-Lightning — fast generation, ~6GB VRAM</p>
                  <p>• All via ComfyUI API (port 8188)</p>
                </div>
              </div>

              <div className="bg-white border-2 border-red-300 rounded-lg p-3">
                <div className="flex items-center gap-2 mb-2">
                  <Badge color="red">Video Gen</Badge>
                  <span className="font-bold text-sm">Wan 2.1 / LTX-Video via ComfyUI</span>
                </div>
                <p className="text-xs text-gray-600">Short videos for social media, product demos</p>
                <div className="mt-2 text-xs space-y-1">
                  <p>• Wan 2.1 (14B) — best quality, uses full 48GB</p>
                  <p>• Wan 2.1 (1.3B) — fast, only ~8GB VRAM</p>
                  <p>• LTX-Video — fastest, ~12GB VRAM, 768x512</p>
                  <p>• ⚠️ Unload LLM before running video gen (shared VRAM)</p>
                </div>
              </div>
            </div>
          </Section>

          <Section title="VRAM Management Strategy">
            <div className="bg-gray-50 p-4 rounded-lg">
              <p className="text-sm font-semibold mb-3">48GB total — you can't run everything simultaneously</p>
              <div className="space-y-3">
                <div className="bg-white p-3 rounded border-l-4 border-green-500">
                  <p className="font-semibold text-xs">Mode 1: Content Writing (Default)</p>
                  <p className="text-xs text-gray-500 mt-1">Qwen3 32B (~20GB) + FLUX.1 image gen (~12GB) = ~32GB</p>
                  <p className="text-xs text-green-600 mt-1">✓ Fits comfortably, both can run simultaneously</p>
                </div>
                <div className="bg-white p-3 rounded border-l-4 border-blue-500">
                  <p className="font-semibold text-xs">Mode 2: Fast Throughput</p>
                  <p className="text-xs text-gray-500 mt-1">Qwen3 30B-A3B MoE (~19GB) + FLUX.1 (~12GB) = ~31GB</p>
                  <p className="text-xs text-blue-600 mt-1">✓ Blazing fast text + images together</p>
                </div>
                <div className="bg-white p-3 rounded border-l-4 border-red-500">
                  <p className="font-semibold text-xs">Mode 3: Video Generation</p>
                  <p className="text-xs text-gray-500 mt-1">Unload LLM → Wan 2.1 14B uses full 48GB</p>
                  <p className="text-xs text-red-600 mt-1">⚠️ Schedule video jobs during off-peak, unload text model first</p>
                </div>
              </div>
              <p className="text-xs text-gray-500 mt-3">Ollama auto-unloads models after 5min idle. Use <code className="bg-gray-200 px-1 rounded">OLLAMA_KEEP_ALIVE</code> to control.</p>
            </div>
          </Section>

          <Section title="Secure Connection (SSH Tunnel)">
            <pre className="bg-gray-900 text-green-400 text-xs p-4 rounded-lg overflow-x-auto whitespace-pre-wrap">{`# Run on Hostinger VPS — creates persistent tunnel to Vast.ai
# This makes Vast.ai's ports available on localhost

# Install autossh for persistent tunnels
apt install autossh

# Create tunnel (run as systemd service)
autossh -M 0 -N \\
  -L 11434:localhost:11434 \\   # Ollama
  -L 8188:localhost:8188 \\     # ComfyUI
  -o "ServerAliveInterval=30" \\
  -o "ServerAliveCountMax=3" \\
  -i /root/.ssh/vastai_key \\
  root@VAST_AI_IP -p VAST_SSH_PORT

# Now on Hostinger:
# localhost:11434 → Vast.ai Ollama
# localhost:8188 → Vast.ai ComfyUI`}</pre>
          </Section>
        </div>
      )}

      {tab === "models" && (
        <div>
          <Section title="Text Generation — For IGNY8 Content" defaultOpen={true}>
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left p-2">Model</th>
                    <th className="text-left p-2">VRAM</th>
                    <th className="text-left p-2">Speed</th>
                    <th className="text-left p-2">Best For</th>
                    <th className="text-left p-2">License</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b bg-green-50">
                    <td className="p-2 font-bold">Qwen3 32B ⭐</td>
                    <td className="p-2">~20GB</td>
                    <td className="p-2">~15-25 tok/s</td>
                    <td className="p-2">Long-form SEO content, articles</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                  <tr className="border-b bg-blue-50">
                    <td className="p-2 font-bold">Qwen3 30B-A3B ⭐</td>
                    <td className="p-2">~19GB</td>
                    <td className="p-2">~40-60 tok/s</td>
                    <td className="p-2">Fast chat, SEO meta, bulk content</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-2">Qwen3 14B</td>
                    <td className="p-2">~9GB</td>
                    <td className="p-2">~30-50 tok/s</td>
                    <td className="p-2">Concurrent light tasks</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-2">Qwen3 8B</td>
                    <td className="p-2">~5GB</td>
                    <td className="p-2">~50-80 tok/s</td>
                    <td className="p-2">Classification, tagging, simple tasks</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div className="mt-3 bg-green-50 p-3 rounded-lg text-xs">
              <strong>IGNY8 Strategy:</strong> Use 30B-A3B MoE as default (fast bulk content), switch to 32B dense for premium long-form articles. Ollama handles model switching automatically.
            </div>
          </Section>

          <Section title="Image Generation — For IGNY8 Visuals">
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left p-2">Model</th>
                    <th className="text-left p-2">VRAM</th>
                    <th className="text-left p-2">Speed</th>
                    <th className="text-left p-2">Quality</th>
                    <th className="text-left p-2">License</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b bg-teal-50">
                    <td className="p-2 font-bold">FLUX.1 [dev] ⭐</td>
                    <td className="p-2">~12GB</td>
                    <td className="p-2">~8-15s/img</td>
                    <td className="p-2">Excellent — rivals Midjourney</td>
                    <td className="p-2"><Badge color="orange">Non-commercial*</Badge></td>
                  </tr>
                  <tr className="border-b bg-green-50">
                    <td className="p-2 font-bold">Stable Diffusion 3.5 ⭐</td>
                    <td className="p-2">~8GB</td>
                    <td className="p-2">~5-10s/img</td>
                    <td className="p-2">Very good + huge ecosystem</td>
                    <td className="p-2"><Badge color="green">Community</Badge></td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-2">SDXL-Lightning</td>
                    <td className="p-2">~6GB</td>
                    <td className="p-2">~1-2s/img</td>
                    <td className="p-2">Good for fast iterations</td>
                    <td className="p-2"><Badge color="green">Open</Badge></td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-2">Z-Image-Turbo</td>
                    <td className="p-2">~16GB</td>
                    <td className="p-2">&lt;1s/img</td>
                    <td className="p-2">Excellent + text rendering</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div className="mt-3 bg-orange-50 p-3 rounded-lg text-xs">
              <strong>*FLUX.1 [dev] licensing:</strong> Free for non-commercial. For IGNY8 commercial use, either get BFL license or use SD 3.5 / Z-Image-Turbo (Apache 2.0, fully commercial).
            </div>
          </Section>

          <Section title="Video Generation — For IGNY8 Social Content">
            <div className="overflow-x-auto">
              <table className="w-full text-xs">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left p-2">Model</th>
                    <th className="text-left p-2">VRAM</th>
                    <th className="text-left p-2">Resolution</th>
                    <th className="text-left p-2">Duration</th>
                    <th className="text-left p-2">License</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b bg-red-50">
                    <td className="p-2 font-bold">Wan 2.1 (1.3B) ⭐</td>
                    <td className="p-2">~8GB</td>
                    <td className="p-2">480p</td>
                    <td className="p-2">5-8s clips</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                  <tr className="border-b bg-blue-50">
                    <td className="p-2 font-bold">LTX-Video ⭐</td>
                    <td className="p-2">~12GB</td>
                    <td className="p-2">768x512</td>
                    <td className="p-2">5-7s clips</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-2">Wan 2.1 (14B)</td>
                    <td className="p-2">~40GB+</td>
                    <td className="p-2">720p</td>
                    <td className="p-2">5-10s clips</td>
                    <td className="p-2"><Badge color="green">Apache 2.0</Badge></td>
                  </tr>
                  <tr className="border-b">
                    <td className="p-2">Wan2GP (optimized)</td>
                    <td className="p-2">~12GB</td>
                    <td className="p-2">720p</td>
                    <td className="p-2">8-15s clips</td>
                    <td className="p-2"><Badge color="green">Open</Badge></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div className="mt-3 bg-blue-50 p-3 rounded-lg text-xs">
              <strong>Best approach:</strong> Use Wan 2.1 1.3B or LTX-Video for quick social clips alongside the LLM. For premium 720p video, schedule Wan 14B during off-peak (requires unloading LLM).
            </div>
          </Section>

          <Section title="Running Models Simultaneously">
            <div className="bg-gray-50 p-4 rounded-lg text-xs space-y-2">
              <p className="font-bold text-sm mb-2">48GB VRAM Budget — Practical Combos:</p>
              <div className="bg-white p-2 rounded border border-green-300">
                <strong>🟢 Combo A (Daily IGNY8 ops):</strong> Qwen3 30B-A3B (19GB) + SD 3.5 images (8GB) + Wan 1.3B video (8GB) = 35GB ✓
              </div>
              <div className="bg-white p-2 rounded border border-blue-300">
                <strong>🔵 Combo B (Premium content):</strong> Qwen3 32B (20GB) + FLUX.1 images (12GB) = 32GB ✓
              </div>
              <div className="bg-white p-2 rounded border border-orange-300">
                <strong>🟠 Combo C (Video focus):</strong> Wan 14B video (40GB+) = needs all VRAM, unload everything else
              </div>
              <div className="bg-white p-2 rounded border border-purple-300">
                <strong>🟣 Combo D (Multi-client chat):</strong> Qwen3 14B (9GB) × multiple concurrent users = fast, lightweight
              </div>
            </div>
          </Section>
        </div>
      )}

      {tab === "setup" && (
        <div>
          <Section title="Phase 1: Hostinger VPS Setup" defaultOpen={true}>
            <Step num={1} title="Get VPS & Install Docker" code={`# SSH into your Hostinger VPS
ssh root@your-vps-ip

# Install Docker
curl -fsSL https://get.docker.com | sh
docker compose version  # verify

# Install Plesk (if not pre-installed)
sh <(curl https://autoinstall.plesk.com/one-click-installer)`} />
            <Step num={2} title="Deploy the AI Stack" code={`# Create project directory
mkdir -p /opt/ai-stack && cd /opt/ai-stack

# Create docker-compose.yml (as shown in Hostinger tab)
# Create litellm_config.yaml

# Launch everything
docker compose up -d

# Verify all services
docker compose ps`} />
            <Step num={3} title="Setup Nginx + SSL" code={`# Install certbot
apt install certbot python3-certbot-nginx

# Get SSL certs for your subdomains
certbot --nginx -d flowise.yourdomain.com
certbot --nginx -d chat.yourdomain.com
certbot --nginx -d api.yourdomain.com

# Setup nginx configs (as shown in Hostinger tab)`} />
          </Section>

          <Section title="Phase 2: Vast.ai GPU Server Setup">
            <Step num={1} title="Rent & SSH into GPU" code={`# Rent m:49870 (or your chosen instance)
# Vast.ai gives you SSH command like:
ssh -p PORT root@VAST_IP -L 8080:localhost:8080

# First check GPU
nvidia-smi  # Should show 2x RTX 3090`} />
            <Step num={2} title="Install Ollama + Models" code={`# Install Ollama
curl -fsSL https://ollama.com/install.sh | sh

# Start Ollama (listen on all interfaces for tunnel)
OLLAMA_HOST=0.0.0.0 ollama serve &

# Pull Qwen3 models
ollama pull qwen3:32b        # ~20GB, best quality
ollama pull qwen3:30b-a3b    # ~19GB, fastest
ollama pull qwen3:14b        # ~9GB, lightweight
ollama pull qwen3:8b         # ~5GB, ultra-light

# Test
ollama run qwen3:30b-a3b "Write a 100-word SEO article about coffee"`} />
            <Step num={3} title="Install ComfyUI (Image + Video)" code={`# Install ComfyUI
cd /root
git clone https://github.com/comfyanonymous/ComfyUI.git
cd ComfyUI
pip install -r requirements.txt

# Download image models
cd models/checkpoints/
# Stable Diffusion 3.5
wget https://huggingface.co/stabilityai/stable-diffusion-3.5-large/resolve/main/sd3.5_large.safetensors

# Download FLUX.1 (if desired)
# wget from HuggingFace...

# Download video models
cd /root/ComfyUI/models/
# Install Wan2GP for optimized video gen
cd /root
git clone https://github.com/deepbeepmeep/Wan2GP.git
cd Wan2GP && pip install -r requirements.txt

# Start ComfyUI
cd /root/ComfyUI
python main.py --listen 0.0.0.0 --port 8188 &`} />
            <Step num={4} title="Create Persistent SSH Tunnel from Hostinger" code={`# On Hostinger VPS — install autossh
apt install autossh

# Generate SSH key (if not done)
ssh-keygen -t ed25519 -f /root/.ssh/vastai_key

# Copy key to Vast.ai
ssh-copy-id -i /root/.ssh/vastai_key -p PORT root@VAST_IP

# Create systemd service for persistent tunnel
cat > /etc/systemd/system/vastai-tunnel.service << 'EOF'
[Unit]
Description=SSH Tunnel to Vast.ai GPU
After=network.target

[Service]
ExecStart=/usr/bin/autossh -M 0 -N \\
  -L 11434:localhost:11434 \\
  -L 8188:localhost:8188 \\
  -o "ServerAliveInterval=30" \\
  -o "ServerAliveCountMax=3" \\
  -o "StrictHostKeyChecking=no" \\
  -i /root/.ssh/vastai_key \\
  root@VAST_IP -p PORT
Restart=always
RestartSec=10

[Install]
WantedBy=multi-user.target
EOF

systemctl enable vastai-tunnel
systemctl start vastai-tunnel`} />
          </Section>

          <Section title="Phase 3: Connect Everything">
            <Step num={1} title="Update LiteLLM config to use tunnel" code={`# litellm_config.yaml — now uses localhost (via tunnel)
model_list:
  - model_name: qwen3-32b
    litellm_params:
      model: ollama/qwen3:32b
      api_base: http://localhost:11434
      
  - model_name: qwen3-30b-moe  
    litellm_params:
      model: ollama/qwen3:30b-a3b
      api_base: http://localhost:11434

# Restart LiteLLM
docker compose restart litellm`} />
            <Step num={2} title="Configure Flowise for IGNY8" code={`# In Flowise UI (flowise.yourdomain.com):
# 1. Add ChatOllama node → set base URL: http://litellm:4000
# 2. Set model: qwen3-30b-moe (for content writing)
# 3. Add Chroma vector store → URL: http://chromadb:8000
# 4. Build your IGNY8 content pipeline:
#    Prompt → Qwen3 → SEO optimizer → Output

# For image generation in IGNY8:
# Use HTTP Request node → http://localhost:8188/api/prompt
# Send ComfyUI workflow JSON for image generation`} />
            <Step num={3} title="Test the Full Pipeline" code={`# Test LLM via LiteLLM
curl http://localhost:4000/v1/chat/completions \\
  -H "Content-Type: application/json" \\
  -H "Authorization: Bearer sk-your-key" \\
  -d '{
    "model": "qwen3-30b-moe",
    "messages": [{"role": "user", "content": "Write SEO meta for a coffee shop"}]
  }'

# Test ComfyUI image gen
curl http://localhost:8188/api/prompt \\
  -H "Content-Type: application/json" \\
  -d '{"prompt": {...comfyui_workflow_json...}}'

# Test Open WebUI
# Visit chat.yourdomain.com → should connect to Ollama models`} />
          </Section>
        </div>
      )}

      {tab === "costs" && (
        <div>
          <Section title="Monthly Cost Breakdown" defaultOpen={true}>
            <div className="space-y-1 mb-4">
              <CostRow item="Hostinger VPS (KVM 4)" monthly="~$16-25/mo" notes="16GB RAM, 4 vCPU — Plesk + AI stack" />
              <CostRow item="Vast.ai GPU (m:49870)" monthly="~$200/mo" notes="2x RTX 3090, 48GB VRAM — 24/7" />
              <CostRow item="Domains / SSL" monthly="~$5/mo" notes="Subdomains for services" />
              <CostRow item="Plesk License" monthly="~$15/mo" notes="Web Admin Edition (or use free alternatives)" />
            </div>
            <div className="bg-gray-900 text-white p-4 rounded-xl">
              <div className="flex justify-between items-center">
                <span className="font-bold text-lg">Total Monthly</span>
                <span className="font-black text-2xl text-green-400">~$235-245/mo</span>
              </div>
              <p className="text-xs text-gray-400 mt-1">For unlimited AI text + image + video generation</p>
            </div>
          </Section>

          <Section title="vs. API Costs Comparison">
            <div className="space-y-3">
              <div className="bg-red-50 border border-red-200 p-3 rounded-lg">
                <p className="font-bold text-sm text-red-800">If Using APIs Instead:</p>
                <div className="text-xs text-red-700 mt-2 space-y-1">
                  <p>• OpenAI GPT-4o: ~$0.005/1K tokens → 1M tokens/day = $150/mo just for text</p>
                  <p>• Midjourney: $30/mo (limited) or $0.01-0.04/image</p>
                  <p>• Runway Gen-3: $0.05/sec video → 100 videos/mo = $250/mo</p>
                  <p>• DALL-E 3: $0.04/image → 500 images/mo = $20/mo</p>
                  <p className="font-bold mt-2">Conservative estimate: $400-600+/month with scale</p>
                </div>
              </div>
              <div className="bg-green-50 border border-green-200 p-3 rounded-lg">
                <p className="font-bold text-sm text-green-800">Your Self-Hosted Setup:</p>
                <div className="text-xs text-green-700 mt-2 space-y-1">
                  <p>• Unlimited text generation — $0 marginal cost</p>
                  <p>• Unlimited image generation — $0 marginal cost</p>
                  <p>• Unlimited video generation — $0 marginal cost</p>
                  <p>• Fixed cost regardless of usage volume</p>
                  <p className="font-bold mt-2">Fixed: ~$240/month — scales to infinity</p>
                </div>
              </div>
            </div>
          </Section>

          <Section title="When This Pays for Itself">
            <div className="bg-gray-50 p-4 rounded-lg text-xs space-y-2">
              <p><strong>Break-even point:</strong> Once IGNY8 processes ~50+ articles/month with images, self-hosting is cheaper than APIs.</p>
              <p><strong>At scale:</strong> If IGNY8 generates 500+ articles + 1000+ images + 100+ videos per month, you're saving $300-500+/month vs APIs.</p>
              <p><strong>Added bonus:</strong> No rate limits, no API key management, no vendor lock-in, full data privacy.</p>
              <p><strong>Revenue potential:</strong> Sell the same infrastructure as a service to Alorig clients — chat.yourdomain.com as a white-label AI assistant.</p>
            </div>
          </Section>
        </div>
      )}

      <div className="mt-8 bg-gray-50 rounded-xl p-4 text-xs text-gray-500">
        <p className="font-bold text-gray-700 mb-2">Architecture Summary</p>
        <p>Hostinger VPS handles web hosting (Plesk), AI orchestration (Flowise, LiteLLM, Open WebUI), and vector storage (Chroma). All AI inference routes through an SSH tunnel to Vast.ai's 2x RTX 3090 GPU server running Ollama (text), ComfyUI (images + video). Zero API costs — fixed monthly spend of ~$240 for unlimited generation.</p>
      </div>
    </div>
  );
}