"use client";

import { useTranslations } from "next-intl";
import { Loader2, Terminal } from "lucide-react";
import { useDevModeControls } from "@/components/providers/DevModeProvider";
import { Tooltip } from "@/components/ui/Tooltip";
import { Info } from "lucide-react";

export default function DevModeToggle() {
  const t = useTranslations("profile");
  const tc = useTranslations("common");
  const { devMode, canUseDevMode, toggling, toggleDevMode } = useDevModeControls();

  if (!canUseDevMode) return null;

  const shellClass = devMode
    ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-400"
    : "border-[var(--border)] bg-[var(--bg)] text-[var(--text-faint)]";

  const toggleClass = devMode
    ? "hover:bg-emerald-500/20"
    : "hover:text-[var(--text-muted)]";

  return (
    <div
      className={`inline-flex items-center rounded-full border ${shellClass}`}
      aria-label={t("devMode")}
    >
      <button
        type="button"
        onClick={() => toggleDevMode()}
        disabled={toggling}
        title={devMode ? t("devModeOn") : t("devModeOff")}
        aria-pressed={devMode}
        className={`inline-flex cursor-pointer items-center gap-1.5 rounded-s-full py-1 ps-2.5 pe-1.5 text-[11px] font-semibold uppercase tracking-widest transition-colors disabled:cursor-wait disabled:opacity-70 ${toggleClass}`}
      >
        {toggling ? (
          <Loader2 className="h-3 w-3 animate-spin" />
        ) : (
          <Terminal className="h-3 w-3 shrink-0" />
        )}
        <span>DEV</span>
      </button>
      <span
        className={`flex items-center self-stretch border-s py-1 pe-2 ps-1 ${
          devMode ? "border-emerald-500/25 text-emerald-400/80" : "border-[var(--border)] text-[var(--text-faint)]"
        }`}
      >
        <Tooltip content={t("devModeHint")} label={tc("helpLabel")} placement="bottom">
          <button
            type="button"
            tabIndex={0}
            aria-label={tc("helpLabel")}
            className="inline-flex h-4 w-4 shrink-0 cursor-help items-center justify-center rounded-full transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/35"
          >
            <Info className="h-3 w-3" />
          </button>
        </Tooltip>
      </span>
    </div>
  );
}