import { type ReactNode, useState } from "react";
import { qk } from "../../lib/queryKeys";
import { usePlexCollectionTitles } from "../../lib/usePlexCollectionTitles";
import { useTranslation } from "react-i18next";
import { vocab } from "../../lib/vocab";
import { plexLang } from "../../i18n";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { ListMusic, Plus, SlidersHorizontal } from "lucide-react";
import {
  api,
  oneYear,
  plexFilterCount,
  singleYear,
  type PlexFacets,
  type PlexFilters,
} from "../../lib/api";
import { notifyActionError } from "../../lib/actionErrors";
import { useDebounced } from "../../lib/useDebounced";
import FilterRail from "../../components/ui/FilterRail";
import { type PanelItem } from "../../components/ui/PanelGroups";
import MatchToggle from "../../components/ui/MatchToggle";
import FilterChipGroup from "../../components/ui/FilterChipGroup";
import Combobox, { type ComboboxOption } from "../../components/ui/Combobox";
import SavedViewsPopover from "../../features/filters/SavedViewsPopover";
import PersonalViewsModal from "../../features/filters/PersonalViewsModal";
import { SavedViewsScope } from "../../features/filters/savedViewsContext";
import { usePlexSavedViews } from "./plexSavedViews";
import { usePlex, usePlexActions } from "./plexContext";
import { DismissibleChip } from "../../components/ui/Chip";
import { Input } from "../../components/ui/Input";
import YearPicker from "../../components/ui/YearPicker";
import { StateMessage } from "../../components/ui/QueryState";
import { useRail } from "../../lib/useRail";
import { msg } from "../../lib/notifications";

// The Plex module's left filter column — now the shared floating SidePanel with its filter groups
// as reorderable "islands" (same system as the feed rail). Movie libraries get the full metadata
// set; shows keep library + sort. The filter state lives in PlexProvider; facets come from
// the backend so the panel only offers what the library actually contains.

const RATING_STEPS = [5, 6, 7, 8, 9];
const ADDED_OPTS = ["24h", "1w", "1m", "6m", "1y"] as const;
const DURATION_BUCKETS: { key: string; min: number | null; max: number | null }[] = [
  { key: "short", min: null, max: 90 * 60 },
  { key: "mid", min: 90 * 60, max: 120 * 60 },
  { key: "long", min: 120 * 60, max: null },
];

