"use client";

import { useState } from "react";

import { useI18n } from "@/components/i18n-provider";
import { LocaleFlag } from "@/components/locale-flag";
import { LOCALE_OPTIONS, type SupportedLocale } from "@/lib/i18n-config";

export function MailLanguageSettingsPanel() {
  const { locale, t } = useI18n();
  const [selectedLocale, setSelectedLocale] = useState<SupportedLocale>(locale);
  const [status, setStatus] = useState<"idle" | "saving" | "error">("idle");

  const saveLocale = async () => {
    if (status === "saving") {
      return;
    }

    setStatus("saving");

    try {
      const response = await fetch("/api/user/language", {
        body: JSON.stringify({ locale: selectedLocale }),
        headers: { "Content-Type": "application/json" },
        method: "PUT",
      });

      if (!response.ok) {
        throw new Error("language-save-failed");
      }

      window.location.reload();
    } catch {
      setStatus("error");
    }
  };

  return (
    <div className="om-setup-content">
      <section className="om-setup-panel bg-white px-3 py-5 sm:px-4 lg:px-5">
        <div className="max-w-[760px]">
          <p className="text-[12px] font-semibold uppercase tracking-[0.12em] text-[#7d94bc]">
            {t("settings.language.eyebrow")}
          </p>
          <h2 className="mt-2 text-[20px] font-semibold tracking-[-0.04em] text-[#16233c] sm:text-[22px]">
            {t("settings.language.title")}
          </h2>
          <p className="mt-2 text-[13px] leading-6 text-[#6c7d98]">
            {t("settings.language.automatic")}
          </p>
        </div>

        <div
          className="mt-5 grid gap-2 sm:grid-cols-2 xl:grid-cols-3"
          role="radiogroup"
          aria-label={t("settings.language.title")}
        >
          {LOCALE_OPTIONS.map((option) => {
            const selected = selectedLocale === option.code;

            return (
              <button
                key={option.code}
                type="button"
                role="radio"
                aria-checked={selected}
                onClick={() => {
                  setSelectedLocale(option.code);
                  setStatus("idle");
                }}
                className={`group flex min-h-[64px] cursor-pointer items-center gap-3 rounded-[12px] border px-4 py-3 text-left transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#8db8ff] focus-visible:ring-offset-2 ${
                  selected
                    ? "border-[#9dbdff] bg-[#f2f7ff] shadow-[0_8px_24px_rgba(47,109,246,0.08)]"
                    : "border-[#e3e9f3] bg-white hover:border-[#c9d9f5] hover:bg-[#fafcff]"
                }`}
              >
                <LocaleFlag locale={option.code} />
                <span
                  lang={option.htmlLang}
                  className={`min-w-0 flex-1 text-[14px] font-semibold ${
                    selected ? "text-[#2f6df6]" : "text-[#354761]"
                  }`}
                >
                  {option.nativeLabel}
                </span>
                <span
                  aria-hidden="true"
                  className={`flex h-5 w-5 shrink-0 items-center justify-center rounded-full border transition-colors ${
                    selected
                      ? "border-[#2f6df6] bg-[#2f6df6] text-white"
                      : "border-[#ccd7e8] text-transparent"
                  }`}
                >
                  <svg viewBox="0 0 20 20" fill="none" className="h-3 w-3">
                    <path
                      d="m5 10.2 3 3L15.2 6"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                </span>
              </button>
            );
          })}
        </div>

        <div className="mt-5 flex flex-col gap-3 border-t border-[#edf1f6] pt-4 sm:flex-row sm:items-center sm:justify-between">
          <p className={`text-[12px] leading-5 ${status === "error" ? "text-[#d74a4a]" : "text-[#71819a]"}`}>
            {status === "error"
              ? t("settings.language.error")
              : t("settings.language.notice")}
          </p>
          <button
            type="button"
            disabled={status === "saving" || selectedLocale === locale}
            onClick={saveLocale}
            className="om-btn-primary h-10 shrink-0 rounded-[10px] px-5 text-[13px] disabled:cursor-not-allowed disabled:opacity-45"
          >
            {status === "saving" ? t("common.saving") : t("common.save")}
          </button>
        </div>
      </section>
    </div>
  );
}