"use client";

import { useEffect, useState } from "react";
import { Nav, useAuth } from "@/components/Nav";

interface SeriesFolder {
  folder: string;
  fileCount: number;
}

interface SeriesNode {
  id: string;
  name: string;
  fileCount: number;
  folders?: SeriesFolder[];
}

interface SeriesFile {
  id: string;
  node: string;
  resolution: string | null;
  available: boolean;
  releaseName?: string;
  path?: string | null;
  folder?: string | null;
}

interface Series {
  id: string;
  title: string;
  year: number | null;
  imdbId: string | null;
  tmdbId?: number | null;
  posterUrl?: string | null;
  episodesWithFiles?: number;
  fileCount?: number;
  nodes?: SeriesNode[];
  seasons: Array<{
    seasonNumber: number;
    episodes: Array<{
      seasonNumber: number;
      episodeNumber: number;
      title: string | null;
      files: SeriesFile[];
    }>;
  }>;
}

interface NodeOption {
  id: string;
  name: string;
  status?: string;
}

interface PathFile {
  id: string;
  node: string;
  path: string | null;
  folder: string | null;
  releaseName: string;
  mediaType: string;
  movie: { id: string; title: string; year: number | null } | null;
  series: {
    id: string;
    title: string;
    year: number | null;
    seasonNumber: number;
    episodeNumber: number;
  } | null;
  parsedHint: { title?: string; season?: number; episode?: number; year?: number } | null;
}

interface MetaHit {
  tmdbId: number | null;
  title: string;
  year: number | null;
  overview: string | null;
  posterUrl: string | null;
  imdbId: string | null;
  source?: "tmdb" | "omdb";
}

