import * as React from "react";

import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts";
import {
  coreMachines,
  difficultyLevels,
  machineCategories,
  searchMachines,
  type Difficulty,
  type MachineCategory,
  type MachineDefinition,
} from "../modules/machines/catalogue";
import { useIntegratedPageMeta } from "../production/integrationAdapters";

export interface CataloguePageProps {
  initialQuery?: string;
  onOpenMachine?: (machineId: string) => void;
}

type CategoryFilter = "All" | MachineCategory;
type DifficultyFilter = "All" | Difficulty;
type SortMode = "name" | "newest" | "complexity";

const FAVOURITES_STORAGE_KEY = "mechanica:favourite-machines";

function readFavourites(): string[] {
  if (typeof window === "undefined") {
    return [];
  }

  try {
    const parsed = JSON.parse(window.localStorage.getItem(FAVOURITES_STORAGE_KEY) ?? "[]");
    return Array.isArray(parsed) ? parsed.filter((value): value is string => typeof value === "string") : [];
  } catch {
    return [];
  }
}

function writeFavourites(favourites: readonly string[]): void {
  if (typeof window === "undefined") {
    return;
  }

  try {
    window.localStorage.setItem(FAVOURITES_STORAGE_KEY, JSON.stringify([...favourites]));
  } catch {
    // Favourites are progressive enhancement; ignore storage failures.
  }
}

function difficultyClass(difficulty: Difficulty): string {
  switch (difficulty) {
    case "Beginner":
      return "border-emerald-400/30 bg-emerald-400/10 text-emerald-200";
    case "Intermediate":
      return "border-sky-400/30 bg-sky-400/10 text-sky-200";
    case "Advanced":
      return "border-amber-400/30 bg-amber-400/10 text-amber-200";
  }
}

function sortMachines(machines: readonly MachineDefinition[], sortMode: SortMode): MachineDefinition[] {
  const copy = [...machines];

  if (sortMode === "name") {
    return copy.sort((left, right) => left.title.localeCompare(right.title));
  }

  if (sortMode === "newest") {
    return copy.sort((left, right) => right.dateAdded.localeCompare(left.dateAdded));
  }

  return copy.sort((left, right) => right.complexity - left.complexity || left.title.localeCompare(right.title));
}

function MachineCardSkeleton(): JSX.Element {
  return (
    <article className="surface-card rounded-3xl p-4" aria-hidden="true">
      <div className="skeleton-shimmer h-36 rounded-2xl" />
      <div className="skeleton-shimmer mt-4 h-5 w-3/4 rounded-full" />
      <div className="skeleton-shimmer mt-3 h-4 w-1/2 rounded-full" />
      <div className="mt-5 grid grid-cols-3 gap-2">
        <div className="skeleton-shimmer h-7 rounded-full" />
        <div className="skeleton-shimmer h-7 rounded-full" />
        <div className="skeleton-shimmer h-7 rounded-full" />
      </div>
    </article>
  );
}

function MachineCard({
  machine,
  favourite,
  onToggleFavourite,
  onOpenMachine,
}: {
  machine: MachineDefinition;
  favourite: boolean;
  onToggleFavourite: (machineId: string) => void;
  onOpenMachine?: (machineId: string) => void;
}): JSX.Element {
  const href = `/machine/${machine.id}`;

  const openMachine = (event: React.MouseEvent<HTMLAnchorElement>) => {
    if (!onOpenMachine) {
      return;
    }

    event.preventDefault();
    onOpenMachine(machine.id);
  };

  return (
    <article className="surface-card group relative overflow-hidden rounded-3xl p-4 transition duration-200 hover:-translate-y-1 hover:border-[rgba(76,141,255,0.48)] hover:shadow-[var(--shadow-glow)]">
      <div
        className="relative h-36 overflow-hidden rounded-2xl border border-[var(--color-border)]"
        style={{
          background: `radial-gradient(circle at 30% 35%, ${machine.accentColor}55, transparent 32%), linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.01))`,
        }}
      >
        <div className="absolute inset-0 bg-[linear-gradient(120deg,transparent,rgba(255,255,255,0.16),transparent)] opacity-0 transition group-hover:translate-x-16 group-hover:opacity-100" />
        <div className="absolute bottom-3 left-3 right-3">
          <div className="flex items-center gap-2">
            <span
              className="h-2.5 w-2.5 rounded-full shadow-[0_0_18px_currentColor]"
              style={{ color: machine.accentColor, backgroundColor: machine.accentColor }}
            />
            <span className="text-xs font-semibold uppercase tracking-[0.24em] text-white/80">
              {machine.category}
            </span>
          </div>
        </div>
        <div className="absolute right-3 top-3 rounded-full border border-white/15 bg-black/30 px-2 py-1 text-xs tabular-nums text-white/80 backdrop-blur">
          C{machine.complexity}
        </div>
      </div>

      <div className="mt-4 flex items-start gap-3">
        <a className="min-w-0 flex-1" href={href} onClick={openMachine}>
          <h3 className="text-lg font-semibold leading-6 text-white group-hover:text-[var(--color-accent-strong)]">
            {machine.title}
          </h3>
          <p className="mt-2 line-clamp-3 text-sm leading-6 text-[var(--color-text-muted)]">
            {machine.description}
          </p>
        </a>

        <button
          className="grid h-10 w-10 shrink-0 place-items-center rounded-2xl border border-[var(--color-border)] bg-black/15 text-lg transition hover:border-[rgba(255,176,76,0.65)] hover:bg-[rgba(255,176,76,0.12)]"
          type="button"
          aria-label={`${favourite ? "Remove" : "Add"} ${machine.title} ${favourite ? "from" : "to"} favourites`}
          aria-pressed={favourite}
          onClick={() => onToggleFavourite(machine.id)}
        >
          {favourite ? "★" : "☆"}
        </button>
      </div>

      <div className="mt-4 flex flex-wrap gap-2">
        <span className={`rounded-full border px-2 py-1 text-xs ${difficultyClass(machine.difficulty)}`}>
          {machine.difficulty}
        </span>
        <span className="rounded-full border border-[var(--color-border)] bg-white/[0.03] px-2 py-1 text-xs text-[var(--color-text-muted)]">
          {machine.parts.length} parts
        </span>
        <span className="rounded-full border border-[var(--color-border)] bg-white/[0.03] px-2 py-1 text-xs text-[var(--color-text-muted)]">
          {machine.keywords[0]}
        </span>
      </div>
    </article>
  );
}

