/* global React */
const { useState, useEffect } = React;
const { AppStoreBadge, PlayStoreBadge } = window;

// ─── Helpers ──────────────────────────────────────────
function storyHue(id = "") {
  let h = 0;
  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) & 0xffffffff;
  return Math.abs(h) % 360;
}
function fmtDate(ts) {
  if (!ts) return "";
  try { return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }); }
  catch { return ""; }
}
function getInitials(user) {
  const n = user?.displayName || user?.email || "";
  return n.split(/\s+/).filter(Boolean).map(w => w[0]).slice(0, 2).join("").toUpperCase() || "?";
}
function avatarHue(uid = "") {
  let h = 0;
  for (let i = 0; i < uid.length; i++) h = (h * 17 + uid.charCodeAt(i)) & 0xffffffff;
  return Math.abs(h) % 360;
}
function friendlyAuthError(e) {
  const code = e?.code || e?.message || "";
  if (code.includes("user-not-found") || code.includes("wrong-password") || code.includes("invalid-credential")) return "Incorrect email or password.";
  if (code.includes("email-already-in-use")) return "An account with this email already exists.";
  if (code.includes("weak-password")) return "Password must be at least 6 characters.";
  if (code.includes("invalid-email")) return "Please enter a valid email address.";
  if (code.includes("popup-closed") || code.includes("cancelled-popup-request")) return null;
  return "Something went wrong. Please try again.";
}

