"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { setActiveSkinAction } from "./_actions";
import { SKINS, type SkinName } from "@/lib/theme";

export function ThemePicker({ initialSkin }: { initialSkin: SkinName }) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [selected, setSelected] = useState<SkinName>(initialSkin);
  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setMsg(null);
    const fd = new FormData();
    fd.set("skin", selected);
    startTransition(async () => {
      const res = await setActiveSkinAction(fd);
      if (res.ok) {
        setMsg({ ok: true, text: `Đã áp dụng theme “${res.skin}”. Reload trang để xem.` });
        router.refresh();
      } else {
        setMsg({ ok: false, text: res.error });
      }
    });
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {SKINS.map((s) => {
          const isActive = selected === s.value;
          const isCurrent = initialSkin === s.value;
          return (
            <label
              key={s.value}
              className={`block rounded-xl border-2 p-5 cursor-pointer transition ${
                isActive
                  ? "border-accent-primary bg-bg-elevated/60"
                  : "border-stroke-subtle bg-bg-elevated/30 hover:border-stroke-default"
              }`}
            >
              <input
                type="radio"
                name="skin"
                value={s.value}
                checked={isActive}
                onChange={() => setSelected(s.value)}
                className="sr-only"
              />
              <div className="flex items-start justify-between gap-3">
                <div>
                  <div className="text-xs font-mono uppercase tracking-wider text-ink-muted">
                    {s.value}
                  </div>
                  <div className="font-display font-semibold text-lg mt-1">{s.label}</div>
                </div>
                {isCurrent && (
                  <span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-300 border border-emerald-500/30 whitespace-nowrap">
                    Đang dùng
                  </span>
                )}
              </div>
              <div className="text-xs text-ink-muted mt-2 italic">{s.tagline}</div>
              <p className="text-sm text-ink-secondary mt-3 leading-relaxed">
                {s.description}
              </p>
              {/* mini palette swatch */}
              <div className="mt-4">
                <SkinPreviewSwatch skin={s.value} />
              </div>
            </label>
          );
        })}
      </div>

      <div className="flex items-center justify-between pt-4 border-t border-stroke-subtle">
        {msg ? (
          <span className={`text-sm ${msg.ok ? "text-emerald-300" : "text-rose-300"}`}>
            {msg.text}
          </span>
        ) : (
          <span className="text-xs text-ink-muted">
            Chọn 1 theme → Lưu. Áp dụng cho toàn site công khai (không ảnh hưởng admin panel).
          </span>
        )}
        <button
          type="submit"
          disabled={pending || selected === initialSkin}
          className="px-5 py-2 rounded-lg bg-accent-primary text-white text-sm font-medium hover:bg-accent-primary/90 disabled:opacity-40 transition"
        >
          {pending ? "Đang lưu…" : "Áp dụng theme"}
        </button>
      </div>
    </form>
  );
}

function SkinPreviewSwatch({ skin }: { skin: SkinName }) {
  // Hard-coded palette so preview works regardless of active root skin
  const v1 = ["#FBF8F0", "#F5F1E8", "#B8742E", "#1F1810"];
  const v2 = ["#0F1421", "#131826", "#06B6D4", "#E2E8F0"];
  const colors = skin === "v1" ? v1 : v2;
  const labels = ["paper", "bg-2", "accent", "ink"];
  return (
    <div className="grid grid-cols-4 gap-2">
      {colors.map((c, i) => (
        <div key={c} className="text-center">
          <div
            className="h-10 rounded border border-stroke-subtle"
            style={{ background: c }}
          />
          <div className="text-[9px] font-mono mt-1 text-ink-muted">{labels[i]}</div>
          <div className="text-[9px] font-mono text-ink-muted/60">{c}</div>
        </div>
      ))}
    </div>
  );
}