import { useState } from "react";
import { useTranslation } from "react-i18next";
import { BookmarkPlus, Check, Play, Save, Star, Trash2 } from "lucide-react";
import {
  closestCenter,
  DndContext,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  type DragEndEvent,
} from "@dnd-kit/core";
import {
  arrayMove,
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { coercePlexFilters, type FeedFilters, type PlexFilters, type SavedView } from "../lib/api";
import Modal from "./ui/Modal";
import { Button } from "./ui/Button";
import { IconButton } from "./ui/IconButton";
import { useSavedViews, asFilters } from "./savedViewsContext";
import { useActiveFilters } from "../lib/useActiveFilters";
import { buildPlexActiveFilters } from "./usePlexActiveFilters";
import { useUndoable } from "../lib/useUndoable";
import UndoToolbar from "./ui/UndoToolbar";
import { useSortableA11y, useSortableItem } from "./ui/sortableA11y";
import { DragHandle } from "./ui/DragHandle";
import { OrderButtons } from "./ui/OrderButtons";
import { Pressable } from "./ui/Pressable";
import { DismissibleChip } from "./ui/Chip";
import { Input } from "./ui/Input";

// Master–detail manager for saved ("personal") views: the left column lists the views (drag to
// reorder, or the selected one's order buttons on the right) plus a "save the current filters" input;
// the right column shows the selected view's name (renamable), its captured filters as REMOVABLE
// chips (pruning writes back to the stored view, undoable), its default flag, its place in the order,
// apply, save-current, and delete. Opened from the filter panel's title or the saved-views popover;
// all mutations flow through SavedViewsProvider.
function ViewRow({
  view,
  selected,
  active,
  onSelect,
}: {
  view: SavedView;
  selected: boolean;
  active: boolean;
  onSelect: () => void;
}) {
  const { t } = useTranslation();
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortableItem({
    id: view.id,
  });
  return (
    <div
      ref={setNodeRef}
      style={{ transform: CSS.Transform.toString(transform), transition }}
      className={`flex items-center gap-1.5 rounded-lg pr-1.5 ${isDragging ? "opacity-60" : ""} ${
        selected ? "bg-accent/15" : "state-layer"
      }`}
    >
      <DragHandle
        label={t("common.order.dragNamed", { name: view.name })}
        {...attributes}
        {...listeners}
      />
      <Pressable
        selectable
        onClick={onSelect}
        className={`flex-1 min-w-0 truncate py-1.5 text-sm ${selected ? "text-accent" : "text-fg"}`}
      >
        {view.name}
      </Pressable>
      {view.is_default && <Star className="h-3 w-3 shrink-0 fill-current text-accent" />}
      {active && <span className="mr-1 h-1.5 w-1.5 shrink-0 rounded-full bg-accent" />}
    </div>
  );
}

/** The SELECTED view's two drafts: its name (the rename field) and a local, undoable draft of its
 *  captured filters. Removing a chip prunes the filter draft and — via onApply — writes the pruned set
 *  straight back to the stored view; Undo/Redo re-persist the same way. The draft is the single
 *  source of truth for the chip row, so a chip-prune refetch (which returns the value we just wrote)
 *  never clobbers the undo history: both re-seed only when the SELECTION changes (and on Save-current,
 *  by the caller). Adjusted DURING render against the remembered selection — an effect painted the
 *  previous view's filters and name for a frame first. `selectedId` is the trigger, `selected` only
 *  the data. */
function useSelectedViewDrafts(
  selected: SavedView | null,
  selectedId: number | null,
  updateFilters: (id: number, filters: Record<string, unknown>) => unknown,
) {
  const [nameDraft, setNameDraft] = useState("");
  const filtersDraft = useUndoable<Record<string, unknown>>(selected?.filters ?? {}, {
    onApply: (f) => {
      if (selected) void updateFilters(selected.id, f);
    },
  });
  const [seededFor, setSeededFor] = useState<number | null | undefined>(undefined);
  if (seededFor !== selectedId) {
    setSeededFor(selectedId);
    filtersDraft.reset(selected?.filters ?? {});
    setNameDraft(selected?.name ?? "");
  }
  return { filtersDraft, nameDraft, setNameDraft };
}

export default function PersonalViewsModal() {
  const { t } = useTranslation();
  const {
    source,
    views,
    activeViewId,
    apply,
    create,
    rename,
    updateFilters,
    saveCurrent,
    toggleDefault,
    remove,
    reorder,
    closeModal,
  } = useSavedViews();
  // The grip's keyboard pick-up (space, the arrows, space) is what its screen-reader instructions
  // promise; without the sensor they described a gesture the list did not have.
  const sensors = useSensors(
    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
  );

  const [selectedId, setSelectedId] = useState<number | null>(activeViewId ?? views[0]?.id ?? null);
  const selected = views.find((v) => v.id === selectedId) ?? null;
  // Two independent name fields: the left one names a NEW view; the right one renames the selected one.
  const [createName, setCreateName] = useState("");
  const { filtersDraft, nameDraft, setNameDraft } = useSelectedViewDrafts(
    selected,
    selectedId,
    updateFilters,
  );

  // The selected view's captured filters, as the same human labels its module's chip row shows, read
  // from the undoable draft. The feed hook runs unconditionally (fed empty filters off-feed); Plex
  // uses the pure builder. A plex view captures its rail filters, not the watch-state (show="all").
  const noop = () => {};
  const setDraftFeed = (f: FeedFilters) =>
    filtersDraft.set(f as unknown as Record<string, unknown>);
  const feedCaptured = useActiveFilters(
    source === "feed" && selected
      ? asFilters(filtersDraft.value as unknown as FeedFilters)
      : ({ tags: [], channelIds: [] } as never),
    source === "feed" && selected ? setDraftFeed : noop,
  );
  const patchDraftPlex = (p: Partial<PlexFilters>) =>
    filtersDraft.set({
      ...coercePlexFilters(filtersDraft.value),
      ...p,
    } as unknown as Record<string, unknown>);
  const captured =
    source === "plex" && selected
      ? buildPlexActiveFilters(
          coercePlexFilters(filtersDraft.value),
          "all",
          patchDraftPlex,
          noop,
          t,
        )
      : feedCaptured;

  const dndA11y = useSortableA11y((id) => ({
    title: views.find((v) => v.id === id)?.name ?? "",
    pos: views.findIndex((v) => v.id === id) + 1,
    total: views.length,
  }));

  async function onDragEnd(e: DragEndEvent) {
    const { active, over } = e;
    if (!over || active.id === over.id) return;
    const ids = views.map((v) => v.id);
    const next = arrayMove(ids, ids.indexOf(active.id as number), ids.indexOf(over.id as number));
    await reorder(next);
  }
  // The non-drag way (WCAG 2.5.7): the selected view's Top / Up / Down / Bottom, beside its editor.
  const selectedAt = views.findIndex((v) => v.id === selectedId);
  function moveSelected(to: number) {
    const ids = views.map((v) => v.id);
    void reorder(arrayMove(ids, selectedAt, to));
  }

  async function onCreate() {
    const name = createName.trim();
    if (!name) return;
    if (await create(name)) setCreateName("");
  }

  const nameChanged = !!selected && nameDraft.trim() !== "" && nameDraft.trim() !== selected.name;
  async function onRename() {
    if (!selected || !nameChanged) return;
    await rename(selected.id, nameDraft.trim());
  }

  // Save-current is a no-op when the live filters already equal this exact view (it's the active one).
  const saveCurrentDisabled = selected != null && selected.id === activeViewId;

  return (
    <Modal
      initialFocus="close"
      title={t("views.manageTitle")}
      onClose={closeModal}
      maxWidth="max-w-2xl"
    >
      <div className="grid min-h-[20rem] grid-cols-[minmax(0,14rem)_1fr] gap-4">
        {/* Left: the list + create */}
        <div className="flex flex-col border-r border-border/60 pr-4">
          <div className="flex-1 space-y-1 overflow-y-auto">
            {views.length === 0 && (
              <p className="px-1 py-2 text-2xs leading-snug text-muted">{t("views.empty")}</p>
            )}
            <DndContext
              sensors={sensors}
              collisionDetection={closestCenter}
              onDragEnd={onDragEnd}
              accessibility={dndA11y}
            >
              <SortableContext
                items={views.map((v) => v.id)}
                strategy={verticalListSortingStrategy}
              >
                {views.map((v) => (
                  <ViewRow
                    key={v.id}
                    view={v}
                    selected={v.id === selectedId}
                    active={v.id === activeViewId}
                    onSelect={() => setSelectedId(v.id)}
                  />
                ))}
              </SortableContext>
            </DndContext>
          </div>
          <div className="mt-2 flex items-center gap-1.5 border-t border-border/60 pt-2">
            <Input
              className="flex-1"
              value={createName}
              onChange={(e) => setCreateName(e.target.value)}
              onKeyDown={(e) => e.key === "Enter" && onCreate()}
              placeholder={t("views.namePlaceholder")}
            />
            <IconButton
              label={t("views.save")}
              size="sm"
              variant="primary"
              onClick={onCreate}
              disabled={!createName.trim()}
            >
              <BookmarkPlus className="h-4 w-4" />
            </IconButton>
          </div>
        </div>

        {/* Right: the selected view's detail */}
        {selected ? (
          <div className="flex flex-col gap-3">
            <div className="flex items-center gap-1.5">
              <Input
                className="flex-1 font-medium"
                value={nameDraft}
                onChange={(e) => setNameDraft(e.target.value)}
                onKeyDown={(e) => e.key === "Enter" && void onRename()}
                onBlur={() => void onRename()}
              />
              <IconButton
                variant="outline"
                size="md"
                onClick={() => void onRename()}
                disabled={!nameChanged}
                label={t("views.rename")}
              >
                <Check />
              </IconButton>
            </div>
            <div>
              <div className="mb-1.5 flex items-center justify-between gap-2">
                <span className="text-2xs font-semibold uppercase tracking-wider text-muted">
                  {t("views.capturedFilters")}
                </span>
                {(filtersDraft.canUndo || filtersDraft.canRedo) && (
                  <UndoToolbar
                    canUndo={filtersDraft.canUndo}
                    canRedo={filtersDraft.canRedo}
                    onUndo={filtersDraft.undo}
                    onRedo={filtersDraft.redo}
                  />
                )}
              </div>
              {captured.length === 0 ? (
                <p className="text-xs text-muted">{t("views.capturedNone")}</p>
              ) : (
                <div className="flex flex-wrap gap-1.5">
                  {captured.map((f) => (
                    <DismissibleChip
                      key={f.key}
                      size="xs"
                      onDismiss={f.remove}
                      dismissLabel={t("feed.chips.remove", { name: f.label })}
                    >
                      {f.label}
                    </DismissibleChip>
                  ))}
                </div>
              )}
            </div>
            {views.length > 1 && (
              <OrderButtons from={selectedAt} count={views.length} onMove={moveSelected} />
            )}
            <div className="mt-auto flex flex-wrap items-center gap-2 border-t border-border/60 pt-3">
              <Button
                variant="primary"
                size="sm"
                icon={<Play className="h-3.5 w-3.5" />}
                onClick={() => apply(selected)}
              >
                {t("views.apply")}
              </Button>
              <Button
                variant="outline"
                size="sm"
                icon={<Save />}
                onClick={async () => {
                  const saved = await saveCurrent(selected.id);
                  // Re-seed the draft to what we just stored (the live filters) so the chip row
                  // reflects the save; clears the now-stale undo history.
                  if (saved) filtersDraft.reset(saved);
                }}
                disabled={saveCurrentDisabled}
                title={
                  saveCurrentDisabled ? t("views.saveCurrentUpToDate") : t("views.saveCurrentHint")
                }
              >
                {t("views.saveCurrent")}
              </Button>
              <Button
                variant="outline"
                size="sm"
                pressed={selected.is_default}
                onClick={() => void toggleDefault(selected)}
                icon={<Star className={selected.is_default ? "fill-current" : ""} />}
              >
                {t("views.default")}
              </Button>
              <Button
                variant="danger-soft"
                size="sm"
                icon={<Trash2 />}
                className="ml-auto"
                onClick={async () => {
                  const next = views.find((v) => v.id !== selected.id);
                  // Only move the selection if the delete actually happened (remove awaits a confirm
                  // and resolves false on cancel) — otherwise cancelling would still switch the pane.
                  if (await remove(selected)) setSelectedId(next?.id ?? null);
                }}
              >
                {t("views.delete")}
              </Button>
            </div>
          </div>
        ) : (
          <div className="flex items-center justify-center text-sm text-muted">
            {t("views.selectPrompt")}
          </div>
        )}
      </div>
    </Modal>
  );
}