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

export const metadata = {
  title: 'Install Jellyfin — DashCaddy Docs',
  description: 'Install and configure Jellyfin via DashCaddy. Free software media system - alternative to Plex',
};

export default function jellyfinDocsPage() {
  return (
    <div className="flex min-h-screen flex-col bg-surface-950 text-surface-50">
      <Navbar />
      <DocsLayout
        title="Install Jellyfin"
        intro="Free software media system - alternative to Plex"
      >
<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: Media</span>
          <span className="rounded-full px-3 py-1" style={{ backgroundColor: '#7cf2c022', color: '#7cf2c0' }}>Difficulty: Easy</span>
          <span className="rounded-full bg-surface-800 px-3 py-1 text-surface-300">Docker image: <code className="text-brand-400">jellyfin/jellyfin:latest</code></span>
        </div>

        <h2>What is Jellyfin?</h2>
        <p>Free software media system - alternative to Plex</p>
        <p>Jellyfin 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 Jellyfin, not installing it.</p>

        <h2>Prerequisites</h2>
        <ul>
          <li>A running DashCaddy host with the dashboard accessible.</li>
          <li>A host path to mount as the <strong>media library</strong> (default: <code>/media</code>).</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>Jellyfin</strong> from the <em>Media</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>jellyfin/jellyfin: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>jellyfin.&lt;your-domain&gt;</code>.</li>
              <li>Wait for the container health check (<code>/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": "jellyfin",
    "host": "local",
    "subdomain": "jellyfin",
    "port": "&#123;&#123;PORT&#125;&#125;",
    "environment": &#123;
      "JELLYFIN_PublishedServerUrl": ""
    &#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 Jellyfin on my home host and expose it at <code>jellyfin.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>Complete the initial setup wizard</li>
          <li>Add your media libraries</li>
          <li>Configure user accounts and permissions</li>
        </ol>

        <h2>Media library path notes</h2>
        <p>The media mount path you set at deploy time is what Jellyfin will see as <code>/media</code>. For multi-library setups (movies + TV + music), bind the parent folder and let Jellyfin discover subfolders automatically.</p>
        <ul>
          <li><strong>Permissions:</strong> Jellyfin runs as a non-root user. Make sure your media files are readable by UID <code>1000</code> (or whichever the container expects — check the <em>Logs</em> tab on first run).</li>
          <li><strong>Performance:</strong> Put the media library on the same storage pool as DashCaddy itself; cross-pool mounts add 10–30% latency on first scan.</li>
        </ul>


        <h2>Volumes and persistent data</h2>
        <p>DashCaddy creates these volume mounts:</p>
        <ul>
          <li><code>/opt/jellyfin/config:/config</code></li>
          <li><code>/opt/jellyfin/cache:/cache</code></li>
          <li><code>MEDIA_PATH:/media</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>JELLYFIN_PublishedServerUrl</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>jellyfin/jellyfin: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 → Jellyfin → Update</strong>.</p>

        <h2>Backups</h2>
        <p>The config volume for Jellyfin 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 Jellyfin:</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>Library shows empty:</strong> confirm the media mount path is readable by the container UID and that the directory contains the file extensions Jellyfin indexes.</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>Jellyfin is in the <strong>Media</strong> category. Common pairings:</p>
        <ul>
          <li><a href="/docs/catalog/plex" className="text-brand-400 underline">Plex</a> (managed alternative)</li>
          <li><a href="/docs/catalog/tautulli" className="text-brand-400 underline">Tautulli</a> (monitoring)</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>jellyfin</code>. If anything here looks wrong, edit the file and the change will appear in the next docs rebuild.
        </p>

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