HokmPlay/src/components/screens/AuthScreen.tsx

"use client";

import { motion } from "framer-motion";
import { Mail } from "lucide-react";
import { useState } from "react";
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
import { useSessionStore } from "@/lib/session-store";
import { useUIStore } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";

export function AuthScreen() {
  const { t } = useI18n();
  const go = useUIStore((s) => s.go);
  const done = () => go("online");

  return (
    <ScreenShell hideNav>
      <ScreenHeader title={t("auth.title")} />
      <div className="panel rounded-3xl p-6 max-w-md mx-auto mt-6">
        <p className="text-center text-cream/60 text-sm mb-5">{t("auth.subtitle")}</p>

        {/* Active method: phone OTP */}
        <PhoneForm onDone={done} />

        {/* Coming soon (until email SMTP / Google are configured) */}
        <div className="mt-6 pt-5 border-t border-gold-500/15 space-y-2">
          <p className="text-center text-[11px] text-cream/40 mb-1">{t("auth.otherSoon")}</p>
          <SoonButton icon={<Mail className="size-4" />} label={t("auth.email")} soon={t("common.soon")} />
          <SoonButton icon={<GoogleIcon />} label={t("auth.google")} soon={t("common.soon")} />
        </div>
      </div>
    </ScreenShell>
  );
}

function SoonButton({
  icon,
  label,
  soon,
}: {
  icon: React.ReactNode;
  label: string;
  soon: string;
}) {
  return (
    <button
      disabled
      className="w-full rounded-xl bg-navy-900/50 border border-gold-500/15 text-cream/40 py-3 flex items-center justify-center gap-2 cursor-not-allowed"
    >
      <span className="opacity-50">{icon}</span>
      {label}
      <span className="text-[10px] rounded-full bg-gold-500/15 text-gold-300/80 px-2 py-0.5">
        {soon}
      </span>
    </button>
  );
}

function PhoneForm({ onDone }: { onDone: () => void }) {
  const { t } = useI18n();
  const requestOtp = useSessionStore((s) => s.requestOtp);
  const verifyOtp = useSessionStore((s) => s.verifyOtp);
  const [phone, setPhone] = useState("");
  const [code, setCode] = useState("");
  const [devCode, setDevCode] = useState<string | null>(null);
  const [error, setError] = useState("");

  const send = async () => {
    if (phone.trim().length < 4) return;
    const res = await requestOtp(phone.trim());
    setDevCode(res.devCode ?? null);
    setError("");
  };

  const verify = async () => {
    try {
      await verifyOtp(phone.trim(), code.trim());
      onDone();
    } catch {
      setError(t("auth.invalidCode"));
    }
  };

  return (
    <div className="space-y-3">
      <div>
        <label className="block text-xs text-cream/55 mb-1.5">{t("auth.phoneLabel")}</label>
        <input
          dir="ltr"
          inputMode="numeric"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          placeholder={t("auth.phonePlaceholder")}
          className="w-full rounded-xl bg-navy-900/70 gold-border px-4 py-3 text-cream text-center tracking-wider outline-none focus:ring-2 focus:ring-gold-500/40"
        />
      </div>

      {devCode == null ? (
        <button onClick={send} className="btn-gold w-full rounded-xl py-3">
          {t("auth.sendCode")}
        </button>
      ) : (
        <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} className="space-y-3">
          <div className="text-center text-xs text-gold-300 glass rounded-lg py-1.5">
            {t("auth.devCode", { code: devCode })}
          </div>
          <div>
            <label className="block text-xs text-cream/55 mb-1.5">{t("auth.codeLabel")}</label>
            <input
              dir="ltr"
              inputMode="numeric"
              value={code}
              onChange={(e) => setCode(e.target.value)}
              placeholder={t("auth.codePlaceholder")}
              maxLength={4}
              className="w-full rounded-xl bg-navy-900/70 gold-border px-4 py-3 text-cream text-center text-xl tracking-[0.5em] outline-none focus:ring-2 focus:ring-gold-500/40"
            />
          </div>
          {error && <p className="text-rose-300 text-sm text-center">{error}</p>}
          <button onClick={verify} className="btn-gold w-full rounded-xl py-3">
            {t("auth.verify")}
          </button>
        </motion.div>
      )}
    </div>
  );
}

function GoogleIcon() {
  return (
    <svg className="size-4" viewBox="0 0 24 24">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" />
    </svg>
  );
}