// ─── Loading ──────────────────────────────────────────
function PageLoading() {
  return (
    <div style={{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",gap:10,color:"var(--ink-3)",fontSize:14}}>
      <div className="acct-spinner"/>
      Loading…
    </div>
  );
}

// ─── Auth Page ────────────────────────────────────────
function AuthPage() {
  const [mode, setMode] = useState("signin");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");
  const [loading, setLoading] = useState(false);
  const [googleLoading, setGoogleLoading] = useState(false);
  const [error, setError] = useState(null);

  async function handleGoogle() {
    setGoogleLoading(true); setError(null);
    try { await window.__signInGoogle(); }
    catch(e) { const msg = friendlyAuthError(e); if (msg) setError(msg); setGoogleLoading(false); }
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setLoading(true); setError(null);
    try {
      if (mode === "signin") {
        await window.__signInEmail(email, password);
      } else {
        const cred = await window.__createAccount(email, password);
        if (name.trim()) await window.__updateDisplayName(cred.user, name.trim());
      }
    } catch(e) {
      const msg = friendlyAuthError(e);
      if (msg) setError(msg);
      setLoading(false);
    }
  }

  function switchMode(m) { setMode(m); setError(null); }

  return (
    <div className="acct-auth-page">
      <div className="acct-auth-bg"/>
      <nav className="acct-auth-nav">
        <a href="/" className="talio-mark"><img src="img/talio_logo.png" alt="Talio"/></a>
        <a href="/" className="acct-auth-nav-back">← Back to Talio</a>
      </nav>
      <div className="acct-auth-wrap">
        <div className="acct-auth-card">
          <h1 className="acct-auth-title">
            {mode === "signin" ? "Welcome back!" : "Create account"}
          </h1>
          <p className="acct-auth-sub">
            {mode === "signin"
              ? "Sign in to see your stories and manage your account."
              : "Start creating personalized bedtime stories for your child."}
          </p>

          <button className="acct-google-btn" onClick={handleGoogle} disabled={loading || googleLoading}>
            <svg width="20" height="20" viewBox="0 0 48 48">
              <path fill="#FFC107" d="M43.6 20.1H42V20H24v8h11.3C33.7 32.7 29.2 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.1 7.9 3l5.7-5.7C34.1 6.5 29.3 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.6-.4-3.9z"/>
              <path fill="#FF3D00" d="m6.3 14.7 6.6 4.8C14.6 16 19 12 24 12c3.1 0 5.8 1.1 7.9 3l5.7-5.7C34.1 6.5 29.3 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/>
              <path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.4 35.2 26.8 36 24 36c-5.2 0-9.6-3.3-11.3-8H6.2C9.6 39.6 16.3 44 24 44z"/>
              <path fill="#1976D2" d="M43.6 20.1H42V20H24v8h11.3c-.8 2.3-2.3 4.3-4.3 5.6l6.2 5.2C41.6 34.9 44 30 44 24c0-1.3-.1-2.6-.4-3.9z"/>
            </svg>
            {googleLoading ? "Signing in…" : "Continue with Google"}
          </button>

          <div className="acct-divider"><span>or</span></div>

          {error && <div className="acct-error">{error}</div>}

          <form onSubmit={handleSubmit}>
            {mode === "signup" && (
              <div className="acct-field">
                <label>Your name</label>
                <input type="text" placeholder="First name" value={name} onChange={e => setName(e.target.value)} autoFocus/>
              </div>
            )}
            <div className="acct-field">
              <label>Email</label>
              <input type="email" placeholder="you@example.com" value={email} onChange={e => setEmail(e.target.value)} required autoFocus={mode === "signin"}/>
            </div>
            <div className="acct-field">
              <label>Password</label>
              <input type="password" placeholder="••••••••" value={password} onChange={e => setPassword(e.target.value)} required minLength={6}/>
            </div>
            <button className="acct-submit-btn" type="submit" disabled={loading || googleLoading}>
              {loading ? "Please wait…" : mode === "signin" ? "Sign in" : "Create account"}
            </button>
          </form>

          <div className="acct-mode-toggle">
            {mode === "signin"
              ? <>{`Don't have an account? `}<button onClick={() => switchMode("signup")}>Sign up free</button></>
              : <>{"Already have an account? "}<button onClick={() => switchMode("signin")}>Sign in</button></>}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Story Modal ──────────────────────────────────────
function StoryModal({ story, onClose }) {
  const [pageIdx, setPageIdx] = useState(0);
  const pages = story.pages || [];
  const cur = pages[pageIdx];
  const hue = storyHue(story.id);
  const bg = `linear-gradient(135deg, hsl(${hue},65%,62%), hsl(${(hue+60)%360},70%,45%))`;

  useEffect(() => {
    const onKey = e => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setPageIdx(i => Math.min(i + 1, pages.length - 1));
      if (e.key === "ArrowLeft")  setPageIdx(i => Math.max(i - 1, 0));
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [pages.length]);

  return (
    <div className="acct-modal-overlay" onClick={onClose}>
      <div className="acct-modal" onClick={e => e.stopPropagation()}>
        {/* Illustration */}
        <div className="acct-modal-header" style={{background: bg}}>
          {cur?.illustrationUrl
            ? <img src={cur.illustrationUrl} alt="" style={{width:"100%",display:"block",aspectRatio:"16/9",objectFit:"cover"}}/>
            : <div style={{aspectRatio:"16/9",display:"grid",placeItems:"center",fontSize:52}}>📖</div>
          }
          {pageIdx > 0 && <button className="acct-modal-nav prev" onClick={() => setPageIdx(i => i-1)}>‹</button>}
          {pageIdx < pages.length - 1 && <button className="acct-modal-nav next" onClick={() => setPageIdx(i => i+1)}>›</button>}
          {pages.length > 1 && <div className="acct-modal-pg">{pageIdx+1} / {pages.length}</div>}
        </div>
        {/* Text */}
        <div className="acct-modal-body">
          <h2 className="acct-modal-title">{story.title || "Untitled"}</h2>
          {cur?.text && <p className="acct-modal-text">{cur.text}</p>}
          {pages.length > 1 && (
            <div className="acct-modal-dots">
              {pages.map((_, i) => (
                <button key={i} className={`acct-dot${i===pageIdx?" on":""}`} onClick={() => setPageIdx(i)}/>
              ))}
            </div>
          )}
        </div>
        <button className="acct-modal-close" onClick={onClose}>✕</button>
      </div>
    </div>
  );
}

// ─── Story Card ───────────────────────────────────────
function StoryCard({ story, onClick }) {
  const hue = storyHue(story.id);
  const bg = `linear-gradient(135deg, hsl(${hue},65%,62%), hsl(${(hue+60)%360},70%,45%))`;
  const cover = story.pages?.[0]?.illustrationUrl;
  return (
    <div className="acct-story-card" onClick={onClick}>
      <div className="acct-story-illus" style={{background: bg}}>
        {cover ? <img src={cover} alt=""/> : "📖"}
      </div>
      <div className="acct-story-info">
        <div className="acct-story-title">{story.title || "Untitled"}</div>
        <div className="acct-story-meta">
          {story.childName && <span>{story.childName}</span>}
          {story.therapeuticTheme && <span className="acct-story-tag">{story.therapeuticTheme}</span>}
        </div>
        <div className="acct-story-date">{fmtDate(story.createdAt)}</div>
      </div>
      <div className="acct-story-read">Read story →</div>
    </div>
  );
}

// ─── Stories Tab ──────────────────────────────────────
function StoriesTab({ user }) {
  const [stories, setStories] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");
  const [selected, setSelected] = useState(null);

  useEffect(() => {
    const db = window.__db; const fs = window.__fs;
    if (!db || !fs) { setLoading(false); return; }
    const q = fs.query(fs.collection(db, `users/${user.uid}/stories`), fs.orderBy("createdAt", "desc"));
    const unsub = fs.onSnapshot(q,
      snap => { setStories(snap.docs.map(d => ({id:d.id, ...d.data()}))); setLoading(false); },
      () => setLoading(false)
    );
    return unsub;
  }, [user.uid]);

  const filtered = stories.filter(s => {
    if (!search) return true;
    return [s.title, s.childName, s.therapeuticTheme].join(" ").toLowerCase().includes(search.toLowerCase());
  });

  return (
    <div>
      {selected && <StoryModal story={selected} onClose={() => setSelected(null)}/>}
      {stories.length > 3 && (
        <div className="acct-search-wrap">
          <input className="acct-search" placeholder="Search by title, theme, or name…" value={search} onChange={e => setSearch(e.target.value)}/>
        </div>
      )}
      {loading ? (
        <div className="acct-empty"><div className="acct-spinner" style={{width:28,height:28}}/></div>
      ) : filtered.length === 0 ? (
        <div className="acct-empty">
          {stories.length === 0 ? (
            <>
              <div className="acct-empty-icon">📖</div>
              <div className="acct-empty-title">No stories yet</div>
              <div className="acct-empty-sub">Open the Talio app to create your first personalized bedtime story!</div>
              <div style={{display:"flex",gap:10,marginTop:20,flexWrap:"wrap",justifyContent:"center"}}>
                <AppStoreBadge/><PlayStoreBadge/>
              </div>
            </>
          ) : (
            <>
              <div className="acct-empty-icon">🔍</div>
              <div className="acct-empty-title">No stories match</div>
              <div className="acct-empty-sub">Try a different search.</div>
            </>
          )}
        </div>
      ) : (
        <div className="acct-stories-grid">
          {filtered.map(s => <StoryCard key={s.id} story={s} onClick={() => setSelected(s)}/>)}
        </div>
      )}
    </div>
  );
}

// ─── Settings Tab ─────────────────────────────────────
function SettingsTab({ user }) {
  const [displayName, setDisplayName] = useState(user.displayName || "");
  const [savingName, setSavingName] = useState(false);
  const [nameSaved, setNameSaved] = useState(false);
  const [oldPw, setOldPw] = useState("");
  const [newPw, setNewPw] = useState("");
  const [savingPw, setSavingPw] = useState(false);
  const [pwError, setPwError] = useState(null);
  const [pwSaved, setPwSaved] = useState(false);
  const isEmailUser = user.providerData?.some(p => p.providerId === "password");

  async function saveName() {
    setSavingName(true);
    try {
      await window.__updateDisplayName(user, displayName.trim());
      setNameSaved(true);
      setTimeout(() => setNameSaved(false), 2000);
    } catch(e) { console.error(e); }
    setSavingName(false);
  }

  async function savePassword() {
    setPwError(null); setSavingPw(true);
    try {
      await window.__reauthenticate(user, window.__emailCredential(user.email, oldPw));
      await window.__updatePassword(user, newPw);
      setPwSaved(true); setOldPw(""); setNewPw("");
      setTimeout(() => setPwSaved(false), 2500);
    } catch(e) {
      const code = e?.code || "";
      if (code.includes("wrong-password") || code.includes("invalid-credential")) setPwError("Current password is incorrect.");
      else if (code.includes("weak-password")) setPwError("New password must be at least 6 characters.");
      else setPwError("Failed to update. Please try again.");
    }
    setSavingPw(false);
  }

  return (
    <div className="acct-settings">
      <div className="acct-settings-section">
        <h3>Display name</h3>
        <div className="acct-settings-row">
          <input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)} placeholder="Your name"/>
          <button className="acct-btn primary" onClick={saveName}
            disabled={savingName || !displayName.trim() || displayName.trim() === (user.displayName || "")}>
            {nameSaved ? "✓ Saved!" : savingName ? "Saving…" : "Save"}
          </button>
        </div>
      </div>

      <div className="acct-settings-section">
        <h3>Email</h3>
        <div className="acct-settings-row">
          <input type="email" value={user.email || ""} disabled/>
          <span className="acct-provider-badge">
            {user.providerData?.[0]?.providerId === "google.com" ? "Google account" : "Email account"}
          </span>
        </div>
      </div>

      {isEmailUser && (
        <div className="acct-settings-section">
          <h3>Change password</h3>
          {pwError && <div className="acct-error">{pwError}</div>}
          {pwSaved && <div className="acct-success">Password updated successfully!</div>}
          <div style={{display:"flex",flexDirection:"column",gap:10,maxWidth:400}}>
            <input type="password" placeholder="Current password" value={oldPw} onChange={e => setOldPw(e.target.value)}/>
            <input type="password" placeholder="New password (min 6 characters)" value={newPw} onChange={e => setNewPw(e.target.value)}/>
            <button className="acct-btn primary" onClick={savePassword}
              disabled={savingPw || !oldPw || newPw.length < 6} style={{alignSelf:"flex-start"}}>
              {savingPw ? "Updating…" : "Update password"}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Subscription Tab ─────────────────────────────────
function SubscriptionTab() {
  const plans = [
    { id:"starter", name:"Starter", price:"$6.99", desc:"15 stories / month · No ads", featured:true },
    { id:"family",  name:"Family",  price:"$14.99", desc:"50 stories / month · 2 children" },
    { id:"pro",     name:"Pro",     price:"$24.99", desc:"Unlimited stories · 4 children" },
  ];
  return (
    <div className="acct-subscription">
      <div className="acct-plan-status">
        <div>
          <div className="acct-plan-label">Current plan</div>
          <div className="acct-plan-name">Free</div>
          <div className="acct-plan-credits">3 welcome credits remaining</div>
        </div>
        <div className="acct-credit-ring">
          <svg viewBox="0 0 36 36" width="80" height="80">
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--cream-edge)" strokeWidth="3"/>
            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--coral)" strokeWidth="3"
              strokeDasharray="100" strokeDashoffset="85" strokeLinecap="round" transform="rotate(-90 18 18)"/>
          </svg>
          <div className="acct-credit-ring-label">3/3</div>
        </div>
      </div>
      <h3 style={{fontSize:15,fontWeight:800,color:"var(--ink)",marginBottom:14}}>Upgrade your plan</h3>
      <div className="acct-plan-grid">
        {plans.map(p => (
          <div key={p.id} className={`acct-plan-card${p.featured?" featured":""}`}>
            {p.featured && <div className="acct-plan-badge">Popular</div>}
            <div className="acct-plan-price">{p.price}<span>/mo</span></div>
            <div className="acct-plan-title">{p.name}</div>
            <div className="acct-plan-desc">{p.desc}</div>
            <button className={`acct-btn${p.featured?" primary":""}`}>Get {p.name}</button>
          </div>
        ))}
      </div>
      <p style={{fontSize:12,color:"var(--ink-mute)",marginTop:18,textAlign:"center"}}>
        Cancel anytime · Billed monthly · Secure via Stripe
      </p>
    </div>
  );
}

// ─── Profile Page ─────────────────────────────────────
function ProfilePage({ user }) {
  const [tab, setTab] = useState("stories");

  async function handleSignOut() {
    await window.__signOut();
    localStorage.removeItem("talio_user");
    window.location.href = "/";
  }

  const ini = getInitials(user);
  const hue = avatarHue(user.uid);
  const avatarBg = `linear-gradient(135deg, hsl(${hue},60%,60%), hsl(${(hue+70)%360},65%,42%))`;

  return (
    <div className="acct-profile-page">
      <nav className="acct-nav">
        <a href="/" className="talio-mark"><img src="img/talio_logo.png" alt="Talio"/></a>
        <div style={{flex:1}}/>
        <a href="/" className="acct-nav-link">← Home</a>
        <button className="acct-nav-btn" onClick={handleSignOut}>Sign out</button>
      </nav>

      <div className="acct-profile-hero">
        <div className="acct-profile-hero-inner">
          <div className="acct-avatar-lg" style={{background: avatarBg}}>{ini}</div>
          <div className="acct-profile-info">
            <div className="acct-profile-name">{user.displayName || user.email?.split("@")[0] || "Your account"}</div>
            <div className="acct-profile-email">{user.email}</div>
            <div className="acct-profile-plan">
              <span className="acct-plan-pill">Free plan</span>
            </div>
          </div>
        </div>
      </div>

      <div className="acct-tabs-bar">
        <div className="acct-tabs-inner">
          {[{id:"stories",label:"My Stories"},{id:"settings",label:"Settings"},{id:"subscription",label:"Subscription"}].map(t => (
            <button key={t.id} className={`acct-tab${tab===t.id?" active":""}`} onClick={() => setTab(t.id)}>
              {t.label}
            </button>
          ))}
        </div>
      </div>

      <div className="acct-content">
        {tab === "stories"      && <StoriesTab user={user}/>}
        {tab === "settings"     && <SettingsTab user={user}/>}
        {tab === "subscription" && <SubscriptionTab/>}
      </div>
    </div>
  );
}

// ─── Root ─────────────────────────────────────────────
const AccountApp = () => {
  const [authReady, setAuthReady] = useState(false);
  const [user, setUser] = useState(null);

  useEffect(() => {
    if (!window.__onAuthChanged) { setAuthReady(true); return; }
    return window.__onAuthChanged(u => {
      setAuthReady(true);
      if (u && !u.isAnonymous) {
        setUser(u);
        localStorage.setItem("talio_user", JSON.stringify({
          uid: u.uid, displayName: u.displayName, email: u.email, photoURL: u.photoURL,
        }));
      } else {
        setUser(null);
        localStorage.removeItem("talio_user");
      }
    });
  }, []);

  if (!authReady) return <PageLoading/>;
  if (!user)      return <AuthPage/>;
  return <ProfilePage user={user}/>;
};

window.AccountApp = AccountApp;