export default function CataloguePage({
  initialQuery = "",
  onOpenMachine,
}: CataloguePageProps): JSX.Element {
  const [ready, setReady] = React.useState(false);
  const [query, setQuery] = React.useState(initialQuery);
  const [category, setCategory] = React.useState<CategoryFilter>("All");
  const [difficulty, setDifficulty] = React.useState<DifficultyFilter>("All");
  const [sortMode, setSortMode] = React.useState<SortMode>("name");
  const [showFavouritesOnly, setShowFavouritesOnly] = React.useState(false);
  const [favourites, setFavourites] = React.useState<string[]>(() => readFavourites());
  const searchInputRef = React.useRef<HTMLInputElement | null>(null);

  useIntegratedPageMeta({
    title: "Mechanica Catalogue | Mechanical Systems Explorer",
    description:
      "Browse 28 interactive mechanical systems including engines, gearboxes, pumps, mechanisms, bearings, brakes, and turbo machinery.",
    image: "/social/mechanica-og.svg",
    type: "website",
  });

  React.useEffect(() => {
    const timer = window.setTimeout(() => setReady(true), 90);
    return () => window.clearTimeout(timer);
  }, []);

  React.useEffect(() => {
    setQuery(initialQuery);
  }, [initialQuery]);

  React.useEffect(() => {
    writeFavourites(favourites);
  }, [favourites]);

  useKeyboardShortcuts([
    {
      key: "/",
      label: "/",
      description: "Focus catalogue search",
      group: "Catalogue",
      allowInInputs: false,
      handler: () => searchInputRef.current?.focus(),
    },
  ]);

  const filteredMachines = React.useMemo(() => {
    const searched = searchMachines(query);

    return sortMachines(
      searched.filter((machine) => {
        const categoryMatches = category === "All" || machine.category === category;
        const difficultyMatches = difficulty === "All" || machine.difficulty === difficulty;
        const favouriteMatches = !showFavouritesOnly || favourites.includes(machine.id);

        return categoryMatches && difficultyMatches && favouriteMatches;
      }),
      sortMode,
    );
  }, [category, difficulty, favourites, query, showFavouritesOnly, sortMode]);

  const toggleFavourite = React.useCallback((machineId: string) => {
    setFavourites((currentFavourites) =>
      currentFavourites.includes(machineId)
        ? currentFavourites.filter((favouriteId) => favouriteId !== machineId)
        : [...currentFavourites, machineId],
    );
  }, []);

  return (
    <div className="mx-auto max-w-[1800px] px-4 py-6 lg:py-8">
      <section className="glass-panel overflow-hidden rounded-[2rem] p-6 lg:p-8">
        <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_28rem] lg:items-end">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.32em] text-[var(--color-accent)]">
              Production catalogue
            </p>
            <h1 className="mt-4 max-w-4xl text-4xl font-semibold tracking-[-0.04em] text-white md:text-6xl">
              Explore mechanical systems as interactive engineering references.
            </h1>
            <p className="mt-5 max-w-3xl text-base leading-8 text-[var(--color-text-muted)]">
              Search, filter, bookmark, and launch detailed 3D views with exploded parts, animation
              playback, cross-sections, annotations, and shareable URLs.
            </p>
          </div>

          <div className="rounded-3xl border border-[var(--color-border)] bg-black/12 p-4">
            <dl className="grid grid-cols-3 gap-3 text-center">
              <div>
                <dt className="text-xs uppercase tracking-[0.22em] text-[var(--color-text-subtle)]">
                  Machines
                </dt>
                <dd className="mt-1 text-2xl font-semibold text-white tabular-nums">
                  {coreMachines.length}
                </dd>
              </div>
              <div>
                <dt className="text-xs uppercase tracking-[0.22em] text-[var(--color-text-subtle)]">
                  Parts
                </dt>
                <dd className="mt-1 text-2xl font-semibold text-white tabular-nums">
                  {coreMachines.reduce((total, machine) => total + machine.parts.length, 0)}
                </dd>
              </div>
              <div>
                <dt className="text-xs uppercase tracking-[0.22em] text-[var(--color-text-subtle)]">
                  Categories
                </dt>
                <dd className="mt-1 text-2xl font-semibold text-white tabular-nums">
                  {machineCategories.length}
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </section>

      <section className="mt-5 grid gap-3 rounded-3xl border border-[var(--color-border)] bg-black/10 p-3 lg:grid-cols-[minmax(16rem,1fr)_16rem_14rem_13rem_auto]">
        <label className="block">
          <span className="sr-only">Search catalogue</span>
          <input
            ref={searchInputRef}
            className="input-field h-12 w-full px-4 text-sm"
            type="search"
            value={query}
            placeholder="Search by machine, component, keyword, or application…"
            onChange={(event) => setQuery(event.currentTarget.value)}
          />
        </label>

        <label className="block">
          <span className="sr-only">Category</span>
          <select
            className="input-field h-12 w-full px-3 text-sm"
            value={category}
            onChange={(event) => setCategory(event.currentTarget.value as CategoryFilter)}
          >
            <option value="All">All categories</option>
            {machineCategories.map((machineCategory) => (
              <option key={machineCategory} value={machineCategory}>
                {machineCategory}
              </option>
            ))}
          </select>
        </label>

        <label className="block">
          <span className="sr-only">Difficulty</span>
          <select
            className="input-field h-12 w-full px-3 text-sm"
            value={difficulty}
            onChange={(event) => setDifficulty(event.currentTarget.value as DifficultyFilter)}
          >
            <option value="All">All difficulty</option>
            {difficultyLevels.map((difficultyLevel) => (
              <option key={difficultyLevel} value={difficultyLevel}>
                {difficultyLevel}
              </option>
            ))}
          </select>
        </label>

        <label className="block">
          <span className="sr-only">Sort</span>
          <select
            className="input-field h-12 w-full px-3 text-sm"
            value={sortMode}
            onChange={(event) => setSortMode(event.currentTarget.value as SortMode)}
          >
            <option value="name">Sort by name</option>
            <option value="newest">Sort by newest</option>
            <option value="complexity">Sort by complexity</option>
          </select>
        </label>

        <button
          className="control-button h-12 px-4 text-sm"
          type="button"
          aria-pressed={showFavouritesOnly}
          onClick={() => setShowFavouritesOnly((current) => !current)}
        >
          ★ Favourites
        </button>
      </section>

      <div className="mt-5 flex flex-wrap items-center justify-between gap-3 text-sm text-[var(--color-text-muted)]">
        <p aria-live="polite">
          Showing <span className="font-semibold text-white tabular-nums">{filteredMachines.length}</span>{" "}
          of <span className="tabular-nums">{coreMachines.length}</span> systems.
        </p>
        <p className="text-xs">Tip: press <kbd className="rounded bg-white/10 px-1.5 py-0.5">/</kbd> to search.</p>
      </div>

      <section className="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4" aria-label="Machine catalogue">
        {!ready
          ? Array.from({ length: 8 }, (_, index) => <MachineCardSkeleton key={index} />)
          : filteredMachines.map((machine) => (
              <MachineCard
                key={machine.id}
                machine={machine}
                favourite={favourites.includes(machine.id)}
                onToggleFavourite={toggleFavourite}
                onOpenMachine={onOpenMachine}
              />
            ))}
      </section>

      {ready && filteredMachines.length === 0 ? (
        <section className="glass-panel mt-6 rounded-3xl p-8 text-center" role="status">
          <h2 className="text-2xl font-semibold text-white">No machines match those filters.</h2>
          <p className="mx-auto mt-3 max-w-xl text-sm leading-6 text-[var(--color-text-muted)]">
            Try clearing the search, selecting all categories, or disabling the favourites filter.
          </p>
          <button
            className="control-button mt-5 px-4 py-2 text-sm"
            type="button"
            onClick={() => {
              setQuery("");
              setCategory("All");
              setDifficulty("All");
              setShowFavouritesOnly(false);
            }}
          >
            Reset filters
          </button>
        </section>
      ) : null}
    </div>
  );
}