HokmPlay/src/components/screens/ProfileScreen.tsx

"use client";

import { motion } from "framer-motion";
import { Check, ChevronLeft, Crown, Eye, EyeOff, Lock, Music, Pencil, Star, Upload, Users, Volume2 } from "lucide-react";
import { useRef, useState } from "react";
import { ScreenHeader, ScreenShell } from "@/components/online/ScreenHeader";
import { RankBadge } from "@/components/online/RankBadge";
import { CoinsPill } from "@/components/online/CoinsPill";
import { XpBar } from "@/components/online/XpBar";
import { Avatar } from "@/components/online/Avatar";
import { useSessionStore } from "@/lib/session-store";
import { useSoundStore } from "@/lib/sound-store";
import { useUIStore } from "@/lib/ui-store";
import { useI18n } from "@/lib/i18n";
import {
  ACHIEVEMENTS,
  CARD_BACKS,
  CARD_FRONTS,
  TITLES,
  achievementProgress,
  ownedAvatarIds,
  ownedCardBackIds,
  ownedCardFrontIds,
} from "@/lib/online/gamification";

/** Level required before a player can upload a custom profile photo. */
const PHOTO_UPLOAD_MIN_LEVEL = 25;
import { AVATARS, Gender, SocialVisibility } from "@/lib/online/types";
import { GENDER_META, SOCIAL_PLATFORMS } from "@/lib/social";
import { backVisualFromDef, cardBackMotif } from "@/lib/cardBack";
import { cn } from "@/lib/cn";