export default function SeriesPage() {
  useAuth();
  const [series, setSeries] = useState<Series[]>([]);
  const [pathFiles, setPathFiles] = useState<PathFile[] | null>(null);
  const [nodes, setNodes] = useState<NodeOption[]>([]);
  const [nodeId, setNodeId] = useState("");
  const [search, setSearch] = useState("");
  const [pathSearch, setPathSearch] = useState("");
  const [loading, setLoading] = useState(false);
  const [searched, setSearched] = useState(false);
  const [limitHit, setLimitHit] = useState(false);
  const [expanded, setExpanded] = useState<string | null>(null);
  const [busyFileId, setBusyFileId] = useState<string | null>(null);
  const [msg, setMsg] = useState("");
  const [linkSeriesId, setLinkSeriesId] = useState<string | null>(null);
  const [linkQuery, setLinkQuery] = useState("");
  const [linkHits, setLinkHits] = useState<MetaHit[]>([]);
  const [linkBusy, setLinkBusy] = useState(false);
  const [linkMsg, setLinkMsg] = useState("");
  const [folderRelink, setFolderRelink] = useState<{
    nodeId: string;
    nodeName: string;
    folder: string;
    fileCount: number;
  } | null>(null);
  const [folderQuery, setFolderQuery] = useState("");
  const [folderHits, setFolderHits] = useState<MetaHit[]>([]);
  const [folderBusy, setFolderBusy] = useState(false);
  const [folderMsg, setFolderMsg] = useState("");

  function hasSearchQuery(q = search, pathQ = pathSearch) {
    return q.trim().length >= 2 || pathQ.trim().length >= 2;
  }

  function loadSeries(q = search, filterNodeId = nodeId, pathQ = pathSearch) {
    if (!hasSearchQuery(q, pathQ)) {
      setSeries([]);
      setSearched(false);
      setLimitHit(false);
      return;
    }
    const params = new URLSearchParams();
    if (q.trim()) params.set("search", q.trim());
    if (filterNodeId) params.set("nodeId", filterNodeId);
    if (pathQ.trim()) params.set("path", pathQ.trim());
    setLoading(true);
    setSearched(true);
    fetch(`/api/v1/admin/series?${params}`, { credentials: "include" })
      .then((r) => r.json())
      .then((d) => {
        const list = d.series ?? [];
        setSeries(list);
        setLimitHit(Boolean(d.limit && list.length >= d.limit));
      })
      .finally(() => setLoading(false));
  }

  function loadPathFiles(pathQ = pathSearch, filterNodeId = nodeId) {
    if (!pathQ.trim() && !filterNodeId) {
      setPathFiles(null);
      return;
    }
    if (!pathQ.trim()) {
      setPathFiles(null);
      return;
    }
    const params = new URLSearchParams();
    if (pathQ.trim()) params.set("path", pathQ.trim());
    if (filterNodeId) params.set("nodeId", filterNodeId);
    fetch(`/api/v1/admin/media-files?${params}`, { credentials: "include" })
      .then((r) => r.json())
      .then((d) => setPathFiles(d.files ?? []));
  }

  function load(q = search, filterNodeId = nodeId, pathQ = pathSearch) {
    loadSeries(q, filterNodeId, pathQ);
    if (pathQ.trim()) loadPathFiles(pathQ, filterNodeId);
    else setPathFiles(null);
  }

  useEffect(() => {
    fetch("/api/v1/admin/nodes", { credentials: "include" })
      .then((r) => r.json())
      .then((d) => {
        const list = (d.nodes ?? []) as NodeOption[];
        setNodes(list.filter((n) => n.id).sort((a, b) => a.name.localeCompare(b.name)));
      });
  }, []);

  useEffect(() => {
    if (!searched) return;
    load(search, nodeId, pathSearch);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [nodeId]);

  async function rematchFile(fileId: string) {
    setBusyFileId(fileId);
    setMsg("");
    try {
      const res = await fetch(`/api/v1/admin/media-files/${fileId}/rematch`, {
        method: "POST",
        credentials: "include",
      });
      const data = await res.json();
      if (!res.ok) {
        setMsg(data.error?.message ?? "Rematch mislukt");
        return;
      }
      const label = data.series
        ? `${data.series.title} S${String(data.series.seasonNumber).padStart(2, "0")}E${String(data.series.episodeNumber).padStart(2, "0")}`
        : data.movie?.title ?? "onbekend";
      setMsg(`Opnieuw gekoppeld → ${label}`);
      load();
    } finally {
      setBusyFileId(null);
    }
  }

  function openLink(s: Series) {
    setLinkSeriesId(s.id);
    setLinkQuery(s.title);
    setLinkHits([]);
    setLinkMsg("");
    void searchMeta(s.title);
  }

  function openFolderRelink(opts: {
    nodeId: string;
    nodeName: string;
    folder: string;
    fileCount: number;
  }) {
    const folderName = opts.folder.split("/").filter(Boolean).pop() || opts.folder;
    setFolderRelink(opts);
    setFolderQuery(folderName);
    setFolderHits([]);
    setFolderMsg("");
    void searchFolderMeta(folderName);
  }

  async function searchFolderMeta(q = folderQuery) {
    const query = q.trim();
    if (!query) return;
    setFolderBusy(true);
    setFolderMsg("");
    try {
      const res = await fetch(
        `/api/v1/admin/metadata/search?type=series&q=${encodeURIComponent(query)}`,
        { credentials: "include" }
      );
      const data = await res.json();
      if (!res.ok) {
        setFolderMsg(data.error?.message ?? "Zoeken mislukt");
        setFolderHits([]);
        return;
      }
      setFolderHits(data.results ?? []);
      if (!(data.results ?? []).length) setFolderMsg("Geen resultaten");
    } finally {
      setFolderBusy(false);
    }
  }

  async function applyFolderRelink(hit: MetaHit) {
    if (!folderRelink) return;
    if (
      !confirm(
        `Alle ${folderRelink.fileCount} bestanden in\n${folderRelink.folder}\nop ${folderRelink.nodeName}\nherkoppelen naar “${hit.title}${hit.year ? ` (${hit.year})` : ""}”?`
      )
    ) {
      return;
    }
    setFolderBusy(true);
    setFolderMsg("Hele map herkoppelen…");
    try {
      const res = await fetch(`/api/v1/admin/library/relink-folder`, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          nodeId: folderRelink.nodeId,
          folder: folderRelink.folder,
          ...(hit.tmdbId != null ? { tmdbId: hit.tmdbId } : {}),
          ...(hit.imdbId ? { imdbId: hit.imdbId } : {}),
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setFolderMsg(data.error?.message ?? "Herkoppelen mislukt");
        return;
      }
      setMsg(
        `Map herkoppeld → ${data.seriesTitle}: ${data.moved}/${data.total} bestanden` +
          (data.failed ? ` (${data.failed} mislukt)` : "")
      );
      setFolderRelink(null);
      setExpanded(data.seriesId ?? expanded);
      load();
    } finally {
      setFolderBusy(false);
    }
  }

  async function applyFolderImdbDirect() {
    const raw = folderQuery.trim();
    if (!folderRelink) return;

    const tmdbFromUrl = raw.match(/themoviedb\.org\/(?:movie|tv)\/(\d+)/i)?.[1];
    const tmdbId = tmdbFromUrl
      ? parseInt(tmdbFromUrl, 10)
      : /^\d{1,8}$/.test(raw)
        ? parseInt(raw, 10)
        : null;
    const idLabel = tmdbId != null ? `TMDB ${tmdbId}` : raw;
    if (tmdbId == null && !/^tt\d+$/i.test(raw)) {
      setFolderMsg("Vul een titel, TMDB-id of IMDb-id (tt…) in.");
      return;
    }
    if (
      !confirm(
        `Alle ${folderRelink.fileCount} bestanden in\n${folderRelink.folder}\nherkoppelen via ${idLabel}?`
      )
    ) {
      return;
    }
    setFolderBusy(true);
    setFolderMsg(
      tmdbId != null ? "Hele map herkoppelen via TMDB…" : "Hele map herkoppelen via IMDb…"
    );
    try {
      const res = await fetch(`/api/v1/admin/library/relink-folder`, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          nodeId: folderRelink.nodeId,
          folder: folderRelink.folder,
          ...(tmdbId != null ? { tmdbId } : { imdbId: raw }),
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setFolderMsg(data.error?.message ?? "Herkoppelen mislukt");
        return;
      }
      setMsg(
        `Map herkoppeld → ${data.seriesTitle}: ${data.moved}/${data.total} bestanden` +
          (data.failed ? ` (${data.failed} mislukt)` : "")
      );
      setFolderRelink(null);
      setExpanded(data.seriesId ?? expanded);
      load();
    } finally {
      setFolderBusy(false);
    }
  }

  async function searchMeta(q = linkQuery) {
    const query = q.trim();
    if (!query) return;
    setLinkBusy(true);
    setLinkMsg("");
    try {
      const res = await fetch(
        `/api/v1/admin/metadata/search?type=series&q=${encodeURIComponent(query)}`,
        { credentials: "include" }
      );
      const data = await res.json();
      if (!res.ok) {
        setLinkMsg(data.error?.message ?? "Zoeken mislukt");
        setLinkHits([]);
        return;
      }
      setLinkHits(data.results ?? []);
      if (!(data.results ?? []).length) setLinkMsg("Geen resultaten");
    } finally {
      setLinkBusy(false);
    }
  }

  async function applyLink(hit: MetaHit) {
    if (!linkSeriesId) return;
    setLinkBusy(true);
    setLinkMsg("Koppelen…");
    try {
      const res = await fetch(`/api/v1/admin/series/${linkSeriesId}/link`, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          ...(hit.tmdbId != null ? { tmdbId: hit.tmdbId } : {}),
          ...(hit.imdbId ? { imdbId: hit.imdbId } : {}),
        }),
      });
      const data = await res.json();
      if (!res.ok) {
        setLinkMsg(data.error?.message ?? "Opslaan mislukt");
        return;
      }
      setLinkMsg(
        data.merged
          ? "Gekoppeld (samengevoegd). Metadata + afleveringen vernieuwd."
          : "Gekoppeld. Metadata + afleveringen vernieuwd."
      );
      setLinkSeriesId(null);
      setExpanded(data.seriesId ?? linkSeriesId);
      load();
    } finally {
      setLinkBusy(false);
    }
  }

  async function applyImdbDirect() {
    const raw = linkQuery.trim();
    if (!linkSeriesId) return;

    const tmdbFromUrl = raw.match(/themoviedb\.org\/(?:movie|tv)\/(\d+)/i)?.[1];
    const tmdbId = tmdbFromUrl
      ? parseInt(tmdbFromUrl, 10)
      : /^\d{1,8}$/.test(raw)
        ? parseInt(raw, 10)
        : null;
    if (tmdbId != null && Number.isFinite(tmdbId)) {
      setLinkBusy(true);
      setLinkMsg("Koppelen via TMDB…");
      try {
        const res = await fetch(`/api/v1/admin/series/${linkSeriesId}/link`, {
          method: "POST",
          credentials: "include",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ tmdbId }),
        });
        const data = await res.json();
        if (!res.ok) {
          setLinkMsg(data.error?.message ?? "Opslaan mislukt");
          return;
        }
        setLinkMsg("Gekoppeld via TMDB. Metadata vernieuwd.");
        setLinkSeriesId(null);
        setExpanded(data.seriesId ?? linkSeriesId);
        load();
      } finally {
        setLinkBusy(false);
      }
      return;
    }

    if (!/^tt\d+$/i.test(raw)) {
      setLinkMsg("Vul een titel, TMDB-id of IMDb-id (tt…) in.");
      return;
    }
    setLinkBusy(true);
    setLinkMsg("Koppelen via IMDb…");
    try {
      const res = await fetch(`/api/v1/admin/series/${linkSeriesId}/link`, {
        method: "POST",
        credentials: "include",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ imdbId: raw }),
      });
      const data = await res.json();
      if (!res.ok) {
        setLinkMsg(data.error?.message ?? "Opslaan mislukt");
        return;
      }
      setLinkMsg("Gekoppeld via IMDb. Metadata vernieuwd.");
      setLinkSeriesId(null);
      setExpanded(data.seriesId ?? linkSeriesId);
      load();
    } finally {
      setLinkBusy(false);
    }
  }

  const activeSeries = series.find((s) => s.id === linkSeriesId);
  const selectedNodeName = nodes.find((n) => n.id === nodeId)?.name;

  return (
    <>
      <Nav />
      <div className="container">
        <div className="page-header">
          <div>
            <div className="page-kicker">Library</div>
            <h1>Series</h1>
          </div>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              if (!hasSearchQuery()) {
                setMsg("Typ minstens 2 tekens in titel of pad.");
                return;
              }
              setMsg("");
              load();
            }}
            style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap", alignItems: "center" }}
          >
            <select
              value={nodeId}
              onChange={(e) => setNodeId(e.target.value)}
              style={{ marginBottom: 0, minWidth: 180 }}
              aria-label="Filter op node"
            >
              <option value="">Alle nodes</option>
              {nodes.map((n) => (
                <option key={n.id} value={n.id}>
                  {n.name}
                  {n.status === "OFFLINE" ? " (offline)" : ""}
                </option>
              ))}
            </select>
            <input
              value={search}
              onChange={(e) => setSearch(e.target.value)}
              placeholder="Zoek titel / IMDb…"
              style={{ width: 180, marginBottom: 0 }}
              autoFocus
            />
            <input
              value={pathSearch}
              onChange={(e) => setPathSearch(e.target.value)}
              placeholder="Zoek map/pad… (bv. Breaking Bad)"
              style={{ width: 260, marginBottom: 0 }}
            />
            <button type="submit" disabled={loading}>
              {loading ? "Zoeken…" : "Zoek"}
            </button>
          </form>
        </div>

        <p className="muted page-lead">
          Zoek op titel of pad (min. 2 tekens) — de hele bibliotheek wordt niet meer geladen. Per node
          zie je de show-map. Padzoeken toont ook losse bestanden om foutmatches opnieuw te koppelen.
          {searched
            ? nodeId
              ? ` Filter: ${selectedNodeName ?? "node"} · ${series.length} series.`
              : ` ${series.length} series.`
            : ""}
          {pathSearch.trim() && searched ? ` Padfilter: “${pathSearch.trim()}”.` : ""}
        </p>

        {msg && (
          <p className="muted" style={{ marginBottom: "1rem" }}>
            {msg}
          </p>
        )}

        {pathFiles && (
          <div className="card" style={{ marginBottom: "1.25rem" }}>
            <h2 style={{ fontSize: "1rem", marginBottom: "0.75rem", color: "#fafafa", textTransform: "none" }}>
              Bestanden op pad ({pathFiles.length})
            </h2>
            {pathFiles.length === 0 ? (
              <p className="muted" style={{ margin: 0 }}>
                Geen bestanden. Na node-upgrade 1.3.7+ eerst rescan zodat paden worden opgeslagen.
              </p>
            ) : (
              <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
                {pathFiles.map((f) => (
                  <div
                    key={f.id}
                    style={{
                      borderTop: "1px solid #2a2d3a",
                      paddingTop: "0.75rem",
                      fontSize: "0.875rem",
                    }}
                  >
                    <div style={{ color: "#e4e4e7" }}>{f.path || f.releaseName}</div>
                    <div className="muted tiny" style={{ marginTop: 4 }}>
                      {f.node}
                      {f.folder ? ` · map ${f.folder}` : ""}
                      {" · "}
                      {f.series
                        ? `gekoppeld: ${f.series.title} S${String(f.series.seasonNumber).padStart(2, "0")}E${String(f.series.episodeNumber).padStart(2, "0")}`
                        : f.movie
                          ? `gekoppeld als film: ${f.movie.title}`
                          : "niet gekoppeld"}
                      {f.parsedHint?.title
                        ? ` · parse: ${f.parsedHint.title}${
                            f.parsedHint.season != null
                              ? ` S${f.parsedHint.season}E${f.parsedHint.episode}`
                              : ""
                          }`
                        : ""}
                    </div>
                    <button
                      type="button"
                      style={{ marginTop: 8 }}
                      disabled={busyFileId === f.id}
                      onClick={() => void rematchFile(f.id)}
                    >
                      {busyFileId === f.id ? "Bezig…" : "Opnieuw matchen op pad"}
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {series.map((s) => (
          <div key={s.id} className="card">
            <div
              style={{ cursor: "pointer", display: "flex", justifyContent: "space-between", gap: "1rem" }}
              onClick={() => setExpanded(expanded === s.id ? null : s.id)}
            >
              <div style={{ display: "flex", gap: "0.75rem", alignItems: "flex-start" }}>
                {s.posterUrl && (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={s.posterUrl}
                    alt=""
                    width={40}
                    height={60}
                    style={{ objectFit: "cover", borderRadius: 4, flexShrink: 0 }}
                  />
                )}
                <div>
                  <strong>{s.title}</strong>
                  {s.year ? ` (${s.year})` : ""}
                  <div style={{ color: "#71717a", fontSize: "0.875rem", marginTop: 4 }}>
                    {s.episodesWithFiles ?? 0} afleveringen · {s.fileCount ?? 0} bestanden · {s.seasons.length}{" "}
                    seizoen(en)
                    {s.imdbId ? ` · ${s.imdbId}` : " · geen IMDb"}
                    {s.tmdbId ? ` · TMDB ${s.tmdbId}` : ""}
                  </div>
                  {(s.nodes?.length ?? 0) > 0 && (
                    <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 10 }}>
                      {s.nodes!.map((n) => (
                        <div key={n.id}>
                          <span
                            style={{
                              fontSize: "0.75rem",
                              padding: "2px 8px",
                              borderRadius: 999,
                              border: "1px solid #2a2d3a",
                              background: nodeId === n.id ? "#1e293b" : "#12141c",
                              color: nodeId === n.id ? "#e2e8f0" : "#a1a1aa",
                            }}
                          >
                            {n.name} · {n.fileCount} files
                          </span>
                          {(n.folders?.length ?? 0) > 0 ? (
                            <div className="muted mono tiny" style={{ marginTop: 4, paddingLeft: 4 }}>
                              {n.folders!.map((f) => (
                                <div
                                  key={f.folder}
                                  style={{
                                    display: "flex",
                                    gap: 8,
                                    flexWrap: "wrap",
                                    alignItems: "center",
                                    marginBottom: 4,
                                  }}
                                >
                                  <span>
                                    {f.folder}{" "}
                                    <span style={{ color: "#52525b" }}>({f.fileCount})</span>
                                  </span>
                                  <button
                                    type="button"
                                    style={{ fontSize: "0.7rem", padding: "2px 8px" }}
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      openFolderRelink({
                                        nodeId: n.id,
                                        nodeName: n.name,
                                        folder: f.folder,
                                        fileCount: f.fileCount,
                                      });
                                    }}
                                  >
                                    Hele map herkoppelen
                                  </button>
                                </div>
                              ))}
                            </div>
                          ) : (
                            <div className="muted tiny" style={{ marginTop: 4, paddingLeft: 4 }}>
                              Map onbekend — upgrade node naar 1.3.7+ en rescan
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
              <span style={{ color: "#71717a" }}>{expanded === s.id ? "▲" : "▼"}</span>
            </div>

            {expanded === s.id && (
              <div style={{ marginTop: "1rem" }}>
                <div style={{ marginBottom: "1rem", display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
                  <button
                    type="button"
                    onClick={(e) => {
                      e.stopPropagation();
                      openLink(s);
                    }}
                  >
                    Juiste content zoeken
                  </button>
                </div>
                {s.seasons.map((season) => (
                  <div key={season.seasonNumber} style={{ marginTop: "1rem", paddingLeft: "1rem" }}>
                    <h3 style={{ fontSize: "0.875rem", color: "#a1a1aa", marginBottom: "0.5rem" }}>
                      Season {season.seasonNumber}
                    </h3>
                    {season.episodes.map((ep) => (
                      <div key={ep.episodeNumber} style={{ fontSize: "0.875rem", padding: "0.35rem 0" }}>
                        <div>
                          S{String(ep.seasonNumber).padStart(2, "0")}E
                          {String(ep.episodeNumber).padStart(2, "0")} {ep.title ?? ""}
                        </div>
                        {ep.files.map((f) => (
                          <div
                            key={f.id}
                            style={{
                              color: "#71717a",
                              fontSize: "0.8rem",
                              marginTop: 2,
                              display: "flex",
                              gap: "0.5rem",
                              flexWrap: "wrap",
                              alignItems: "center",
                            }}
                          >
                            <span className="mono">
                              {f.node} · {f.path || f.releaseName || "?"}
                              {f.resolution ? ` (${f.resolution})` : ""}
                            </span>
                            <button
                              type="button"
                              className="danger"
                              style={{ fontSize: "0.75rem", padding: "2px 8px" }}
                              disabled={busyFileId === f.id}
                              onClick={(e) => {
                                e.stopPropagation();
                                void rematchFile(f.id);
                              }}
                            >
                              {busyFileId === f.id ? "…" : "Rematch"}
                            </button>
                          </div>
                        ))}
                      </div>
                    ))}
                  </div>
                ))}
              </div>
            )}
          </div>
        ))}

        {series.length === 0 && (
          <div className="card" style={{ textAlign: "center", color: "#71717a" }}>
            {loading
              ? "Zoeken…"
              : searched
                ? nodeId || pathSearch
                  ? "Geen series voor dit filter. Check scan-roots / pad / rescan."
                  : "Geen series gevonden"
                : "Typ een titel of pad en klik Zoek"}
          </div>
        )}
        {limitHit && (
          <p className="muted" style={{ marginTop: "0.75rem", textAlign: "center" }}>
            Max. 50 resultaten — verfijn je zoekopdracht als je titel er niet tussen staat.
          </p>
        )}
      </div>

      {linkSeriesId && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.65)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 50,
            padding: "1rem",
          }}
          onClick={() => !linkBusy && setLinkSeriesId(null)}
        >
          <div
            className="card"
            style={{ width: "min(640px, 100%)", maxHeight: "90vh", overflow: "auto", margin: 0 }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ fontSize: "1.1rem", color: "#fafafa", textTransform: "none", marginBottom: "0.5rem" }}>
              Juiste serie zoeken
            </h2>
            <p style={{ color: "#a1a1aa", fontSize: "0.85rem", marginBottom: "1rem" }}>
              Huidig: <strong style={{ color: "#e4e4e7" }}>{activeSeries?.title}</strong>
              {activeSeries?.year ? ` (${activeSeries.year})` : ""}
              {activeSeries?.imdbId ? ` · ${activeSeries.imdbId}` : " · geen IMDb"}
            </p>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                void searchMeta();
              }}
              style={{ display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }}
            >
              <input
                value={linkQuery}
                onChange={(e) => setLinkQuery(e.target.value)}
                placeholder="Titel, TMDB-id of IMDb-id (tt…)"
                style={{ flex: 1, minWidth: 200, marginBottom: 0 }}
                autoFocus
              />
              <button type="submit" disabled={linkBusy}>
                Zoek
              </button>
              <button type="button" disabled={linkBusy} onClick={() => void applyImdbDirect()}>
                Koppel id
              </button>
            </form>
            {linkMsg && (
              <p style={{ color: "#a1a1aa", fontSize: "0.85rem", marginBottom: "0.75rem" }}>{linkMsg}</p>
            )}
            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
              {linkHits.map((hit) => (
                <button
                  key={`${hit.source ?? "tmdb"}-${hit.tmdbId ?? hit.imdbId}`}
                  type="button"
                  disabled={linkBusy}
                  onClick={() => void applyLink(hit)}
                  style={{
                    display: "flex",
                    gap: "0.75rem",
                    textAlign: "left",
                    background: "#0f1117",
                    border: "1px solid #2a2d3a",
                    borderRadius: 8,
                    padding: "0.75rem",
                    cursor: "pointer",
                    color: "#fafafa",
                  }}
                >
                  {hit.posterUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={hit.posterUrl}
                      alt=""
                      width={48}
                      height={72}
                      style={{ objectFit: "cover", borderRadius: 4, flexShrink: 0 }}
                    />
                  ) : (
                    <div
                      style={{
                        width: 48,
                        height: 72,
                        background: "#1f2937",
                        borderRadius: 4,
                        flexShrink: 0,
                      }}
                    />
                  )}
                  <div>
                    <div>
                      <strong>{hit.title}</strong>
                      {hit.year ? ` (${hit.year})` : ""}
                    </div>
                    <div style={{ color: "#71717a", fontSize: "0.8rem" }}>
                      {hit.source === "omdb" ? "IMDb/OMDb" : "TMDB"}
                      {hit.tmdbId != null ? ` ${hit.tmdbId}` : ""}
                      {hit.imdbId ? ` · ${hit.imdbId}` : ""}
                    </div>
                    {hit.overview && (
                      <div
                        style={{
                          color: "#a1a1aa",
                          fontSize: "0.8rem",
                          marginTop: 4,
                          display: "-webkit-box",
                          WebkitLineClamp: 2,
                          WebkitBoxOrient: "vertical",
                          overflow: "hidden",
                        }}
                      >
                        {hit.overview}
                      </div>
                    )}
                  </div>
                </button>
              ))}
            </div>
            <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end" }}>
              <button type="button" className="danger" disabled={linkBusy} onClick={() => setLinkSeriesId(null)}>
                Annuleren
              </button>
            </div>
          </div>
        </div>
      )}

      {folderRelink && (
        <div
          style={{
            position: "fixed",
            inset: 0,
            background: "rgba(0,0,0,0.65)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            zIndex: 50,
            padding: "1rem",
          }}
          onClick={() => !folderBusy && setFolderRelink(null)}
        >
          <div
            className="card"
            style={{ width: "min(640px, 100%)", maxHeight: "90vh", overflow: "auto", margin: 0 }}
            onClick={(e) => e.stopPropagation()}
          >
            <h2 style={{ fontSize: "1.1rem", color: "#fafafa", textTransform: "none", marginBottom: "0.5rem" }}>
              Hele map herkoppelen
            </h2>
            <p style={{ color: "#a1a1aa", fontSize: "0.85rem", marginBottom: "1rem" }}>
              Node: <strong style={{ color: "#e4e4e7" }}>{folderRelink.nodeName}</strong>
              <br />
              Map: <span className="mono">{folderRelink.folder}</span>
              <br />
              {folderRelink.fileCount} bestanden — kies de juiste serie (niet de verkeerde TMDB-hit).
              Seizoen/aflevering blijft uit het pad.
            </p>
            <form
              onSubmit={(e) => {
                e.preventDefault();
                void searchFolderMeta();
              }}
              style={{ display: "flex", gap: "0.5rem", marginBottom: "0.75rem", flexWrap: "wrap" }}
            >
              <input
                value={folderQuery}
                onChange={(e) => setFolderQuery(e.target.value)}
                placeholder="Titel, TMDB-id of IMDb-id (tt…)"
                style={{ flex: 1, minWidth: 200, marginBottom: 0 }}
                autoFocus
              />
              <button type="submit" disabled={folderBusy}>
                Zoek
              </button>
              <button type="button" disabled={folderBusy} onClick={() => void applyFolderImdbDirect()}>
                Koppel id
              </button>
            </form>
            {folderMsg && (
              <p style={{ color: "#a1a1aa", fontSize: "0.85rem", marginBottom: "0.75rem" }}>{folderMsg}</p>
            )}
            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
              {folderHits.map((hit) => (
                <button
                  key={`${hit.source ?? "tmdb"}-${hit.tmdbId ?? hit.imdbId}`}
                  type="button"
                  disabled={folderBusy}
                  onClick={() => void applyFolderRelink(hit)}
                  style={{
                    display: "flex",
                    gap: "0.75rem",
                    textAlign: "left",
                    background: "#0f1117",
                    border: "1px solid #2a2d3a",
                    borderRadius: 8,
                    padding: "0.75rem",
                    cursor: "pointer",
                    color: "#fafafa",
                  }}
                >
                  {hit.posterUrl ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img
                      src={hit.posterUrl}
                      alt=""
                      width={48}
                      height={72}
                      style={{ objectFit: "cover", borderRadius: 4, flexShrink: 0 }}
                    />
                  ) : (
                    <div
                      style={{
                        width: 48,
                        height: 72,
                        background: "#1f2937",
                        borderRadius: 4,
                        flexShrink: 0,
                      }}
                    />
                  )}
                  <div>
                    <div>
                      <strong>{hit.title}</strong>
                      {hit.year ? ` (${hit.year})` : ""}
                    </div>
                    <div style={{ color: "#71717a", fontSize: "0.8rem" }}>
                      {hit.source === "omdb" ? "IMDb/OMDb" : "TMDB"}
                      {hit.tmdbId != null ? ` ${hit.tmdbId}` : ""}
                      {hit.imdbId ? ` · ${hit.imdbId}` : ""}
                    </div>
                    {hit.overview && (
                      <div
                        style={{
                          color: "#a1a1aa",
                          fontSize: "0.8rem",
                          marginTop: 4,
                          display: "-webkit-box",
                          WebkitLineClamp: 2,
                          WebkitBoxOrient: "vertical",
                          overflow: "hidden",
                        }}
                      >
                        {hit.overview}
                      </div>
                    )}
                  </div>
                </button>
              ))}
            </div>
            <div style={{ marginTop: "1rem", display: "flex", justifyContent: "flex-end" }}>
              <button
                type="button"
                className="danger"
                disabled={folderBusy}
                onClick={() => setFolderRelink(null)}
              >
                Annuleren
              </button>
            </div>
          </div>
        </div>
      )}
    </>
  );
}