import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import DocsLayout from '@/components/docs/DocsLayout';

export const metadata = {
  title: 'Install Grafana — DashCaddy Docs',
  description: 'Install and configure Grafana via DashCaddy. Analytics and interactive visualization platform',
};

export default function grafanaDocsPage() {
  return (
    <div className="flex min-h-screen flex-col bg-surface-950 text-surface-50">
      <Navbar />
      <DocsLayout
        title="Install Grafana"
        intro="Analytics and interactive visualization platform"
      >
<div className="mb-6 flex flex-wrap gap-3 text-xs font-semibold">
          <span className="rounded-full bg-surface-800 px-3 py-1 text-surface-300">Category: Monitoring</span>
          <span className="rounded-full px-3 py-1" style={{ backgroundColor: '#f5a62322', color: '#f5a623' }}>Difficulty: Advanced</span>
          <span className="rounded-full bg-surface-800 px-3 py-1 text-surface-300">Docker image: <code className="text-brand-400">grafana/grafana:latest</code></span>
        </div>

        <h2>What is Grafana?</h2>
        <p>Analytics and interactive visualization platform</p>
        <p>Grafana ships as a self-contained Docker image that DashCaddy provisions with one click. The platform handles the container lifecycle, DNS, reverse proxy, HTTPS certificate, and persistent storage so you can focus on using Grafana, not installing it.</p>

        <h2>Prerequisites</h2>
        <ul>
          <li>A running DashCaddy host with the dashboard accessible.</li>
          <li>No special host paths required.</li>
          
          <li>If you want a stable subdomain: Technitium DNS recommended (otherwise DashCaddy will use direct IP access).</li>
        </ul>

        <h2>Install via the DashCaddy dashboard</h2>
        <ol>
          <li>Sign in at <code>https://status.sami</code> (or your host's dashboard URL).</li>
          <li>Open <strong>Apps → Catalog</strong> and select <strong>Grafana</strong> from the <em>Monitoring</em> category.</li>
          <li>Choose your host (or pick <em>Local</em> if you have one host).</li>
          <li>Fill in any required fields (notably the media library path and any claim token).</li>
          <li>Click <strong>Deploy</strong>. DashCaddy will:
            <ol>
              <li>Pull the <code>grafana/grafana:latest</code> image.</li>
              <li>Create persistent volumes for config and data.</li>
              <li>Reserve a host port and wire it through Caddy.</li>
              <li>Issue a Let's Encrypt certificate for <code>grafana.&lt;your-domain&gt;</code>.</li>
              <li>Wait for the container health check (<code>/api/health</code>) to pass.</li>
            </ol>
          </li>
          <li>After ~30–60 seconds the dashboard will turn the row <strong>Running</strong> and the URL will become clickable.</li>
        </ol>

        <h2>Install via the REST API</h2>
        <p>If you script deployments or use the MCP / AI Intent Router, install with:</p>
        <pre className="overflow-x-auto rounded-lg bg-surface-900 p-4 text-sm"><code>curl -X POST https://your-dashcaddy-host/api/v1/apps/deploy \\
  -H "Authorization: Bearer $DASHCADDY_API_TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '&#123;
    "template": "grafana",
    "host": "local",
    "subdomain": "grafana",
    "port": "&#123;&#123;PORT&#125;&#125;",
    "environment": &#123;
      "GF_SECURITY_ADMIN_PASSWORD": ""
    &#125;,
    "labels": &#123; "managed-by": "dashcaddy" &#125;
  &#125;'</code></pre>
        <p>Response returns a deployment ID. Poll <code>GET /api/v1/apps/&#123;id&#125;/status</code> until <code>state === &quot;running&quot;</code>.</p>

        <h2>Install via the AI Intent Router</h2>
        <p>From any chat surface wired to DashCaddy's MCP server, just say:</p>
        <blockquote className="border-l-4 border-brand-500/50 bg-brand-500/5 p-4 rounded-r-lg">
          <p className="text-surface-300">"Deploy Grafana on my home host and expose it at <code>grafana.sami</code>"</p>
        </blockquote>
        <p>The Intent Router will pick the right template, prompt you for any missing fields, and start the deployment.</p>

        <h2>Post-install: first-run checklist</h2>
        <ol>
          <li>Open the new <code>grafana.&lt;your-domain&gt;</code> URL.</li>
          <li>Complete the upstream Grafana setup wizard (create admin user, accept EULA, etc.).</li>
          <li>Configure backups from <strong>Settings → Backups</strong> — the default daily snapshot will capture the data volume.</li>
        </ol>



        <h2>Volumes and persistent data</h2>
        <p>DashCaddy creates these volume mounts:</p>
        <ul>
          <li><code>/opt/grafana/data:/var/lib/grafana</code></li>
        </ul>
        <p>All paths are absolute host paths; the left side is the container-side mount. Restarting the container never deletes the data; reinstalling the template preserves it unless you explicitly check <em>Wipe data</em> on the deploy form.</p>

        <h2>Environment variables</h2>
        <ul><li><code>GF_SECURITY_ADMIN_PASSWORD</code></li></ul>
        <p>Override any of these from the deploy form's <em>Environment</em> panel, or programmatically in the API <code>environment</code> object.</p>

        <h2>Updating</h2>
        <p>DashCaddy's built-in Watchtower integration will pull <code>grafana/grafana:latest</code> every 24 hours and restart your container with zero downtime if the image digest changes. To force an update immediately, click <strong>Apps → Grafana → Update</strong>.</p>

        <h2>Backups</h2>
        <p>The config volume for Grafana is included in DashCaddy's default nightly snapshot. To restore on a fresh host, redeploy the same template and DashCaddy will prompt to restore from the most recent snapshot during install.</p>

        <h2>Troubleshooting</h2>
        <p>Common issues with Grafana:</p>
        <ul>
          <li><strong>Container won't start:</strong> check the dashboard's <em>Logs</em> tab. Most startup failures are permission errors on the media/config volume.</li>
          
          
          <li><strong>Slow first scan:</strong> expected for large libraries on first run. Subsequent restarts are fast.</li>
        </ul>
        <p>For layer-by-layer diagnostics, see the <a href="/docs/troubleshooting" className="text-brand-400 underline">Troubleshooting guide</a>.</p>

        <h2>Related services</h2>
        <p>Grafana is in the <strong>Monitoring</strong> category. Common pairings:</p>
        <ul>
          <li><a href="/docs/catalog/uptime-kuma" className="text-brand-400 underline">Uptime Kuma</a></li>
          <li><a href="/docs/catalog/dozzle" className="text-brand-400 underline">Dozzle</a></li>
        </ul>

        <hr className="my-8 border-surface-700" />
        <p className="text-sm text-surface-400">
          Last reviewed against DashCaddy product version in <code>dashcaddy-api/src/docker/app-templates.js</code>.
          Template ID: <code>grafana</code>. If anything here looks wrong, edit the file and the change will appear in the next docs rebuild.
        </p>

      </DocsLayout>
      <Footer />
    </div>
  );
}