export default function PlexSidebar() {
  // Its layout and collapse flag are its own (lib/useRail), so the shell only places it.
  const { layout, setLayout, onResetLayout, collapsed, onToggleCollapse } = useRail("plex");
  const { t, i18n } = useTranslation();
  // Scope / watch-state / sort / expanded filters live in PlexProvider (shared with PlexBrowse and
  // the header search box); this rail is the primary editor of them. Opening a playlist is a
  // hand-off to PlexBrowse via the shared `playlistOpen` slot.
  const { scope, show, filters } = usePlex();
  const { setFilters } = usePlexActions();
  // Personal ("saved") views for the Plex module: the rail header icon opens a quick-pick popover, the
  // title opens the full manager modal (same shared components as the feed).
  // They reach the shared views UI in this rail through the scope below.
  const savedViews = usePlexSavedViews();
  const { openModal, modalOpen } = savedViews;
  // Titles are display-only (chip labels) — keep them OUT of the facet query key so renaming/relabelling
  // never refetches. collectionMode stays IN the key: any/all changes the result set.
  const { collectionTitles: _cts, ...facetKey } = filters;
  const lang = plexLang(i18n.language); // HU/EN genre vocabulary — refetch facets on a language switch
  const facetsQ = useQuery({
    queryKey: qk.plexFacets(scope, show, facetKey, lang),
    queryFn: () => api.plexFacets(scope, filters, show, lang),
    enabled: !!scope,
    placeholderData: (prev) => prev,
  });
  const facets = facetsQ.data;

  const fCount = plexFilterCount(filters);
  // Scope and sort moved to the header / above-the-grid toolbar; the panel badge now counts only
  // the filters that still live in this panel (expanded filters + watch-state).
  const activeCount = fCount + (show !== "all" ? 1 : 0);

  const patch = (p: Partial<PlexFilters>) => setFilters({ ...filters, ...p });

  const durBucketKey = DURATION_BUCKETS.find(
    (b) => (filters.durationMin ?? null) === b.min && (filters.durationMax ?? null) === b.max,
  )?.key;
  // Directors + actors have no picker (they're added from the detail/cast surfaces) — this section
  // just lists them as removable chips. Studios now have their own picker section (below).
  const peopleActive = filters.directors.length + filters.actors.length > 0;

  // A section the facets fill, shown when its facet has values.
  const facetSection = (
    id: string,
    title: string,
    has: (f: PlexFacets) => boolean,
    body: (f: PlexFacets) => ReactNode,
  ): PanelItem[] => (facets && has(facets) ? [{ id, title, body: body(facets) }] : []);
  // While the facets are not here, the rail says so ONCE — a first load or a failed one must not
  // read as a library with no genres (honest states) — with a way to try again. In the Year section,
  // which every library has; in the rail's foot if the reader hid it.
  const facetsStatus =
    facets || (!facetsQ.isError && !facetsQ.isLoading) ? null : (
      <FacetsStatus failed={facetsQ.isError} onRetry={() => void facetsQ.refetch()} />
    );
  const yearHidden = !!layout.hidden.year;

  // Group bodies (no title — the PanelGroup card supplies it). Only available groups are pushed,
  // so facet-gated / scope-gated sections drop out cleanly; PanelGroups orders them by the saved
  // layout and lets the user reorder / hide / collapse them.
  const items: PanelItem[] = [
    {
      id: "playlists",
      title: t("plex.playlist.section"),
      body: <PlaylistPicker />,
    },
    ...(peopleActive
      ? [
          {
            id: "people",
            title: t("plex.filter.active"),
            body: (
              <div className="flex flex-wrap gap-1.5">
                {filters.directors.map((d) => (
                  <RemovableChip
                    key={`d:${d}`}
                    label={d}
                    onRemove={() => patch({ directors: filters.directors.filter((x) => x !== d) })}
                  />
                ))}
                <MatchToggle
                  picked={filters.actors.length}
                  className="w-full"
                  value={filters.actorMode ?? "any"}
                  onChange={(m) => patch({ actorMode: m })}
                />
                {filters.actors.map((a) => (
                  <RemovableChip
                    key={`a:${a}`}
                    label={a}
                    onRemove={() => patch({ actors: filters.actors.filter((x) => x !== a) })}
                  />
                ))}
              </div>
            ),
          },
        ]
      : []),
    {
      id: "collection",
      title: t("plex.filter.collection"),
      body: (
        <CollectionPicker
          values={filters.collections}
          titles={filters.collectionTitles}
          mode={filters.collectionMode ?? "any"}
          onChange={(collections, collectionTitles) => patch({ collections, collectionTitles })}
          onModeChange={(m) => patch({ collectionMode: m })}
        />
      ),
    },
    {
      id: "rating",
      title: t("plex.filter.rating"),
      body: (
        <FilterChipGroup
          ariaLabel={t("plex.filter.rating")}
          value={filters.ratingMin == null ? "" : String(filters.ratingMin)}
          options={[
            { value: "", label: t("plex.filter.any") },
            ...RATING_STEPS.map((r) => ({ value: String(r), label: `${r}+` })),
          ]}
          onChange={(v) => patch({ ratingMin: v === "" ? null : Number(v) })}
        />
      ),
    },
    ...facetSection(
      "genre",
      t("plex.filter.genre"),
      (f) => f.genres.length > 0,
      (f) => (
        <>
          <MatchToggle
            picked={filters.genres.length}
            value={filters.genreMode ?? "any"}
            onChange={(m) => patch({ genreMode: m })}
          />
          <Combobox
            label={t("plex.filter.genre")}
            options={f.genres}
            selected={filters.genres}
            onChange={(next) => patch({ genres: next })}
          />
        </>
      ),
    ),
    {
      id: "year",
      title: t("plex.filter.year"),
      body: (
        <PlexYearFilter
          filters={filters}
          facets={facets}
          status={yearHidden ? null : facetsStatus}
          patch={patch}
        />
      ),
    },
    ...(scope === "movie"
      ? [
          {
            id: "duration",
            title: t("plex.filter.duration"),
            body: (
              <FilterChipGroup
                ariaLabel={t("plex.filter.duration")}
                // "Any" is selected only when there is genuinely no duration filter; a set-but-off-bucket
                // duration (e.g. stale state after a bucket-boundary change) selects nothing, not "Any".
                value={
                  durBucketKey ??
                  (filters.durationMin == null && filters.durationMax == null ? "" : " ")
                }
                options={[
                  { value: "", label: t("plex.filter.any") },
                  ...DURATION_BUCKETS.map((b) => ({
                    value: b.key,
                    label: t(`plex.filter.durationOpt.${b.key}`),
                  })),
                ]}
                onChange={(key) => {
                  const b = DURATION_BUCKETS.find((x) => x.key === key);
                  patch({ durationMin: b?.min ?? null, durationMax: b?.max ?? null });
                }}
              />
            ),
          },
        ]
      : []),
    {
      id: "added",
      title: t("plex.filter.added"),
      body: (
        <FilterChipGroup
          ariaLabel={t("plex.filter.added")}
          value={filters.addedWithin || ""}
          options={[
            { value: "", label: t("plex.filter.any") },
            ...ADDED_OPTS.map((a) => ({ value: a, label: t(`plex.filter.addedOpt.${a}`) })),
          ]}
          onChange={(v) => patch({ addedWithin: v })}
        />
      ),
    },
    ...facetSection(
      "contentrating",
      t("plex.filter.contentRating"),
      (f) => f.content_ratings.length > 0,
      (f) => (
        <Combobox
          label={t("plex.filter.contentRating")}
          options={f.content_ratings.map((o) => ({
            ...o,
            label: vocab(t, "certificate", o.value),
          }))}
          selected={filters.contentRatings}
          onChange={(next) => patch({ contentRatings: next })}
        />
      ),
    ),
    ...facetSection(
      "studio",
      t("plex.filter.studio"),
      (f) => f.studios.length > 0,
      (f) => (
        <Combobox
          label={t("plex.filter.studio")}
          options={f.studios}
          selected={filters.studios}
          onChange={(next) => patch({ studios: next })}
        />
      ),
    ),
    // Playback class (Direct Play / Direct Stream / Transcode HW/SW) — movie-only (shows have no
    // class), and dropped when the facet is empty. Labels are localized (the facet ships class keys).
    ...(scope === "movie"
      ? facetSection(
          "playable",
          t("plex.filter.playable"),
          (f) => f.playable.length > 0,
          (f) => (
            <Combobox
              label={t("plex.filter.playable")}
              options={f.playable.map((p) => ({
                value: p.value,
                label: t(`plex.filter.playableOpt.${p.value}`),
                count: p.count,
              }))}
              selected={filters.playable}
              onChange={(next) => patch({ playable: next })}
            />
          ),
        )
      : []),
  ];

  return (
    <SavedViewsScope value={savedViews}>
      <FilterRail
        onResetLayout={onResetLayout}
        title={t("sidebar.filters")}
        icon={<SlidersHorizontal className="w-4 h-4" />}
        count={activeCount}
        collapsed={collapsed}
        onToggleCollapse={onToggleCollapse}
        layout={layout}
        setLayout={setLayout}
        items={items}
        // The Plex widgets are simple label + control rows now, not collapsible islands (matches the
        // feed rail). The rail's own "Clear all" is dropped too — the chip row above the grid owns it.
        collapsible={false}
        // Saved ("personal") views: header icon → quick-pick popover, title → the manager modal.
        // The same shared components as the feed rail, over Plex's own views.
        iconExpanded={<SavedViewsPopover trigger={<SlidersHorizontal className="w-4 h-4" />} />}
        onTitleClick={openModal}
        titleActionLabel={t("views.manageTitle")}
      >
        {yearHidden && facetsStatus}
      </FilterRail>
      {/* The manager modal lives here (rail is always mounted on plex); Modal portals to <body>. */}
      {modalOpen && <PersonalViewsModal />}
    </SavedViewsScope>
  );
}