export function ProfileScreen() {
  const { t, locale } = useI18n();
  const profile = useSessionStore((s) => s.profile);
  const updateProfile = useSessionStore((s) => s.updateProfile);
  const upgradePlan = useSessionStore((s) => s.upgradePlan);
  const go = useUIStore((st) => st.go);
  const fileRef = useRef<HTMLInputElement>(null);
  const [editing, setEditing] = useState(false);
  const [name, setName] = useState(profile?.displayName ?? "");

  if (!profile) return null;
  const canUpload = profile.level >= PHOTO_UPLOAD_MIN_LEVEL;
  const s = profile.stats;
  const winrate = s.games > 0 ? Math.round((s.wins / s.games) * 100) : 0;
  const titleDef = TITLES.find((x) => x.id === profile.title);
  const titleName = titleDef ? (locale === "fa" ? titleDef.nameFa : titleDef.nameEn) : null;
  const ownedFronts = new Set(ownedCardFrontIds(profile));
  const ownedBacks = new Set(ownedCardBackIds(profile));
  const ownedAvatars = new Set(ownedAvatarIds(profile));

  const saveName = async () => {
    if (name.trim()) await updateProfile({ displayName: name.trim() });
    setEditing(false);
  };

  const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file || !canUpload) return;
    const reader = new FileReader();
    reader.onload = () => updateProfile({ avatarImage: String(reader.result) });
    reader.readAsDataURL(file);
  };

  return (
    <ScreenShell>
      {/* showXp=false: the identity card below already has a detailed XP bar. */}
      <ScreenHeader title={t("profile.title")} showXp={false} />

      {/* identity */}
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ type: "spring", stiffness: 200, damping: 22 }}
        className="glass rounded-3xl p-5 text-center relative overflow-hidden"
      >
        {/* soft gold glow behind avatar */}
        <div className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 size-40 bg-gold-500/10 blur-3xl rounded-full" />

        <div className="relative size-20 mx-auto">
          <motion.div
            initial={{ scale: 0.8, rotate: -6 }}
            animate={{ scale: 1, rotate: 0 }}
            transition={{ type: "spring", stiffness: 260, damping: 18, delay: 0.1 }}
            className="size-20 rounded-2xl bg-navy-900 gold-border flex items-center justify-center overflow-hidden"
          >
            <Avatar id={profile.avatar} image={profile.avatarImage} size={profile.avatarImage ? 80 : 56} />
          </motion.div>
          {/* level badge */}
          <motion.span
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ type: "spring", stiffness: 320, delay: 0.25 }}
            className="absolute -top-2 ltr:-left-2 rtl:-right-2 inline-flex items-center gap-0.5 rounded-full btn-gold px-2 py-0.5 text-[10px] font-black shadow-lg"
          >
            <Star className="size-2.5" fill="currentColor" />
            {profile.level}
          </motion.span>
          <button
            onClick={() => (canUpload ? fileRef.current?.click() : undefined)}
            className={cn(
              "absolute -bottom-1 ltr:-right-1 rtl:-left-1 rounded-full p-1.5",
              canUpload ? "btn-gold" : "bg-navy-900 gold-border text-cream/50 cursor-not-allowed"
            )}
            title={canUpload ? t("profile.upload") : t("profile.uploadLocked")}
          >
            {canUpload ? <Upload className="size-3.5" /> : <Lock className="size-3.5" />}
          </button>
          <input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={onUpload} />
        </div>

        {titleName && (
          <div className="mt-2 text-xs font-bold text-gold-300">{titleName}</div>
        )}

        {editing ? (
          <div className="mt-3 flex items-center justify-center gap-2">
            <input
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-center text-cream outline-none focus:ring-2 focus:ring-gold-500/40"
            />
            <button onClick={saveName} className="btn-gold rounded-lg p-2">
              <Check className="size-4" />
            </button>
          </div>
        ) : (
          <button
            onClick={() => {
              setName(profile.displayName);
              setEditing(true);
            }}
            className="mt-3 inline-flex items-center gap-2 text-xl font-black text-cream hover:text-gold-300 transition"
          >
            {profile.displayName}
            <Pencil className="size-3.5 text-cream/40" />
          </button>
        )}

        <div className="mt-2 flex items-center justify-center gap-2">
          <RankBadge rating={profile.rating} showRating />
          <CoinsPill />
        </div>

        <div className="mt-4">
          <XpBar level={profile.level} xp={profile.xp} showBadge />
        </div>

        <div className="mt-4">
          {profile.plan === "pro" ? (
            <span className="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-bold text-gold-300 bg-gold-500/15 gold-border">
              <Crown className="size-3.5 fill-gold-500" />
              {t("plan.active")}
            </span>
          ) : (
            <button
              onClick={upgradePlan}
              className="btn-gold inline-flex items-center gap-1.5 rounded-full px-4 py-2 text-xs"
            >
              <Crown className="size-3.5" />
              {t("plan.upgrade")} — {t("plan.proDesc")}
            </button>
          )}
        </div>
      </motion.div>

      {/* avatar picker */}
      <div className="glass rounded-2xl p-4 mt-4">
        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.chooseAvatar")}</h3>
        <div className="flex flex-wrap gap-2">
          {AVATARS.filter((a) => ownedAvatars.has(a.id)).map((a) => (
            <button
              key={a.id}
              onClick={() => updateProfile({ avatar: a.id })}
              className={cn(
                "size-12 rounded-xl bg-navy-900/70 flex items-center justify-center text-2xl transition overflow-hidden",
                profile.avatar === a.id ? "gold-border ring-2 ring-gold-400/60" : "border border-transparent hover:bg-navy-800"
              )}
            >
              <Avatar id={a.id} size={40} />
            </button>
          ))}
        </div>
      </div>

      {/* title picker */}
      <div className="glass rounded-2xl p-4 mt-4">
        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.titleLabel")}</h3>
        <div className="flex flex-wrap gap-2">
          {TITLES.filter((tt) => profile.ownedTitles.includes(tt.id)).map((tt) => (
            <button
              key={tt.id}
              onClick={() => updateProfile({ title: tt.id })}
              className={cn(
                "rounded-lg px-3 py-1.5 text-sm transition",
                profile.title === tt.id
                  ? "btn-gold"
                  : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
              )}
            >
              {locale === "fa" ? tt.nameFa : tt.nameEn}
            </button>
          ))}
        </div>
      </div>

      {/* card front picker */}
      <div className="glass rounded-2xl p-4 mt-4">
        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardFront")}</h3>
        <div className="flex flex-wrap gap-2">
          {CARD_FRONTS.filter((c) => ownedFronts.has(c.id)).map((c) => (
            <button
              key={c.id}
              onClick={() => updateProfile({ cardFront: c.id })}
              className={cn(
                "rounded-xl p-1.5 flex items-center gap-2 transition",
                profile.cardFront === c.id
                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
              )}
            >
              <span
                className="w-7 h-10 rounded-md border flex items-center justify-center text-xs text-slate-900"
                style={{ background: `linear-gradient(160deg, ${c.bg1}, ${c.bg2})`, borderColor: c.border }}
              >
                ♠
              </span>
              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
            </button>
          ))}
        </div>
      </div>

      {/* card back picker */}
      <div className="glass rounded-2xl p-4 mt-4">
        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.cardBack")}</h3>
        <div className="flex flex-wrap gap-2">
          {CARD_BACKS.filter((c) => ownedBacks.has(c.id)).map((c) => (
            <button
              key={c.id}
              onClick={() => updateProfile({ cardBack: c.id })}
              className={cn(
                "rounded-xl p-1.5 flex items-center gap-2 transition",
                profile.cardBack === c.id
                  ? "gold-border ring-2 ring-gold-400/60 bg-navy-900/70"
                  : "bg-navy-900/70 border border-transparent hover:bg-navy-800"
              )}
            >
              <span
                className="w-7 h-10 rounded-md border grid place-items-center"
                style={{ borderColor: `${c.accent}80`, ...backVisualFromDef(c) }}
              >
                <span className="text-[10px]" style={{ color: `${c.accent}dd` }}>
                  {cardBackMotif(c.pattern, c.motif)}
                </span>
              </span>
              <span className="text-xs text-cream/80 pe-1">{locale === "fa" ? c.nameFa : c.nameEn}</span>
            </button>
          ))}
        </div>
      </div>

      {/* gender + social links */}
      <SocialSettings />

      {/* audio settings */}
      <SoundSettings />

      {/* stats */}
      <div className="glass rounded-2xl p-4 mt-4">
        <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.stats")}</h3>
        <div className="grid grid-cols-3 gap-2.5">
          <Stat label={t("profile.games")} value={s.games} />
          <Stat label={t("profile.wins")} value={s.wins} />
          <Stat label={t("profile.winrate")} value={`${winrate}%`} />
          <Stat label={t("profile.kots")} value={s.kotsFor} />
          <Stat label={t("profile.streak")} value={s.bestWinStreak} />
          <Stat label={t("common.rating")} value={Math.round(profile.rating)} />
        </div>
      </div>

      {/* achievements */}
      <div className="glass rounded-2xl p-4 mt-4 mb-6">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-sm font-bold text-cream/80">
            {t("profile.achievements")}
            <span className="text-cream/40 font-normal">
              {" "}
              ({profile.unlocked.length}/{ACHIEVEMENTS.length})
            </span>
          </h3>
          <button
            onClick={() => go("achievements")}
            className="text-xs font-bold text-gold-300 flex items-center gap-0.5 hover:text-gold-200"
          >
            {t("achv.viewAll")}
            <ChevronLeft className="size-3.5 rtl:rotate-0 ltr:rotate-180" />
          </button>
        </div>
        <div className="space-y-2">
          {[...ACHIEVEMENTS]
            .sort((a, b) => {
              const ua = profile.unlocked.includes(a.id) ? 1 : 0;
              const ub = profile.unlocked.includes(b.id) ? 1 : 0;
              return ub - ua;
            })
            .slice(0, 6)
            .map((a, idx) => {
            const prog = achievementProgress(a, s, profile.rating, profile.level);
            const unlocked = profile.unlocked.includes(a.id) || prog >= a.goal;
            const pct = Math.min(100, Math.round((prog / a.goal) * 100));
            return (
              <motion.div
                key={a.id}
                initial={{ opacity: 0, x: locale === "fa" ? 16 : -16 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: idx * 0.05 }}
                className={cn(
                  "rounded-xl p-3 flex items-center gap-3 border",
                  unlocked ? "bg-gold-500/10 border-gold-500/40" : "bg-navy-900/50 border-navy-700/50"
                )}
              >
                <span className={cn("text-2xl", !unlocked && "grayscale opacity-50")}>
                  {a.icon}
                </span>
                <div className="flex-1 min-w-0">
                  <div className="text-sm font-semibold text-cream">
                    {locale === "fa" ? a.nameFa : a.nameEn}
                  </div>
                  <div className="text-[11px] text-cream/50 truncate">
                    {locale === "fa" ? a.descFa : a.descEn}
                  </div>
                  {!unlocked && a.goal > 1 && (
                    <div className="h-1.5 rounded-full bg-navy-900 overflow-hidden mt-1.5">
                      <div
                        className="h-full bg-gold-500/70"
                        style={{ width: `${pct}%` }}
                      />
                    </div>
                  )}
                </div>
                {unlocked && <Check className="size-4 text-gold-400 shrink-0" />}
              </motion.div>
            );
          })}
        </div>
      </div>
    </ScreenShell>
  );
}

