// Animated phone screens for Garner landing page
// Each screen mimics the actual app — HQ hero bars, Tanks envelope drain, Goals loot drop, AI chat
const { useState, useEffect, useRef } = React;

// ====== SHARED PHONE FRAME ======
function PhoneFrame({ children, label, glow = "purple" }) {
  const glowColor = {
    purple: "0 30px 80px -20px rgba(187, 134, 252, 0.45), 0 0 0 1px rgba(187,134,252,0.15)",
    gold: "0 30px 80px -20px rgba(255, 215, 0, 0.4), 0 0 0 1px rgba(255,215,0,0.15)",
    green: "0 30px 80px -20px rgba(0, 230, 118, 0.4), 0 0 0 1px rgba(0,230,118,0.15)",
    cyan: "0 30px 80px -20px rgba(34, 211, 238, 0.4), 0 0 0 1px rgba(34,211,238,0.15)",
  }[glow];
  return (
    <div className="phone-frame" style={{ boxShadow: glowColor }}>
      <div className="phone-notch"></div>
      <div className="phone-screen">{children}</div>
      {label && <div className="phone-label">{label}</div>}
    </div>
  );
}

// ====== HUD BAR (mini) ======
function MiniHUD({ system = "Personal", streak = 12 }) {
  return (
    <div className="mini-hud">
      <div className="mini-hud-left">
        <div className="mini-avatar">👤</div>
        <div>
          <div className="mini-app-name">GARNER</div>
          <div className="mini-system">{system}</div>
        </div>
      </div>
      <div className="mini-streak">
        <img src="assets/flame.png" alt="" className="streak-icon" />
        <span>{streak}</span>
      </div>
    </div>
  );
}

// ====== SCREEN 1: HQ — INCOME vs OBLIGATIONS ======
function ScreenHQ({ active }) {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    if (!active) { setProgress(0); return; }
    let raf;
    const start = performance.now();
    const tick = (t) => {
      const p = Math.min(1, (t - start) / 1800);
      const eased = 1 - Math.pow(1 - p, 3);
      setProgress(eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active]);

  const income = 8994;
  const bills = 6519;
  const env = 1850;
  const total = income;
  const billsPct = (bills / total) * 100 * progress;
  const envPct = (env / total) * 100 * progress;
  const incomePct = 100 * progress;

  return (
    <div className="screen screen-hq">
      <MiniHUD system="Personal" streak={12} />
      <div className="hq-banner">
        <span className="hq-banner-icon">⚡</span>
        <span>YOU'RE COVERED</span>
        <span className="hq-banner-icon">⚡</span>
      </div>
      <div className="hq-subtitle">Stick to the plan</div>

      <div className="bar-block">
        <div className="bar-label">
          <span>INCOME</span>
          <span className="bar-amount">${income.toLocaleString()}</span>
        </div>
        <div className="bar-track">
          <div className="bar-fill bar-fill-income" style={{ width: `${incomePct}%` }}>
            <div className="bar-shine"></div>
          </div>
        </div>
      </div>

      <div className="bar-block">
        <div className="bar-label">
          <span>ALLOCATED</span>
          <span className="bar-amount">${(bills + env).toLocaleString()}</span>
        </div>
        <div className="bar-track">
          <div className="bar-fill bar-fill-bills" style={{ width: `${billsPct}%` }}>
            <div className="bar-shine"></div>
          </div>
          <div className="bar-fill bar-fill-env" style={{ width: `${envPct}%`, left: `${billsPct}%` }}>
            <div className="bar-shine"></div>
          </div>
        </div>
        <div className="bar-legend">
          <span><span className="chip chip-purple"></span>Bills ${bills.toLocaleString()}</span>
          <span><span className="chip chip-cyan"></span>Tanks ${env.toLocaleString()}</span>
        </div>
      </div>

      <div className="surplus-card">
        <div className="surplus-label">SURPLUS</div>
        <div className="surplus-amount">${(income - bills - env).toLocaleString()}<span>/mo</span></div>
        <div className="surplus-sub">Ready to route to goals →</div>
      </div>
    </div>
  );
}

