"use client";

// Where X posts appear — `social.x.visibility` (release 17 slice XP), inside the
// X account session section. "Public" builds an X channel's posts into every
// site that has the channel; "Private" keeps them out of every public site and
// builds them only into private sites (site.json `audience`). The rule is
// common/lib/postsVisibility.ts; nothing on disk changes and fetching does not.

import { useEffect, useState, useTransition } from "react";
import { setXPostsVisibilityAction } from "../xSessionActions";
import type { XPostsVisibility } from "yt-dlp-transcript-common/social/xCookieSource";

export function XPostsVisibilityControl({
  initial,
}: {
  initial: XPostsVisibility;
}) {
  const [visibility, setVisibility] = useState<XPostsVisibility>(initial);
  const [error, setError] = useState<string | null>(null);
  const [note, setNote] = useState<string | null>(null);
  const [saving, startSaving] = useTransition();

  // Another tab's choice re-renders the page with a new value; take it.
  useEffect(() => setVisibility(initial), [initial]);

  const choose = (choice: string) =>
    startSaving(async () => {
      setError(null);
      setNote(null);
      const res = await setXPostsVisibilityAction(choice);
      if (res.ok) {
        setVisibility(res.visibility);
        setNote("Saved. Published sites change on their next build and deploy.");
      } else {
        setError(res.error);
      }
    });

  return (
    <div data-x-posts-visibility="" className="flex flex-col gap-1">
      <div className="flex flex-wrap items-center gap-2">
        <label htmlFor="x-posts-visibility" className="text-sm">
          Where X posts appear
        </label>
        <select
          id="x-posts-visibility"
          value={visibility}
          onChange={(e) => choose(e.target.value)}
          disabled={saving}
          className="rounded-md border border-border bg-background px-2 py-1 text-sm disabled:opacity-50"
        >
          <option value="public">Public — every site that has the channel</option>
          <option value="private">Private — private sites only</option>
        </select>
      </div>
      <p className="text-xs text-muted-foreground">
        Private leaves every X channel and its posts out of every public site
        and builds them only into sites whose audience is private, which are
        never deployed; nothing is deleted and fetching goes on. Sites already
        published change on their next build and deploy.
      </p>
      {note && (
        <p role="status" aria-label="x posts visibility saved" className="text-xs text-success">
          {note}
        </p>
      )}
      {error && (
        <p role="alert" className="text-xs text-destructive">
          {error}
        </p>
      )}
    </div>
  );
}