import { useQuery } from "@tanstack/react-query";

import {
  isLauncherIconName,
  isLauncherTintName,
  LAUNCHER_ICONS,
  LAUNCHER_TINTS,
  type LauncherIconName,
  type LauncherTintName,
} from "@/client/lib/launcher-icons";
import { fetchJson, queryKeys } from "@/client/lib/query";
import { Skeleton } from "@/client/components/ui/skeleton";

interface LauncherApp {
  id: string;
  name: string;
  url: string;
  icon: LauncherIconName | null;
  tint: LauncherTintName | null;
}

const initialFromName = (name: string): string => (name.trim()[0] ?? "?").toUpperCase();

const safeHost = (uri: string): string | null => {
  try {
    return new URL(uri).host;
  } catch {
    return null;
  }
};

const Tile = ({ app }: { app: LauncherApp }) => {
  const Icon = app.icon && isLauncherIconName(app.icon) ? LAUNCHER_ICONS[app.icon] : null;
  // Default for tiles without a tint: low-chroma zinc so they read as
  // "tessera-suite default" rather than mimicking any specific brand.
  const tint = app.tint && isLauncherTintName(app.tint) ? LAUNCHER_TINTS[app.tint] : "oklch(0.30 0.005 265)";
  // Worker filters URLs to http(s); this guard keeps a row that slipped
  // through pre-validation from crashing the page.
  const host = safeHost(app.url);
  return (
    <a
      href={app.url}
      className="group flex items-center gap-4 rounded-2xl border border-zinc-800/60 bg-zinc-900/50 p-4 transition-colors hover:border-zinc-700/60 hover:bg-zinc-800/50"
    >
      <span
        className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl text-zinc-50 shadow-sm transition-transform duration-200 group-hover:-rotate-2"
        style={{ backgroundColor: tint }}
        aria-hidden="true"
      >
        {Icon ? (
          <Icon className="h-7 w-7" />
        ) : (
          <span className="font-display text-2xl font-semibold">{initialFromName(app.name)}</span>
        )}
      </span>
      <span className="min-w-0 flex-1">
        <span className="block text-base font-semibold text-zinc-100">{app.name}</span>
        {host ? <span className="mt-0.5 block truncate text-xs text-zinc-500">{host}</span> : null}
      </span>
    </a>
  );
};

interface LauncherProps {
  greetingName: string;
}

const SKELETON_TILE_COUNT = 4;

const LauncherTileGridSkeleton = () => (
  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2" aria-hidden="true">
    {Array.from({ length: SKELETON_TILE_COUNT }, (_, i) => (
      <div
        key={i}
        className="flex h-[5.5rem] items-center gap-4 rounded-2xl border border-zinc-800/60 bg-zinc-900/40 p-4"
      >
        <Skeleton className="h-14 w-14 shrink-0 rounded-2xl" />
        <span className="min-w-0 flex-1 space-y-2">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-24" />
        </span>
      </div>
    ))}
  </div>
);

export const LauncherSkeleton = () => (
  <div className="mx-auto max-w-3xl py-12" aria-busy="true">
    <Skeleton className="mb-3 h-10 w-48" />
    <Skeleton className="mb-10 h-4 w-40" />
    <LauncherTileGridSkeleton />
  </div>
);

// Signed-in landing surface: a tile grid of apps in the limic suite.
// A tile click hard-navigates to the app's `url`; the app's own auth
// flow (tessera OIDC, Cloudflare Access, etc.) takes over from there.
// We don't force a `/authorize` handshake from the launcher itself
// because the user might just be opening a homepage.
export const Launcher = ({ greetingName }: LauncherProps) => {
  const { data: apps = null, error: fetchError } = useQuery({
    queryKey: queryKeys.launcherApps(),
    queryFn: () => fetchJson<LauncherApp[]>("/api/launcher"),
  });
  const error = fetchError instanceof Error ? `Could not load apps (${fetchError.message}).` : null;

  return (
    <div className="mx-auto max-w-3xl py-12">
      <h1 className="mb-2 font-display text-[clamp(1.75rem,4vw,2.5rem)] font-semibold leading-tight tracking-tight text-zinc-100">
        {greetingName}.
      </h1>
      <p className="mb-10 text-sm text-zinc-400">Pick an app to get to work.</p>

      {error ? (
        <p className="rounded-xl border border-red-500/30 bg-red-500/5 p-4 text-sm text-red-300">{error}</p>
      ) : null}

      {apps && apps.length === 0 ? (
        <div className="rounded-2xl border border-dashed border-zinc-800/80 bg-zinc-900/40 p-8 text-center">
          <p className="text-sm text-zinc-400">
            No launcher tiles are registered yet. An admin can add one at{" "}
            <a href="/admin/launcher-apps" className="text-accent-400 hover:underline">
              /admin/launcher-apps
            </a>
            .
          </p>
        </div>
      ) : null}

      {apps === null && !error ? (
        // Reserve the same vertical rhythm so the page doesn't shift
        // when the API call resolves. Four skeleton tiles ≈ the median
        // suite size; the layout settles immediately if there are more.
        <LauncherTileGridSkeleton />
      ) : null}

      {apps && apps.length > 0 ? (
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {apps.map((app) => (
            <Tile key={app.id} app={app} />
          ))}
        </div>
      ) : null}
    </div>
  );
};