import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { useState } from "react";

import { AppForm, type AppFormValues } from "@/client/components/admin/app-form";
import { Button } from "@/client/components/ui/button";
import { Card } from "@/client/components/ui/card";
import { ConfirmButton } from "@/client/components/ui/confirm-button";
import { PageError } from "@/client/components/ui/page-error";
import { PageHeader } from "@/client/components/ui/page-header";
import { ListRow } from "@/client/components/ui/row";
import { useRequireAdmin } from "@/client/hooks/use-auth-guard";
import { useResourceForm } from "@/client/hooks/use-resource-form";
import { apiJsonRequest, apiRequest, responseMessage } from "@/client/lib/http";
import {
  isLauncherIconName,
  isLauncherTintName,
  LAUNCHER_ICONS,
  LAUNCHER_TINTS,
  type LauncherIconName,
  type LauncherTintName,
} from "@/client/lib/launcher-icons";
import { queryKeys } from "@/client/lib/query";
import { hasAdminRole } from "@/shared/role";

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

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

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

interface TilePreviewProps {
  name: string;
  icon: LauncherIconName | null;
  tint: LauncherTintName | null;
}

const TilePreview = ({ name, icon, tint }: TilePreviewProps) => {
  const Icon = icon && isLauncherIconName(icon) ? LAUNCHER_ICONS[icon] : null;
  const tintValue = tint && isLauncherTintName(tint) ? LAUNCHER_TINTS[tint] : "oklch(0.30 0.005 265)";
  return (
    <span
      className="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl text-zinc-50 shadow-sm"
      style={{ backgroundColor: tintValue }}
      aria-hidden="true"
    >
      {Icon ? (
        <Icon className="h-6 w-6" />
      ) : (
        <span className="font-display text-xl font-semibold">{initialFromName(name)}</span>
      )}
    </span>
  );
};