// ====== SCREEN 2: TANKS — ENVELOPES DRAINING ======
function ScreenTanks({ active }) {
  const [t, setT] = useState(0);
  useEffect(() => {
    if (!active) { setT(0); return; }
    let raf, start;
    const loop = (now) => {
      if (!start) start = now;
      const elapsed = (now - start) / 1000;
      setT(elapsed);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, [active]);

  // each envelope drains at its own pace, looping
  const envelopes = [
    { name: "Groceries", icon: "cart.png", budget: 800, period: 6, phase: 0, color: "#00E676" },
    { name: "Gas", icon: "gas.png", budget: 320, period: 8, phase: 1, color: "#FFAB00" },
    { name: "Coffee + Eats", icon: "coffee.png", budget: 240, period: 5, phase: 2, color: "#FF5252" },
    { name: "Kids Stuff", icon: "moneybag.png", budget: 450, period: 7, phase: 1.5, color: "#22D3EE" },
  ];

  return (
    <div className="screen screen-tanks">
      <MiniHUD system="Personal" streak={12} />
      <div className="screen-title">
        <span>🎒 TANKS</span>
        <span className="screen-title-count">4 envelopes</span>
      </div>

      {envelopes.map((e, i) => {
        const cycle = ((t + e.phase) % e.period) / e.period; // 0..1
        const remainPct = Math.max(0.05, 1 - cycle);
        const remaining = Math.round(e.budget * remainPct);
        const labelMap = remainPct > 0.7 ? ["FULL!", "#00E676"] :
                          remainPct > 0.5 ? ["ON TRACK", "#22D3EE"] :
                          remainPct > 0.3 ? ["WATCH IT", "#FFAB00"] :
                          remainPct > 0.1 ? ["LOW!", "#FF5252"] :
                                             ["EMPTY", "#FF5252"];
        return (
          <div className="env-card" key={i}>
            <div className="env-row">
              <div className="env-icon"><img src={`assets/${e.icon}`} alt="" /></div>
              <div className="env-meta">
                <div className="env-name">{e.name}</div>
                <div className="env-budget">${remaining} of ${e.budget}</div>
              </div>
              <div className="env-badge" style={{ background: labelMap[1], color: "#110B28" }}>
                {labelMap[0]}
              </div>
            </div>
            <div className="hp-track">
              <div className="hp-fill" style={{ width: `${remainPct * 100}%`, background: `linear-gradient(90deg, ${e.color}, ${labelMap[1]})` }}>
                <div className="bar-shine"></div>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ====== SCREEN 3: GOALS — LOOT DROP ======
function ScreenGoals({ active }) {
  const [phase, setPhase] = useState("idle"); // idle, dropping, filling, celebrating
  const [fill, setFill] = useState(0.42);
  const [coins, setCoins] = useState([]);

  useEffect(() => {
    if (!active) { setPhase("idle"); setFill(0.42); setCoins([]); return; }
    const seq = [
      { delay: 600, action: () => {
        setPhase("dropping");
        setCoins(Array.from({ length: 8 }, (_, i) => ({ id: i, x: 20 + i * 8, delay: i * 80 })));
      }},
      { delay: 1800, action: () => {
        setPhase("filling");
        let f = 0.42;
        const intv = setInterval(() => {
          f += 0.012;
          setFill(Math.min(0.78, f));
          if (f >= 0.78) { clearInterval(intv); setPhase("celebrating"); }
        }, 30);
      }},
      { delay: 4500, action: () => { setPhase("idle"); setFill(0.42); setCoins([]); }},
    ];
    const timeouts = seq.map(s => setTimeout(s.action, s.delay));
    return () => timeouts.forEach(clearTimeout);
  }, [active]);

  return (
    <div className="screen screen-goals">
      <MiniHUD system="Personal" streak={12} />
      <div className="screen-title">
        <span>🏆 GOALS</span>
      </div>

      {phase !== "idle" && (
        <div className="surplus-pop">
          <div className="surplus-pop-inner">
            <img src="assets/treasure-chest.png" alt="" className="surplus-pop-icon" />
            <div>
              <div className="surplus-pop-title">SURPLUS DETECTED</div>
              <div className="surplus-pop-sub">+$148 from Groceries → Vacation</div>
            </div>
          </div>
        </div>
      )}

      <div className="goal-card goal-card-hero">
        <div className="goal-row">
          <img src="assets/vacation-beach.png" alt="" className="goal-icon" />
          <div className="goal-meta">
            <div className="goal-name">Family Vacation</div>
            <div className="goal-note">Costa Rica · December</div>
          </div>
          <div className="goal-rarity" data-rare={fill > 0.75 ? "epic" : "rare"}>
            {fill > 0.75 ? "EPIC" : "RARE"}
          </div>
        </div>
        <div className="hp-track hp-track-large">
          <div className="hp-fill" style={{ width: `${fill * 100}%`, background: "linear-gradient(90deg, #FFD700, #FFAB00)" }}>
            <div className="bar-shine"></div>
          </div>
        </div>
        <div className="goal-stats">
          <div><div className="goal-stat-num">${(3200 * fill).toFixed(0)}</div><div className="goal-stat-label">SAVED</div></div>
          <div><div className="goal-stat-num">${(3200 * (1 - fill)).toFixed(0)}</div><div className="goal-stat-label">TO GO</div></div>
          <div><div className="goal-stat-num">{Math.max(1, Math.round(8 * (1 - fill)))}mo</div><div className="goal-stat-label">ETA</div></div>
        </div>

        {coins.map(c => (
          <div key={c.id} className="coin-drop" style={{ left: `${c.x}%`, animationDelay: `${c.delay}ms` }}>
            <img src="assets/coins.png" alt="" />
          </div>
        ))}
      </div>

      <div className="goal-card-mini">
        <img src="assets/shield.png" alt="" className="goal-mini-icon" />
        <div className="goal-mini-meta">
          <div className="goal-mini-name">Emergency Fund</div>
          <div className="hp-track hp-track-mini"><div className="hp-fill" style={{ width: "62%", background: "linear-gradient(90deg, #00E676, #22D3EE)" }}><div className="bar-shine"></div></div></div>
        </div>
        <div className="goal-mini-pct">62%</div>
      </div>

      <div className="goal-card-mini">
        <img src="assets/tooth.png" alt="" className="goal-mini-icon" />
        <div className="goal-mini-meta">
          <div className="goal-mini-name">Dental Work</div>
          <div className="hp-track hp-track-mini"><div className="hp-fill" style={{ width: "100%", background: "linear-gradient(90deg, #FFD700, #FFD700)" }}><div className="bar-shine"></div></div></div>
        </div>
        <div className="goal-mini-pct" style={{ color: "#FFD700" }}>FUNDED!</div>
      </div>
    </div>
  );
}

// ====== SCREEN 4: AI CHAT WITH GARNER ======
function ScreenChat({ active }) {
  const [msgs, setMsgs] = useState([]);
  const allMsgs = [
    { from: "user", text: "can we afford a beach trip in june?" },
    { from: "garner", text: "Let's see. Vacation goal is at 42% — $1,344 saved. June trip estimate: $2,800." },
    { from: "garner", text: "If you keep your $659/mo surplus rolling in, you'll be ready by August. June would mean borrowing from Emergency Fund (-$1,456)." },
    { from: "user", text: "what if we cut eating out?" },
    { from: "garner", text: "Coffee+Eats tank is $240/mo. Trim to $120 = +$120/mo → ready by **mid-July**. 🎯" },
  ];

  useEffect(() => {
    if (!active) { setMsgs([]); return; }
    const timeouts = allMsgs.map((m, i) =>
      setTimeout(() => setMsgs(prev => [...prev, m]), 600 + i * 1100)
    );
    return () => timeouts.forEach(clearTimeout);
  }, [active]);

  return (
    <div className="screen screen-chat">
      <div className="chat-header">
        <img src="assets/garner-guy.png" alt="" className="chat-avatar" />
        <div>
          <div className="chat-name">Garner</div>
          <div className="chat-status">● Always on</div>
        </div>
      </div>
      <div className="chat-body">
        {msgs.map((m, i) => (
          <div key={i} className={`chat-msg chat-msg-${m.from}`}>
            {m.from === "garner" && <img src="assets/garner-guy.png" alt="" className="chat-msg-avatar" />}
            <div className="chat-bubble" dangerouslySetInnerHTML={{
              __html: m.text.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>')
            }}/>
          </div>
        ))}
        {msgs.length < allMsgs.length && msgs.length > 0 && msgs[msgs.length - 1].from === "user" && (
          <div className="chat-msg chat-msg-garner">
            <img src="assets/garner-guy.png" alt="" className="chat-msg-avatar" />
            <div className="chat-bubble chat-typing"><span></span><span></span><span></span></div>
          </div>
        )}
      </div>
      <div className="chat-input">
        <span>Ask Garner anything…</span>
      </div>
    </div>
  );
}

// ====== SYSTEM SWITCHER MINI ======
function SystemSwitcher({ active }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    if (!active) { setIdx(0); return; }
    const intv = setInterval(() => setIdx(i => (i + 1) % 3), 2000);
    return () => clearInterval(intv);
  }, [active]);

  const systems = [
    { name: "Personal", icon: "👤", desc: "Household & life", color: "#BB86FC" },
    { name: "Rentals", icon: "🏘️", desc: "Properties & equity", color: "#22D3EE" },
    { name: "Business", icon: "💼", desc: "ACME Agency", color: "#FFD700" },
  ];

  return (
    <div className="sys-switcher">
      {systems.map((s, i) => (
        <div key={i} className={`sys-card ${idx === i ? "sys-card-active" : ""}`}
             style={{ "--sys-color": s.color }}>
          <div className="sys-icon">{s.icon}</div>
          <div className="sys-name">{s.name}</div>
          <div className="sys-desc">{s.desc}</div>
          {idx === i && <div className="sys-active-badge">VIEWING</div>}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { PhoneFrame, ScreenHQ, ScreenTanks, ScreenGoals, ScreenChat, SystemSwitcher });