function Stat({ label, value }: { label: string; value: string | number }) {
  return (
    <div className="bg-navy-900/60 rounded-xl py-3 text-center">
      <div className="text-xl font-black gold-text">{value}</div>
      <div className="text-[10px] text-cream/55 mt-0.5">{label}</div>
    </div>
  );
}

const GENDERS: Gender[] = ["male", "female", "other", ""];
const VIS_OPTIONS: { id: SocialVisibility; icon: React.ReactNode; key: string }[] = [
  { id: "public", icon: <Eye className="size-3.5" />, key: "profile.visPublic" },
  { id: "friends", icon: <Users className="size-3.5" />, key: "profile.visFriends" },
  { id: "hidden", icon: <EyeOff className="size-3.5" />, key: "profile.visHidden" },
];

function SocialSettings() {
  const { t, locale } = useI18n();
  const profile = useSessionStore((s) => s.profile);
  const updateProfile = useSessionStore((s) => s.updateProfile);
  const [links, setLinks] = useState<Record<string, string>>(() => ({
    instagram: profile?.socials?.instagram ?? "",
    telegram: profile?.socials?.telegram ?? "",
    x: profile?.socials?.x ?? "",
    youtube: profile?.socials?.youtube ?? "",
  }));
  const [saved, setSaved] = useState(false);
  if (!profile) return null;

  const gender = profile.gender ?? "";
  const vis = profile.socialsVisibility ?? "public";

  const saveLinks = async () => {
    const socials = Object.fromEntries(
      Object.entries(links).map(([k, v]) => [k, v.trim()]).filter(([, v]) => v)
    );
    await updateProfile({ socials });
    setSaved(true);
    setTimeout(() => setSaved(false), 1800);
  };

  return (
    <div className="glass rounded-2xl p-4 mt-4">
      <h3 className="text-sm font-bold text-cream/80 mb-3">{t("profile.social")}</h3>

      {/* gender */}
      <div className="text-xs text-cream/55 mb-2">{t("profile.gender")}</div>
      <div className="flex flex-wrap gap-2 mb-4">
        {GENDERS.map((g) => {
          const meta = g ? GENDER_META[g] : null;
          const active = gender === g;
          return (
            <button
              key={g || "none"}
              onClick={() => updateProfile({ gender: g })}
              className={cn(
                "rounded-lg px-3 py-1.5 text-sm font-semibold transition flex items-center gap-1.5",
                active ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70 hover:text-cream"
              )}
            >
              {meta ? (
                <>
                  <span style={{ color: active ? undefined : meta.color }}>{meta.symbol}</span>
                  {locale === "fa" ? meta.faLabel : meta.enLabel}
                </>
              ) : (
                t("profile.genderNone")
              )}
            </button>
          );
        })}
      </div>

      {/* social links */}
      <div className="text-xs text-cream/55 mb-2">{t("profile.socialLinks")}</div>
      <div className="space-y-2">
        {SOCIAL_PLATFORMS.map((p) => (
          <div key={p.key} className="flex items-center gap-2">
            <span className="grid size-8 place-items-center rounded-lg bg-navy-900/70 text-base shrink-0" style={{ color: p.color }}>
              {p.icon}
            </span>
            <input
              value={links[p.key]}
              onChange={(e) => setLinks((l) => ({ ...l, [p.key]: e.target.value }))}
              placeholder={p.label}
              dir="ltr"
              className="flex-1 rounded-lg bg-navy-900/70 gold-border px-3 py-1.5 text-sm text-cream placeholder:text-cream/30 outline-none focus:ring-2 focus:ring-gold-500/40"
            />
          </div>
        ))}
      </div>

      {/* visibility */}
      <div className="text-xs text-cream/55 mt-4 mb-2">{t("profile.socialsVisibility")}</div>
      <div className="glass rounded-xl p-1 flex gap-1">
        {VIS_OPTIONS.map((o) => (
          <button
            key={o.id}
            onClick={() => updateProfile({ socialsVisibility: o.id })}
            className={cn(
              "flex-1 rounded-lg py-1.5 text-xs font-bold transition flex items-center justify-center gap-1",
              vis === o.id ? "btn-gold" : "text-cream/60 hover:text-cream"
            )}
          >
            {o.icon}
            {t(o.key)}
          </button>
        ))}
      </div>
      <p className="text-[10px] text-cream/40 mt-1.5">{t("profile.socialsHint")}</p>

      <button onClick={saveLinks} className="press-3d btn-gold w-full rounded-xl py-2.5 mt-3 text-sm font-bold flex items-center justify-center gap-1.5">
        {saved ? <><Check className="size-4" />{t("profile.saved")}</> : t("profile.saveLinks")}
      </button>
    </div>
  );
}

