// Phone mockup renderer — shows different app screens based on `screen` prop.
// Content is designed to mirror the actual MeuCraque app (home, detail, profile, add game).

function PhoneFrame({ children, className = "" }) {
  return (
    <div className={`phone-frame ${className}`}>
      <div className="phone-screen">
        <div className="phone-notch" />
        {children}
      </div>
    </div>
  );
}

function StatusBar() {
  return (
    <div className="absolute top-0 left-0 right-0 h-[34px] flex items-center justify-between px-6 text-[11px] font-semibold text-on-surface z-20">
      <span>9:41</span>
      <div className="flex items-center gap-1">
        <Icon name="signal_cellular_alt" size={12} />
        <Icon name="wifi" size={12} />
        <Icon name="battery_full" size={12} />
      </div>
    </div>
  );
}

function BottomNav({ active = "home" }) {
  const items = [
    { id: "home", label: "Home", icon: "home" },
    { id: "games", label: "Jogos", icon: "sports_soccer" },
    { id: "add", label: "Add", icon: "add_circle" },
    { id: "profile", label: "Perfil", icon: "person" },
  ];
  return (
    <div className="absolute bottom-0 left-0 right-0 h-[58px] bg-surface border-t border-outline flex justify-around items-center px-2 z-20">
      {items.map((it) => {
        const isActive = it.id === active;
        return (
          <div key={it.id} className="flex flex-col items-center gap-0.5">
            <Icon
              name={it.icon}
              fill={isActive}
              className={isActive ? "text-primary" : "text-on-surface-variant"}
              size={22}
            />
            <span
              className={`text-[9px] font-bold uppercase tracking-tighter ${
                isActive ? "text-primary" : "text-on-surface-variant"
              }`}
            >
              {it.label}
            </span>
          </div>
        );
      })}
    </div>
  );
}