// The playlists section: a combobox that stays compact (just a field + chevron) until opened, instead
// of an always-expanded list that grew the rail with every playlist. Picking a playlist opens it (the
// PlexBrowse `playlistOpen` hand-off); typing a name that doesn't exist yet offers a "Create …" row so
// you can still add one — the same reuse-the-Combobox idea as the feed's "Your tags" widget. `selected`
// stays empty: this picks an action (open / create), it doesn't hold a persistent selection.
const CREATE_PLAYLIST = "__create__";
export function PlaylistPicker() {
  const { t } = useTranslation();
  const { setPlaylistOpen: onOpenPlaylist } = usePlexActions();
  const qc = useQueryClient();
  const [query, setQuery] = useState("");
  const playlistsQ = useQuery({ queryKey: qk.plexPlaylists(), queryFn: () => api.plexPlaylists() });
  const playlists = playlistsQ.data?.playlists ?? [];

  const q = query.trim();
  const ql = q.toLowerCase();
  const matches = ql ? playlists.filter((p) => p.title.toLowerCase().includes(ql)) : playlists;
  const exact = playlists.some((p) => p.title.toLowerCase() === ql);
  const options: ComboboxOption[] = [
    ...matches.map((p) => ({ value: `pl:${p.id}`, label: p.title, count: p.item_count })),
    // Offer to create only when the typed name isn't already a playlist — which is unknown until the
    // lists load: over a failed load the row pushed out the error and its Retry.
    ...(q && !exact && playlistsQ.data ? [{ value: CREATE_PLAYLIST, label: q }] : []),
  ];

  async function createPlaylist(title: string) {
    try {
      const pl = await api.plexCreatePlaylist(title);
      qc.invalidateQueries({ queryKey: qk.plexPlaylists() });
      onOpenPlaylist(pl.id);
    } catch (e) {
      // Called without an await from the picker, so a refusal was an unhandled rejection.
      notifyActionError(e, msg("plex.playlistAdd.createFailed"));
    }
  }

  return (
    <Combobox
      label={t("plex.playlist.section")}
      multiple={false}
      clientFilter={false} // we build `options` (incl. the create row) against the query ourselves
      options={options}
      selected={[]}
      query={query}
      onQueryChange={setQuery}
      placeholder={t("plex.playlist.pickerPlaceholder")}
      loading={playlistsQ.isLoading}
      error={playlistsQ.isError && !playlistsQ.data ? t("common.loadError") : undefined}
      onRetry={() => void playlistsQ.refetch()}
      emptyText={t("plex.playlist.none")}
      renderOption={(o) =>
        o.value === CREATE_PLAYLIST ? (
          <>
            <Plus className="h-3.5 w-3.5 shrink-0 text-accent" />
            <span className="flex-1 truncate">
              {t("plex.playlist.createNamed", { name: o.label })}
            </span>
          </>
        ) : (
          <>
            <ListMusic className="h-3.5 w-3.5 shrink-0 text-muted" />
            <span className="flex-1 truncate">{o.label}</span>
            {o.count != null && (
              <span className="shrink-0 text-2xs tabular-nums text-muted">{o.count}</span>
            )}
          </>
        )
      }
      onChange={(next) => {
        const v = next[0];
        if (!v) return;
        if (v === CREATE_PLAYLIST)
          void createPlaylist(q); // reports its own failure
        else onOpenPlaylist(Number(v.slice(3)));
      }}
    />
  );
}

