import {
  LAUNCHER_ICONS,
  LAUNCHER_TINTS,
  type LauncherIconName,
  type LauncherTintName,
} from "@/client/lib/launcher-icons";

interface LauncherTilePickerProps {
  icon: LauncherIconName | "";
  tint: LauncherTintName | "";
  name: string;
  onIconChange: (icon: LauncherIconName | "") => void;
  onTintChange: (tint: LauncherTintName | "") => void;
}

export const LauncherTilePicker = ({ icon, tint, name, onIconChange, onTintChange }: LauncherTilePickerProps) => {
  const ResolvedIcon = icon ? LAUNCHER_ICONS[icon] : null;
  const tintValue = tint ? LAUNCHER_TINTS[tint] : "oklch(0.30 0.005 265)";
  const initial = (name.trim()[0] ?? "?").toUpperCase();

  return (
    <div className="rounded-xl border border-zinc-800/60 bg-zinc-900/40 p-4">
      <div className="mb-3 flex items-center justify-between gap-3">
        <div>
          <p className="text-sm font-medium text-zinc-100">Launcher tile</p>
          <p className="mt-0.5 text-xs text-zinc-500">How this app appears on the signed-in landing page.</p>
        </div>
        <div
          className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl text-zinc-50 shadow-sm"
          style={{ backgroundColor: tintValue }}
          aria-hidden="true"
        >
          {ResolvedIcon ? (
            <ResolvedIcon className="h-7 w-7" />
          ) : (
            <span className="font-display text-2xl font-semibold">{initial}</span>
          )}
        </div>
      </div>
      <fieldset className="mb-3 m-0 border-0 p-0">
        <legend className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-zinc-500">Icon</legend>
        <div className="flex flex-wrap gap-1.5">
          <button
            type="button"
            onClick={() => onIconChange("")}
            aria-pressed={icon === ""}
            className={`flex h-9 w-9 items-center justify-center rounded-lg border text-xs ${
              icon === ""
                ? "border-accent-500/60 bg-accent-500/10 text-accent-300"
                : "border-zinc-700/60 bg-zinc-800/60 text-zinc-400 hover:border-zinc-600/60"
            }`}
            aria-label="No icon (use initial)"
          >
            {(name.trim()[0] ?? "·").toUpperCase()}
          </button>
          {Object.entries(LAUNCHER_ICONS).map(([key, Icon]) => (
            <button
              key={key}
              type="button"
              onClick={() => onIconChange(key as LauncherIconName)}
              aria-pressed={icon === key}
              className={`flex h-9 w-9 items-center justify-center rounded-lg border ${
                icon === key
                  ? "border-accent-500/60 bg-accent-500/10 text-accent-300"
                  : "border-zinc-700/60 bg-zinc-800/60 text-zinc-400 hover:border-zinc-600/60 hover:text-zinc-200"
              }`}
              aria-label={key}
              title={key}
            >
              <Icon className="h-4 w-4" />
            </button>
          ))}
        </div>
      </fieldset>
      <fieldset className="m-0 border-0 p-0">
        <legend className="mb-1.5 block text-xs font-medium uppercase tracking-wider text-zinc-500">Tint</legend>
        <div className="flex flex-wrap gap-2">
          {(Object.keys(LAUNCHER_TINTS) as LauncherTintName[]).map((key) => (
            <button
              key={key}
              type="button"
              onClick={() => onTintChange(key)}
              aria-pressed={tint === key}
              className={`flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs ${
                tint === key
                  ? "border-accent-500/60 bg-accent-500/10 text-accent-300"
                  : "border-zinc-700/60 bg-zinc-800/60 text-zinc-400 hover:border-zinc-600/60 hover:text-zinc-200"
              }`}
            >
              <span
                className="h-3 w-3 rounded-full"
                style={{ backgroundColor: LAUNCHER_TINTS[key] }}
                aria-hidden="true"
              />
              {key}
            </button>
          ))}
        </div>
      </fieldset>
    </div>
  );
};