// --- Screen: Home Dashboard ---
function HomeScreen() {
  return (
    <div className="absolute inset-0 bg-background text-on-background overflow-hidden">
      <StatusBar />
      {/* Top bar */}
      <div className="absolute top-[34px] left-0 right-0 h-[48px] border-b border-outline flex items-center justify-between px-4 bg-background/80 backdrop-blur-md z-10">
        <div className="flex items-center gap-2">
          <Icon name="sports_soccer" className="text-primary" size={18} />
          <span className="font-black tracking-tighter text-[14px]">MeuCraque</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="relative">
            <Icon name="notifications" className="text-on-surface-variant" size={18} />
            <span className="absolute top-0.5 right-0.5 w-1 h-1 bg-primary rounded-full" />
          </div>
          <div className="w-5 h-5 rounded-full bg-surface-container-high border border-outline" />
        </div>
      </div>

      <div className="absolute top-[82px] left-0 right-0 bottom-[58px] overflow-y-auto no-scrollbar px-3 pb-4 pt-3 space-y-3">
        {/* Greeting */}
        <div>
          <h1 className="text-lg font-bold tracking-tight">Olá, Glauber!</h1>
          <p className="text-on-surface-variant text-[10px] mt-0.5">Confira as estatísticas da temporada.</p>
        </div>

        {/* KPIs */}
        <div className="grid grid-cols-2 gap-2">
          {[
            { label: "GOLS DO TIME", value: "42", acc: "+12%", accClass: "text-tertiary" },
            { label: "GOLS DO ARTHUR", value: "18", acc: "Top Scorer", accClass: "text-primary", valClass: "text-primary" },
            { label: "MÉDIA GOLS/JOGO", value: "1.4", acc: "estável", accClass: "text-on-surface-variant" },
            { label: "MINUTOS", value: "840", acc: "MIN", accClass: "text-on-surface-variant" },
          ].map((k, i) => (
            <div key={i} className="bg-surface-container border border-outline p-2.5 rounded-lg">
              <p className="text-[7px] uppercase tracking-widest text-on-surface-variant font-bold mb-0.5">
                {k.label}
              </p>
              <div className="flex items-baseline gap-1">
                <span className={`text-lg font-black ${k.valClass || "text-on-surface"}`}>{k.value}</span>
                <span className={`text-[8px] font-bold ${k.accClass}`}>{k.acc}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Aproveitamento */}
        <div className="bg-surface-container border border-outline p-3 rounded-lg">
          <p className="text-[8px] font-bold uppercase tracking-widest text-on-surface-variant mb-2">
            Aproveitamento
          </p>
          <div className="flex items-center gap-3">
            <div className="relative w-[70px] h-[70px] shrink-0">
              <div
                className="w-full h-full rounded-full donut-mask"
                style={{ background: "conic-gradient(#34d399 0% 65%, #fbbf24 65% 85%, #ef4444 85% 100%)" }}
              />
              <div className="absolute inset-0 flex flex-col items-center justify-center">
                <span className="text-[14px] font-black">82%</span>
              </div>
            </div>
            <div className="flex-1 grid grid-cols-3 gap-1 text-center">
              {[
                { c: "bg-tertiary", l: "V", v: "12" },
                { c: "bg-warning", l: "E", v: "4" },
                { c: "bg-error", l: "D", v: "3" },
              ].map((x, i) => (
                <div key={i} className="flex flex-col items-center">
                  <div className={`w-1.5 h-1.5 rounded-full ${x.c} mb-0.5`} />
                  <span className="text-[8px] font-bold text-on-surface-variant">{x.l}</span>
                  <span className="text-xs font-black">{x.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Gols por campeonato */}
        <div className="bg-surface-container border border-outline p-3 rounded-lg space-y-2">
          <p className="text-[8px] font-bold uppercase tracking-widest text-on-surface-variant mb-1">
            Gols por campeonato
          </p>
          {[
            { l: "Copa Escolar", g: 8, w: "80%" },
            { l: "Torneio Regional", g: 6, w: "60%" },
            { l: "Amistosos", g: 4, w: "40%" },
          ].map((b, i) => (
            <div key={i} className="space-y-1">
              <div className="flex justify-between text-[9px] font-bold">
                <span>{b.l}</span>
                <span className="text-primary">{b.g} Gols</span>
              </div>
              <div className="h-1 w-full bg-surface-container-highest rounded-full overflow-hidden">
                <div className="h-full bg-primary rounded-full bar-fill" style={{ width: b.w }} />
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* FAB */}
      <div className="absolute bottom-[70px] right-3 w-10 h-10 bg-primary rounded-xl flex items-center justify-center z-20 cta-glow">
        <Icon name="add" className="text-on-primary" size={20} />
      </div>

      <BottomNav active="home" />
    </div>
  );
}

// --- Screen: Match detail ---
function MatchDetailScreen() {
  return (
    <div className="absolute inset-0 bg-background overflow-hidden">
      <StatusBar />
      <div className="absolute top-[34px] left-0 right-0 h-[48px] border-b border-outline flex items-center justify-between px-3 z-10">
        <Icon name="arrow_back" className="text-primary" size={18} />
        <span className="text-[13px] font-bold tracking-tight">Detalhe do Jogo</span>
        <Icon name="edit" className="text-primary" size={18} />
      </div>
      <div className="absolute top-[82px] left-0 right-0 bottom-[58px] overflow-y-auto no-scrollbar px-3 pb-4 pt-3 space-y-3">
        {/* Victory card */}
        <div className="relative overflow-hidden rounded-lg p-3 text-center" style={{ background: "#065f46", borderColor: "#3f3f46", border: "1px solid #3f3f46" }}>
          <div className="absolute -top-6 -right-6 w-20 h-20 rounded-full" style={{ background: "rgba(52,211,153,0.2)", filter: "blur(30px)" }} />
          <span className="inline-block bg-tertiary text-[#001a12] text-[8px] font-bold px-2 py-0.5 rounded-full tracking-wider">
            VITÓRIA
          </span>
          <h3 className="mt-1.5 text-[14px] font-extrabold tracking-tighter" style={{ color: "#bbf7d0" }}>
            CAAS Futmax 3 <span style={{ color: "#6ee7b7" }} className="mx-0.5">x</span> 1 Lobos AC
          </h3>
          <p className="text-[9px] mt-0.5" style={{ color: "#6ee7b7" }}>
            24/05/2024 • Copa Regional
          </p>
        </div>

        <div className="grid grid-cols-2 gap-2">
          {[
            { i: "sports_soccer", v: "1", l: "GOLS" },
            { i: "handshake", v: "1", l: "ASSIST." },
            { i: "shield", v: "0", l: "DEFESAS" },
            { i: "schedule", v: "40", l: "MINUTOS" },
          ].map((s, i) => (
            <div key={i} className="bg-surface-container border border-outline rounded-lg p-2.5 flex flex-col items-center">
              <Icon name={s.i} className="text-primary mb-0.5" size={16} />
              <span className="text-lg font-bold">{s.v}</span>
              <span className="text-[8px] text-on-surface-variant font-bold uppercase tracking-widest">{s.l}</span>
            </div>
          ))}
        </div>

        <div className="bg-surface-container border border-outline rounded-lg p-3 space-y-2">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-[8px] text-on-surface-variant uppercase">Time</p>
              <p className="text-[11px] font-bold">CAAS Futmax</p>
            </div>
            <div className="text-right">
              <p className="text-[8px] text-on-surface-variant uppercase">Adversário</p>
              <p className="text-[11px] font-bold">Lobos AC</p>
            </div>
          </div>
          <div className="border-t border-outline-variant pt-2 flex items-start gap-2">
            <Icon name="location_on" className="text-primary mt-0.5" size={14} />
            <div>
              <p className="text-[8px] text-on-surface-variant uppercase">Local</p>
              <p className="text-[10px] font-medium leading-snug">Arena Central, Av. Principal 123</p>
            </div>
          </div>
        </div>
      </div>
      <BottomNav active="games" />
    </div>
  );
}

// --- Screen: Profile ---
function ProfileScreen() {
  return (
    <div className="absolute inset-0 bg-background overflow-hidden">
      <StatusBar />
      <div className="absolute top-[34px] left-0 right-0 h-[48px] border-b border-outline flex items-center justify-between px-3 z-10">
        <div className="flex items-center gap-2">
          <Icon name="menu" className="text-primary" size={18} />
          <span className="text-[13px] font-bold tracking-tight">Perfil</span>
        </div>
        <Icon name="settings" className="text-on-surface-variant" size={18} />
      </div>
      <div className="absolute top-[82px] left-0 right-0 bottom-[58px] overflow-y-auto no-scrollbar px-3 pb-4 pt-3 space-y-3">
        <div className="bg-surface-container border border-outline rounded-lg p-3 flex items-center gap-3">
          <div className="relative">
            <div className="w-14 h-14 rounded-full border-2 border-primary bg-surface-container-high flex items-center justify-center">
              <Icon name="person" className="text-on-surface-variant" size={28} />
            </div>
            <div className="absolute bottom-0 right-0 bg-primary p-0.5 rounded-full border-2 border-background">
              <Icon name="edit" className="text-on-primary" fill size={10} />
            </div>
          </div>
          <div>
            <h3 className="text-[14px] font-bold">Glauber</h3>
            <p className="text-[9px] text-on-surface-variant">glauber@email.com</p>
            <p className="text-[8px] text-on-surface-variant">Membro desde Mar 2026</p>
          </div>
        </div>

        <div>
          <div className="flex items-center justify-between mb-2">
            <p className="text-[8px] font-bold uppercase tracking-widest text-on-surface-variant">Meus Atletas</p>
            <span className="text-[8px] font-bold text-primary bg-primary/10 px-1.5 py-0.5 rounded">1 ATLETA</span>
          </div>
          <div className="bg-surface-container border border-outline rounded-lg p-2.5 flex items-center gap-2.5">
            <div className="w-10 h-10 rounded bg-surface-container-highest flex items-center justify-center">
              <Icon name="person" className="text-on-surface-variant" size={20} />
            </div>
            <div className="flex-1">
              <p className="text-[11px] font-bold">Arthur Silva</p>
              <div className="flex items-center gap-1 mt-0.5">
                <span className="text-[8px] bg-surface-container-highest px-1.5 py-0.5 rounded">Sub-10</span>
                <span className="text-[8px] text-tertiary font-medium">Ala</span>
              </div>
            </div>
            <Icon name="chevron_right" className="text-on-surface-variant" size={16} />
          </div>
        </div>

        <div>
          <p className="text-[8px] font-bold uppercase tracking-widest text-on-surface-variant mb-2">Meus Times</p>
          <div className="bg-surface-container border border-outline rounded-lg p-2.5 flex items-center gap-2.5">
            <div className="w-8 h-8 rounded bg-surface-container-highest flex items-center justify-center">
              <Icon name="apparel" className="text-primary" size={16} />
            </div>
            <span className="text-[11px] font-medium flex-1">CAAS Futmax</span>
            <Icon name="chevron_right" className="text-on-surface-variant" size={16} />
          </div>
        </div>

        <div>
          <p className="text-[8px] font-bold uppercase tracking-widest text-on-surface-variant mb-2">Meus Campeonatos</p>
          <div className="bg-surface-container border border-outline rounded-lg p-2.5 flex items-center gap-2.5">
            <div className="w-8 h-8 rounded bg-surface-container-highest flex items-center justify-center">
              <Icon name="emoji_events" className="text-tertiary" size={16} />
            </div>
            <span className="text-[11px] font-medium flex-1">Copa Interior</span>
            <Icon name="chevron_right" className="text-on-surface-variant" size={16} />
          </div>
        </div>
      </div>
      <BottomNav active="profile" />
    </div>
  );
}

// --- Screen: New game (form) ---
function NovoJogoScreen() {
  return (
    <div className="absolute inset-0 bg-background overflow-hidden">
      <StatusBar />
      <div className="absolute top-[34px] left-0 right-0 h-[48px] border-b border-outline flex items-center justify-between px-3 z-10">
        <Icon name="close" className="text-primary" size={18} />
        <span className="text-[13px] font-bold tracking-tight">Novo Jogo</span>
        <span className="text-[11px] font-bold text-primary">Salvar</span>
      </div>
      <div className="absolute top-[82px] left-0 right-0 bottom-[58px] overflow-y-auto no-scrollbar px-3 pb-4 pt-3 space-y-3">
        {[
          { l: "Time", v: "CAAS Futmax", i: "groups" },
          { l: "Adversário", v: "Lobos AC", i: "flag" },
          { l: "Data", v: "24/05/2024", i: "event" },
          { l: "Campeonato", v: "Copa Regional", i: "emoji_events" },
          { l: "Local", v: "Arena Central", i: "location_on" },
        ].map((f, i) => (
          <div key={i} className="bg-surface-container border border-outline rounded-lg p-2.5 flex items-center gap-2.5">
            <Icon name={f.i} className="text-primary" size={16} />
            <div className="flex-1">
              <p className="text-[8px] text-on-surface-variant uppercase font-bold tracking-widest">{f.l}</p>
              <p className="text-[11px] font-medium">{f.v}</p>
            </div>
            <Icon name="chevron_right" className="text-on-surface-variant" size={14} />
          </div>
        ))}
        <div className="bg-surface-container border border-outline rounded-lg p-3">
          <p className="text-[8px] text-on-surface-variant uppercase font-bold tracking-widest mb-2">Placar</p>
          <div className="grid grid-cols-3 items-center gap-2">
            <div className="text-center">
              <p className="text-[8px] text-on-surface-variant">CAAS</p>
              <div className="mt-1 h-10 bg-surface-container-highest rounded-lg flex items-center justify-center">
                <span className="text-xl font-black text-primary">3</span>
              </div>
            </div>
            <span className="text-center text-on-surface-variant text-xs font-bold">x</span>
            <div className="text-center">
              <p className="text-[8px] text-on-surface-variant">Lobos</p>
              <div className="mt-1 h-10 bg-surface-container-highest rounded-lg flex items-center justify-center">
                <span className="text-xl font-black">1</span>
              </div>
            </div>
          </div>
        </div>
        <button className="w-full py-2.5 rounded-lg bg-primary text-on-primary text-[11px] font-bold tracking-wide cta-glow">
          Confirmar Jogo
        </button>
      </div>
      <BottomNav active="add" />
    </div>
  );
}

function PhoneMock({ screen = "home", className = "" }) {
  const screens = {
    home: <HomeScreen />,
    match: <MatchDetailScreen />,
    profile: <ProfileScreen />,
    novo: <NovoJogoScreen />,
  };
  return <PhoneFrame className={className}>{screens[screen] || screens.home}</PhoneFrame>;
}

window.PhoneMock = PhoneMock;
window.PhoneFrame = PhoneFrame;