export const AdminLauncherAppsPage = () => {
  const session = useRequireAdmin("/admin/launcher-apps");
  const queryClient = useQueryClient();
  // `pending` is a per-action lock: `submit`, `toggle:<id>`, `delete:<id>`.
  // Single slot prevents concurrent mutations from racing the local list
  // state and gives the JSX a clean way to light up only the in-flight
  // button.
  const [pending, setPending] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const form = useResourceForm({ canCancel: () => pending === null });
  const isAdmin = hasAdminRole(session.data?.user.role);
  const userId = session.data?.user.id ?? null;
  const isLocked = pending !== null || form.formActive;
  const appsQueryKey = queryKeys.adminLauncherApps(userId);

  const appsQuery = useQuery({
    queryKey: appsQueryKey,
    queryFn: async () => {
      const res = await apiRequest("/api/admin/launcher-apps");
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return (await res.json()) as LauncherApp[];
    },
    enabled: isAdmin,
  });
  const apps = appsQuery.data ?? [];

  const handleSubmit = async (values: AppFormValues) => {
    if (pending !== null) return;
    if (!form.creating && form.editingId === null) return;
    form.setFormError(null);
    setPending("submit");
    try {
      if (form.creating) {
        const res = await apiJsonRequest("/api/admin/launcher-apps", values, { method: "POST" });
        if (!res.ok) {
          form.setFormError(await responseMessage(res, "Could not create launcher app."));
          return;
        }
        form.close();
        await queryClient.invalidateQueries({ queryKey: appsQueryKey, exact: true });
      } else if (form.editingId !== null) {
        const res = await apiJsonRequest(`/api/admin/launcher-apps/${encodeURIComponent(form.editingId)}`, values, {
          method: "PATCH",
        });
        if (!res.ok) {
          form.setFormError(await responseMessage(res, "Could not update launcher app."));
          return;
        }
        form.close();
        await queryClient.invalidateQueries({ queryKey: appsQueryKey, exact: true });
      }
    } finally {
      setPending(null);
    }
  };

  const handleToggleEnabled = async (app: LauncherApp) => {
    if (isLocked) return;
    setError(null);
    setPending(`toggle:${app.id}`);
    try {
      const res = await apiJsonRequest(
        `/api/admin/launcher-apps/${encodeURIComponent(app.id)}`,
        { enabled: !app.enabled },
        { method: "PATCH" },
      );
      if (!res.ok) {
        setError(await responseMessage(res, "Could not update launcher app."));
        return;
      }
      await queryClient.invalidateQueries({ queryKey: appsQueryKey, exact: true });
    } finally {
      setPending(null);
    }
  };

  const handleDelete = async (id: string) => {
    if (isLocked) return;
    setError(null);
    setPending(`delete:${id}`);
    try {
      const res = await apiRequest(`/api/admin/launcher-apps/${encodeURIComponent(id)}`, { method: "DELETE" });
      if (!res.ok && res.status !== 204) {
        setError(await responseMessage(res, "Could not delete launcher app."));
        return;
      }
      await queryClient.invalidateQueries({ queryKey: appsQueryKey, exact: true });
    } finally {
      setPending(null);
    }
  };

  return (
    <div className="mx-auto max-w-3xl">
      <PageHeader
        title="Launcher apps"
        actions={
          <Button size="sm" onClick={form.startCreate} disabled={isLocked}>
            <Plus className="h-4 w-4" aria-hidden="true" />
            New tile
          </Button>
        }
      />
      <PageError message={error} onDismiss={() => setError(null)} />

      {form.creating ? (
        <Card className="mb-4">
          <AppForm
            mode="create"
            pending={pending === "submit"}
            error={form.formError}
            onDismissError={() => form.setFormError(null)}
            onSubmit={handleSubmit}
            onCancel={form.cancel}
          />
        </Card>
      ) : null}

      <Card>
        {apps.length === 0 ? (
          <p className="text-sm text-zinc-500">No launcher tiles yet.</p>
        ) : (
          <ul className="flex flex-col gap-2">
            {apps.map((app) => {
              const host = safeHost(app.url);
              const togglePending = pending === `toggle:${app.id}`;
              const isEditingThis = form.editingId === app.id;
              return (
                <ListRow key={app.id}>
                  <div className="flex flex-col gap-3 text-sm sm:flex-row sm:items-center sm:justify-between">
                    <div className="flex min-w-0 items-center gap-3">
                      <TilePreview name={app.name} icon={app.icon} tint={app.tint} />
                      <div className="min-w-0">
                        <div className="flex flex-wrap items-center gap-2">
                          <p className="truncate font-medium text-zinc-100">{app.name}</p>
                          {!app.enabled ? (
                            <span className="inline-flex items-center rounded-md bg-zinc-700/40 px-1.5 py-0.5 text-[0.7rem] font-medium uppercase tracking-wider text-zinc-400">
                              disabled
                            </span>
                          ) : null}
                        </div>
                        {host ? (
                          <a
                            href={app.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="mt-0.5 block truncate text-xs text-zinc-500 hover:text-zinc-300"
                          >
                            {host}
                          </a>
                        ) : null}
                      </div>
                    </div>
                    <div className="flex flex-shrink-0 items-center gap-1">
                      <input
                        type="checkbox"
                        checked={app.enabled}
                        onChange={() => handleToggleEnabled(app)}
                        disabled={isLocked && !togglePending}
                        aria-label={app.enabled ? "Disable tile" : "Enable tile"}
                        title={app.enabled ? "Disable tile" : "Enable tile"}
                        className="mr-1.5 h-4 w-4 rounded border-zinc-600 bg-zinc-800 accent-accent-500"
                      />
                      <Button variant="ghost" size="sm" onClick={() => form.startEdit(app.id)} disabled={isLocked}>
                        <Pencil className="h-3.5 w-3.5" aria-hidden="true" />
                        Edit
                      </Button>
                      <ConfirmButton
                        variant="ghost"
                        size="sm"
                        aria-label="Delete tile"
                        title="Delete tile"
                        onConfirm={() => handleDelete(app.id)}
                        loading={pending === `delete:${app.id}`}
                        disabled={isLocked && pending !== `delete:${app.id}`}
                      >
                        <Trash2 className="h-3.5 w-3.5" aria-hidden="true" />
                      </ConfirmButton>
                    </div>
                  </div>
                  {isEditingThis ? (
                    <div className="mt-4 border-t border-zinc-800/60 pt-4">
                      <AppForm
                        key={app.id}
                        mode="edit"
                        initial={{
                          name: app.name,
                          url: app.url,
                          icon: app.icon ?? "",
                          tint: app.tint ?? "",
                        }}
                        pending={pending === "submit"}
                        error={form.formError}
                        onDismissError={() => form.setFormError(null)}
                        onSubmit={handleSubmit}
                        onCancel={form.cancel}
                      />
                    </div>
                  ) : null}
                </ListRow>
              );
            })}
          </ul>
        )}
      </Card>
    </div>
  );
};