// Plex Source screen — a single media-source connection page: breadcrumb-style header, a
// Connection card driving the OAuth pin-flow sign-in/out affordance, and a Servers list with
// per-server refresh + edit-libraries/edit-path-replacements actions. Static mockup shows the
// populated "signed in, servers discovered" state plus a toggled sign-out confirm overlay.
(function () {
  const NS = window.ChicoryTVDesignSystem_eb3b61;
  const { Button, IconButton, StatusDot, Card, Spinner, Tooltip } = NS;
  const Ico = window.Ico;
  const mono = { fontFamily: "var(--font-mono)", fontVariantNumeric: "tabular-nums" };

  const SERVERS = [
    { id: 1, name: "Attic Media Server", address: "192.168.1.42:32400", status: "ok" },
    { id: 2, name: "plex.tblindustries.be", address: "203.0.113.7:32400", status: "ok" },
    { id: 3, name: "Backup NAS", address: "192.168.1.88:32400", status: "live" },
  ];

  function ConnectionRow({ label, value }) {
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 0", borderBottom: "1px solid var(--border-hairline)" }}>
        <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>{label}</span>
        <span style={{ ...mono, font: "var(--text-xs)/1 var(--font-mono)", color: "var(--text-primary)" }}>{value}</span>
      </div>
    );
  }

  function ServerRow({ s }) {
    const [hover, setHover] = React.useState(false);
    const busy = s.status === "live";
    return (
      <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{ display: "flex", alignItems: "center", gap: 14, padding: "14px 18px", borderTop: "1px solid var(--border-hairline)", background: hover ? "var(--ctv-surface-2)" : "transparent", transition: "background var(--dur-fast)" }}>
        <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 34, height: 34, borderRadius: "var(--radius-sm)", background: "var(--ctv-surface-3)", flex: "0 0 auto" }}>
          <Ico n="Server" s={16} color="var(--text-secondary)" />
        </span>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ font: "var(--weight-medium) var(--text-sm)/1.3 var(--font-sans)", color: "var(--text-primary)" }}>{s.name}</div>
          <div style={{ marginTop: 2, ...mono, font: "var(--text-xs)/1 var(--font-mono)", color: "var(--text-disabled)" }}>{s.address}</div>
        </div>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}>
          <StatusDot status={busy ? "live" : "ok"} pulse={busy} size={7} />
          <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: busy ? "var(--status-live)" : "var(--text-secondary)" }}>{busy ? "Busy" : "Ready"}</span>
        </span>
        <span style={{ width: 1, height: 22, background: "var(--border-hairline)" }} />
        <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
          <Tooltip label="Refresh"><IconButton size="sm" title={"Refresh " + s.name} disabled={busy}><Ico n="RefreshCw" s={15} /></IconButton></Tooltip>
          <Button size="sm" variant="ghost">Edit Libraries</Button>
          <Button size="sm" variant="ghost">Edit Path Replacements</Button>
        </span>
      </div>
    );
  }

  function SignOutOverlay({ onCancel }) {
    return (
      <div style={{ position: "absolute", inset: 0, background: "rgba(0,0,0,0.45)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 10 }}>
        <div style={{ width: 400, maxWidth: "90%", background: "var(--surface-raised)", border: "1px solid var(--border-hairline)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-lg)", padding: 22 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: "var(--radius-sm)", background: "var(--ctv-error-soft)" }}>
              <Ico n="TriangleAlert" s={16} color="var(--status-error)" />
            </span>
            <span style={{ font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Sign out of Plex</span>
          </div>
          <p style={{ margin: "14px 0 0", font: "var(--text-sm)/1.5 var(--font-sans)", color: "var(--text-secondary)" }}>
            Signing out removes all synced Plex servers, libraries, and content from ErsatzTV. This cannot be undone. Continue?
          </p>
          <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, marginTop: 20 }}>
            <Button variant="ghost" onClick={onCancel}>Cancel</Button>
            <Button variant="danger" startIcon={<Ico n="LogOut" s={14} />}>Sign out</Button>
          </div>
        </div>
      </div>
    );
  }

  function PlexSource() {
    const [confirmOpen, setConfirmOpen] = React.useState(false);

    return (
      <div style={{ display: "flex", flexDirection: "column", height: "100%", position: "relative" }}>
        <div style={{ flex: 1, overflow: "auto", padding: "20px 24px 28px" }}>
          {/* breadcrumb-style header (screen content, not app chrome) */}
          <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16, marginBottom: 20 }}>
            <div>
              <span style={{ display: "block", font: "var(--weight-semibold) var(--text-2xs)/1 var(--font-sans)", letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--text-disabled)" }}>Media source</span>
              <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 6 }}>
                <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 30, height: 30, borderRadius: "var(--radius-sm)", background: "var(--ctv-accent-soft)" }}>
                  <Ico n="Server" s={16} color="var(--ctv-accent)" />
                </span>
                <h2 style={{ margin: 0, font: "var(--weight-semibold) var(--text-xl)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Plex</h2>
              </div>
              <p style={{ margin: "8px 0 0", font: "var(--text-sm)/1.5 var(--font-sans)", color: "var(--text-secondary)", maxWidth: 520 }}>
                Sign in to Plex to discover servers and choose which libraries to sync.
              </p>
            </div>
            <Button variant="ghost" startIcon={<Ico n="ArrowLeft" s={14} />}>Back to libraries</Button>
          </div>

          {/* Connection card */}
          <Card
            title={<h3 style={{ margin: 0, font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Connection</h3>}
            subtitle="Signed in to Plex."
            actions={
              <Button onClick={() => setConfirmOpen(true)} variant="secondary" startIcon={<Ico n="LogOut" s={14} />}>Sign out of Plex</Button>
            }
          >
            <div style={{ display: "flex", flexDirection: "column" }}>
              <ConnectionRow label="Account" value="timothy@tblindustries.be" />
              <ConnectionRow label="Token expires" value="2027-01-04" />
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "9px 0" }}>
                <span style={{ font: "var(--text-xs)/1 var(--font-sans)", color: "var(--text-secondary)" }}>Servers discovered</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <StatusDot status="ok" size={7} />
                  <span style={mono}>{SERVERS.length}</span>
                </span>
              </div>
            </div>
          </Card>

          {/* Servers card */}
          <div style={{ marginTop: 16 }}>
            <Card
              title={<h3 style={{ margin: 0, font: "var(--weight-semibold) var(--text-md)/1.2 var(--font-sans)", color: "var(--text-primary)" }}>Servers</h3>}
              subtitle={SERVERS.length + " servers discovered."}
              padded={false}
            >
              <div>
                {SERVERS.map((s) => <ServerRow key={s.id} s={s} />)}
              </div>
            </Card>
          </div>

          {/* transient sign-in state, for reference (kept visually collapsed/muted below the fold) */}
          <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", borderRadius: "var(--radius-md)", background: "var(--ctv-accent-soft)", border: "1px solid var(--border-hairline)" }}>
            <Spinner size={14} tone="accent" />
            <span style={{ font: "var(--text-xs)/1.4 var(--font-sans)", color: "var(--text-secondary)" }}>
              Example in-flight state: <span style={{ color: "var(--text-primary)" }}>Waiting for you to approve access on plex.tv…</span>
            </span>
          </div>
        </div>

        {confirmOpen && <SignOutOverlay onCancel={() => setConfirmOpen(false)} />}
      </div>
    );
  }

  window.CTVPlexSource = PlexSource;
})();
