import { createSignal, For, Show, type JSX } from "solid-js";

export interface PinnedListItem {
  id: string;
  name: string;
  subtitle: string;
  icon?: JSX.Element;
  href?: string;
}

export interface PinnedListProps {
  items: PinnedListItem[];
  className?: string;
  pinnedLabel?: string;
  allLabel?: string;
  /** Called when pin state changes. Returns new Set of pinned IDs. */
  onPinChange?: (pinnedIds: Set<string>) => void;
  /** Initial pinned IDs */
  initialPinned?: string[];
}

export function PinnedList(props: PinnedListProps) {
  const [pinnedIds, setPinnedIds] = createSignal<Set<string>>(
    new Set(props.initialPinned ?? [])
  );

  const togglePin = (id: string) => {
    setPinnedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      props.onPinChange?.(next);
      return next;
    });
  };

  const pinned = () => props.items.filter((i) => pinnedIds().has(i.id));
  const unpinned = () => props.items.filter((i) => !pinnedIds().has(i.id));

  const pinnedLabel = () => props.pinnedLabel ?? "Pinned";
  const allLabel = () => props.allLabel ?? "All Items";
  const isCs = () => props.pinnedLabel === "Připnuto"; // crude locale detection

  const DotToggle = (p: { id: string }) => {
    const isPinned = () => pinnedIds().has(p.id);
    return (
      <button
        type="button"
        onClick={() => togglePin(p.id)}
        class={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full transition-all duration-200 ${
          isPinned()
            ? "bg-accent text-canvas hover:bg-accent-hover"
            : "bg-canvas-subtle border border-border text-ink-subtle hover:border-accent/40 hover:text-accent"
        }`}
        aria-label={isPinned() ? "Unpin" : "Pin"}
      >
        <svg
          width="10"
          height="10"
          viewBox="0 0 10 10"
          fill="currentColor"
          class="transition-transform duration-200"
        >
          <circle cx="5" cy="5" r="4" class={isPinned() ? "" : "opacity-0"} />
          <circle
            cx="5"
            cy="5"
            r="3.5"
            fill="none"
            stroke="currentColor"
            stroke-width="1"
            class={isPinned() ? "opacity-0" : ""}
          />
        </svg>
      </button>
    );
  };

  const ItemCard = (p: { item: PinnedListItem; pinned: boolean }) => {
    const content = (
      <div
        class={`flex items-center gap-3 rounded-xl px-3 py-3 border transition-all duration-200 ${
          p.pinned
            ? "bg-accent-soft border-accent/20"
            : "bg-canvas-subtle/40 border-border/50 hover:border-border"
        }`}
      >
        <Show when={p.item.icon}>
          <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-canvas border border-border text-ink-muted">
            {p.item.icon}
          </div>
        </Show>

        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-medium text-ink">{p.item.name}</p>
          <p class="truncate text-xs text-ink-muted">{p.item.subtitle}</p>
        </div>

        <DotToggle id={p.item.id} />
      </div>
    );

    if (p.item.href) {
      return (
        <a href={p.item.href} class="block">
          {content}
        </a>
      );
    }

    return content;
  };

  return (
    <div class={`flex w-full flex-col gap-1.5 ${props.className ?? ""}`}>
      <Show when={pinned().length > 0}>
        <p class="px-1 pb-0.5 pt-1 text-xs font-medium text-accent uppercase tracking-wide">
          {pinnedLabel()}
        </p>
        <For each={pinned()}>
          {(item) => <ItemCard item={item} pinned={true} />}
        </For>
      </Show>

      <Show when={unpinned().length > 0}>
        <p
          class={`px-1 pb-0.5 text-xs font-medium text-ink-subtle uppercase tracking-wide ${
            pinned().length > 0 ? "pt-3" : "pt-1"
          }`}
        >
          {allLabel()}
        </p>
        <For each={unpinned()}>
          {(item) => <ItemCard item={item} pinned={false} />}
        </For>
      </Show>
    </div>
  );
}