function SoundSettings() {
  const { t } = useI18n();
  const { sfx, music, musicTrack, toggleSfx, toggleMusic, setMusicTrack } = useSoundStore();
  const tracks = [
    { id: "santoor" as const, label: t("settings.trackSantoor") },
    { id: "playful" as const, label: t("settings.trackPlayful") },
  ];
  return (
    <div className="glass rounded-2xl p-4 mt-4">
      <h3 className="text-sm font-bold text-cream/80 mb-2">{t("settings.audio")}</h3>
      <ToggleRow icon={<Volume2 className="size-4 text-gold-400" />} label={t("settings.sound")} on={sfx} onClick={toggleSfx} />
      <ToggleRow icon={<Music className="size-4 text-gold-400" />} label={t("settings.music")} on={music} onClick={toggleMusic} />
      {/* music style picker */}
      <div className="mt-3">
        <div className="text-[11px] text-cream/55 mb-1.5">{t("settings.musicStyle")}</div>
        <div className="grid grid-cols-2 gap-2">
          {tracks.map((tr) => (
            <button
              key={tr.id}
              onClick={() => setMusicTrack(tr.id)}
              className={cn(
                "press-3d rounded-xl py-2.5 text-sm font-bold",
                musicTrack === tr.id ? "btn-gold" : "bg-navy-900/70 gold-border text-cream/70"
              )}
            >
              {tr.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

function ToggleRow({
  icon,
  label,
  on,
  onClick,
}: {
  icon: React.ReactNode;
  label: string;
  on: boolean;
  onClick: () => void;
}) {
  return (
    <button onClick={onClick} className="w-full flex items-center justify-between py-2">
      <span className="flex items-center gap-2 text-sm text-cream/85">
        {icon}
        {label}
      </span>
      <span className={cn("relative w-11 h-6 rounded-full transition", on ? "bg-gold-500" : "bg-navy-700")}>
        <span
          className={cn(
            "absolute top-0.5 size-5 rounded-full bg-white transition-all",
            on ? "ltr:right-0.5 rtl:left-0.5" : "ltr:left-0.5 rtl:right-0.5"
          )}
        />
      </span>
    </button>
  );
}