// ui.jsx — shared Tailwind primitives: SafariButton, Field, FlowDots, Wordmark
// Production (Vite): export each; import { Icon } from './icons'.

// ── chunky safari button with bevel ─────────────────────────
function SafariButton({ children, onClick, color = "red", disabled = false }) {
  const map = {
    red:   "bg-safari-red    shadow-[0_6px_0_#8a2e08]",
    gold:  "bg-safari-gold   shadow-[0_6px_0_#9c7836]",
    brown: "bg-safari-brown  shadow-[0_6px_0_#5f3f1e]",
    green: "bg-safari-green  shadow-[0_6px_0_#4d6b39]",
  };
  return (
    <button
      onClick={disabled ? undefined : onClick}
      disabled={disabled}
      className={[
        "w-full rounded-2xl px-5 py-4 flex items-center justify-center gap-2.5 whitespace-nowrap",
        "font-serif font-semibold text-[18px] text-safari-grass select-none",
        "transition-all duration-75 active:translate-y-1 active:shadow-none",
        disabled ? "bg-[#cdbfa8] shadow-none cursor-default" : `${map[color]} cursor-pointer`,
      ].join(" ")}
    >
      {children}
    </button>
  );
}

// ── input field ─────────────────────────────────────────────
function Field({ icon, label, value, onChange, placeholder, type = "text", inputMode, pattern }) {
  const [focus, setFocus] = React.useState(false);
  const [reveal, setReveal] = React.useState(false);
  const isPw = type === "password";
  const inputType = isPw && reveal ? "text" : type;
  return (
    <div>
      <label className="block text-[13px] font-semibold text-safari-brown mb-1.5 ml-0.5">{label}</label>
      <div className={[
        "flex items-center gap-2.5 rounded-2xl px-3.5 bg-[#FFFCF6] border-2 transition-all duration-150 shadow-sm",
        focus ? "border-safari-gold ring-4 ring-safari-gold/20"
              : "border-safari-mahogany/10 hover:border-safari-mahogany/20",
      ].join(" ")}>
        <span className={focus ? "text-safari-gold" : "text-safari-brown/60"}>
          <Icon name={icon} className="w-5 h-5" />
        </span>
        <input
          value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder}
          type={inputType} inputMode={inputMode} pattern={pattern}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          className="flex-1 bg-transparent outline-none py-[15px] font-serif text-[17px] text-safari-mahogany placeholder:text-safari-brown/40 min-w-0"
        />
        {isPw && (
          <button type="button" tabIndex={-1} onClick={() => setReveal((r) => !r)}
            aria-label={reveal ? "ซ่อนรหัสผ่าน" : "แสดงรหัสผ่าน"}
            className="shrink-0 -mr-1 p-1.5 rounded-full text-safari-brown/55 hover:text-safari-brown hover:bg-safari-mahogany/5 transition-colors">
            <Icon name={reveal ? "eyeoff" : "eye"} className="w-5 h-5" />
          </button>
        )}
      </div>
    </div>
  );
}

// ── small logout / switch-user pill ─────────────────────────
function LogoutButton({ onClick, dark = false }) {
  return (
    <button onClick={onClick} aria-label="ออกจากระบบ"
      className={[
        "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[12.5px] font-semibold transition-colors",
        dark ? "text-safari-sun/85 hover:bg-white/10"
             : "text-safari-brown/80 hover:bg-safari-mahogany/5",
      ].join(" ")}>
      <Icon name="logout" className="w-4 h-4" /> ออกจากระบบ
    </button>
  );
}

// ── flow progress dots ──────────────────────────────────────
function FlowDots({ step }) {
  return (
    <div className="flex gap-1.5 justify-center pt-1.5 pb-0.5">
      {[0, 1, 2, 3].map((i) => (
        <div key={i} className={[
          "h-1.5 rounded-full transition-all duration-300",
          i === step ? "w-6 bg-safari-red" : i < step ? "w-1.5 bg-safari-green" : "w-1.5 bg-safari-mahogany/15",
        ].join(" ")} />
      ))}
    </div>
  );
}

// ── wordmark ────────────────────────────────────────────────
function Wordmark({ className = "text-4xl" }) {
  return (
    <div className="text-center leading-none">
      <div className="text-[11px] font-serif font-semibold tracking-[0.38em] text-safari-brown/70 mb-2">CSTU 41</div>
      <div className={`font-display text-safari-red tracking-wide ${className}`}>BUDDY</div>
      <div className="font-display text-safari-brown tracking-[0.28em] mt-1" style={{ fontSize: "0.6em" }}>SAFARI</div>
    </div>
  );
}

// ── page footer ─────────────────────────────────────────────
function PageFooter() {
  return (
    <div className="mt-auto pt-6 pb-2 flex flex-col items-center gap-1.5">
      <div className="flex items-center gap-2 text-safari-brown/30">
        <div className="h-px w-10 bg-safari-mahogany/10" />
        <Icon name="paw" className="w-3.5 h-3.5" />
        <div className="h-px w-10 bg-safari-mahogany/10" />
      </div>
      <p className="text-[11.5px] text-safari-brown/50 font-serif text-center leading-snug">
        เว็บมีปัญหา ติดต่อ ig : Porkornrawee 
        <br></br>Backend  : ใครมีไอจี คอสมิกใส่ที
        <br></br>Design Contributor : ใส่ชื่อตัวเองเลย
      </p>
    </div>
  );
}

Object.assign(window, { SafariButton, Field, FlowDots, Wordmark, PageFooter, LogoutButton });