// The collection filter (a multi-select combobox): a combi-input matching the genre/studio
// pickers, its vocabulary searched SERVER-side (the union can run to hundreds). The generic <Combobox>
// owns the field/keyboard/ARIA + the any/all match footer; this wrapper owns the query→fetch (gated on
// `open`) and maps collections to options. A title can belong to several collections, so multiple can
// be picked and combined with Any/All. Titles are carried alongside the ids for the active-filter chips.
function CollectionPicker({
  values,
  titles,
  mode,
  onChange,
  onModeChange,
}: {
  values: string[];
  titles: Record<string, string> | undefined;
  mode: "any" | "all";
  onChange: (values: string[], titles: Record<string, string> | undefined) => void;
  onModeChange: (mode: "any" | "all") => void;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const [search, setSearch] = useState("");
  const searchDeb = useDebounced(search.trim(), 300);
  const q = useQuery({
    queryKey: qk.plexCollections("union", searchDeb),
    queryFn: () => api.plexCollections(undefined, searchDeb || undefined),
    enabled: open, // only fetch while the picker is open
  });
  // …but a selection restored from a LINK has ids and no titles, and the list above is only fetched
  // once the picker is opened — so the token rendered the raw rating_key until then. Resolve just the
  // selected ids (see usePlexCollectionTitles).
  const { titles: resolved, pending } = usePlexCollectionTitles(values, titles);
  const options: ComboboxOption[] = (q.data?.collections ?? []).map((c) => ({
    value: c.id,
    label: c.title,
    count: c.child_count ?? undefined,
  }));
  // Combine the fetched labels with the ones already stored so the trip through onChange keeps every
  // selected collection's title (the fetched list is narrowed by the current search).
  const labelMap: Record<string, string> = { ...resolved };
  for (const o of options) if (o.label) labelMap[o.value] = o.label;

  return (
    <>
      <MatchToggle picked={values.length} value={mode} onChange={onModeChange} />
      <Combobox
        label={t("plex.filter.collection")}
        clientFilter={false} // the server already narrows to `search`
        options={options}
        selected={values}
        selectedLabels={resolved}
        labelsPending={pending}
        query={search}
        onQueryChange={setSearch}
        onOpenChange={setOpen}
        loading={q.isFetching}
        error={q.isError ? t("common.loadError") : undefined}
        onRetry={() => void q.refetch()}
        placeholder={t("plex.filter.collectionSearch")}
        emptyText={t("plex.filter.collectionEmpty")}
        onChange={(next) => {
          // Carry only the selected ids' titles forward (drop titles for de-selected ones). Collapse an
          // empty map to undefined so a clear-all key-matches the pristine state (an empty {} still hashes
          // differently from an absent key), mirroring the chip-row remove handler.
          const nextTitles: Record<string, string> = {};
          for (const id of next) nextTitles[id] = labelMap[id] ?? titles?.[id] ?? id;
          onChange(next, next.length ? nextTitles : undefined);
        }}
      />
    </>
  );
}

function RemovableChip({ label, onRemove }: { label: string; onRemove: () => void }) {
  const { t } = useTranslation();
  return (
    <DismissibleChip
      onDismiss={onRemove}
      dismissLabel={t("common.removeNamed", { name: label })}
      className="max-w-40"
    >
      {label}
    </DismissibleChip>
  );
}

/** The rail's Year section: the year picker over the range fields. One year is a range of one:
 *  picking it sets both ends, as the year on an info page does, so the range fields show it and a
 *  decade stays typeable there. */
export function PlexYearFilter({
  filters,
  facets,
  status,
  patch,
}: {
  filters: PlexFilters;
  facets: PlexFacets | undefined;
  /** The rail's word on facets still loading or failed, when it shows here. */
  status?: ReactNode;
  patch: (p: Partial<PlexFilters>) => void;
}) {
  const { t } = useTranslation();
  return (
    <div className="flex flex-col gap-2">
      {status}
      {facets && facets.years.length > 0 && (
        <YearPicker
          years={facets.years}
          selected={singleYear(filters)}
          onPick={(year) => patch(oneYear(year))}
        />
      )}
      <div className="flex items-center gap-2">
        <NumberInput
          label={t("plex.filter.yearFrom")}
          value={filters.yearMin ?? null}
          placeholder={facets?.year_min ?? undefined}
          onChange={(v) => patch({ yearMin: v })}
        />
        <span className="text-muted text-xs">–</span>
        <NumberInput
          label={t("plex.filter.yearTo")}
          value={filters.yearMax ?? null}
          placeholder={facets?.year_max ?? undefined}
          onChange={(v) => patch({ yearMax: v })}
        />
      </div>
    </div>
  );
}

/** The facets still loading, or failed with a way to try again — said once for the whole rail. */
export function FacetsStatus({ failed, onRetry }: { failed: boolean; onRetry: () => void }) {
  const { t } = useTranslation();
  if (failed)
    return (
      <StateMessage tone="error" compact onRetry={onRetry}>
        {t("common.loadError")}
      </StateMessage>
    );
  return (
    <p className="text-muted px-1 py-1.5 text-xs" role="status">
      {t("common.loading")}
    </p>
  );
}

function NumberInput({
  label,
  value,
  placeholder,
  onChange,
}: {
  /** Its accessible name: the placeholder (a year) is not one. */
  label: string;
  value: number | null;
  placeholder?: number;
  onChange: (v: number | null) => void;
}) {
  return (
    <Input
      aria-label={label}
      className="w-20 tabular-nums"
      size="sm"
      type="number"
      inputMode="numeric"
      value={value ?? ""}
      placeholder={placeholder != null ? String(placeholder) : ""}
      onChange={(e) => {
        const n = e.target.value === "" ? null : Number(e.target.value);
        onChange(n != null && Number.isFinite(n) ? n : null);
      }}
    />
  );
}