/* auth-mode.jsx — wires Dashboard to backend API + plan-based gating */
const { useState, useEffect, useMemo, useCallback, useRef } = React;

const PLAN_LIMITS = {
  demo:     { max: 1,        label: "Demo",     color: "#64748b" },
  free:     { max: 1,        label: "FREE",     color: "#64748b" },
  starter:  { max: 5,        label: "STARTER",  color: "#0ea5e9" },
  pro:      { max: 9999,     label: "PRO",      color: "#16a34a" },
  business: { max: 99999,    label: "BUSINESS", color: "#7c3aed" },
};

function tierToPlan(tier) {
  if (!tier) return "free";
  return String(tier).toLowerCase();
}

const DEMO_PROPERTY = {
  id: "demo-1",
  name: "Ukázkový byt — Vinohrady",
  rent: 22000,
  costs: { mortgage: 12500, fund: 2800, insurance: 350, propertyTax: 200, management: 1500, reserve: 1100, other: 0 },
};

function PaywallModal({ open, onClose, reason, plan }) {
  const [busyTier, setBusyTier] = useState(null);
  if (!open) return null;
  const limit = PLAN_LIMITS[plan];
  const isLoggedIn = plan !== "demo";

  async function startCheckout(tier) {
    if (!isLoggedIn) {
      window.location.href = window.API.loginUrl();
      return;
    }
    setBusyTier(tier);
    try {
      const url = await window.API.checkout(tier);
      window.location.href = url;
    } catch (e) {
      alert("Nepodařilo se spustit platbu: " + e.message);
      setBusyTier(null);
    }
  }

  return (
    <div className="paywall-overlay" onClick={onClose}>
      <div className="paywall-modal" onClick={(e) => e.stopPropagation()}>
        <button className="paywall-close" onClick={onClose} aria-label="Zavřít" type="button">×</button>
        <div className="paywall-icon">✨</div>
        <h2 className="paywall-title">{reason.title}</h2>
        <p className="paywall-desc">{reason.desc}</p>
        <div className="paywall-current">
          Aktuální plán: <strong style={{ color: limit.color }}>{limit.label}</strong>
        </div>
        <div className="paywall-tiers">
          <button className="paywall-tier" type="button" onClick={() => startCheckout("STARTER")} disabled={!!busyTier}>
            <div className="paywall-tier-name">STARTER</div>
            <div className="paywall-tier-price"><b>199 Kč</b><span>/ měsíc</span></div>
            <div className="paywall-tier-desc">5 nemovitostí • export PDF • historie</div>
            {busyTier === "STARTER" && <div className="paywall-tier-loading">Připravuji platbu…</div>}
          </button>
          <button className="paywall-tier paywall-tier-featured" type="button" onClick={() => startCheckout("PRO")} disabled={!!busyTier}>
            <div className="paywall-tier-badge">Doporučujeme</div>
            <div className="paywall-tier-name">PRO</div>
            <div className="paywall-tier-price"><b>499 Kč</b><span>/ měsíc</span></div>
            <div className="paywall-tier-desc">Bez limitu • scénáře • vše odemknuté</div>
            {busyTier === "PRO" && <div className="paywall-tier-loading">Připravuji platbu…</div>}
          </button>
          <button className="paywall-tier" type="button" onClick={() => startCheckout("BUSINESS")} disabled={!!busyTier}>
            <div className="paywall-tier-name">BUSINESS</div>
            <div className="paywall-tier-price"><b>999 Kč</b><span>/ měsíc</span></div>
            <div className="paywall-tier-desc">Pro firmy • týmové funkce • prio. podpora</div>
            {busyTier === "BUSINESS" && <div className="paywall-tier-loading">Připravuji platbu…</div>}
          </button>
        </div>
        <button className="paywall-skip" onClick={onClose} type="button">Zatím ne</button>
      </div>
      <style>{`
        .paywall-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.55); backdrop-filter: blur(4px); z-index: 9999; display: grid; place-items: center; padding: 1rem; animation: fadein 200ms ease-out; overflow: auto; }
        .paywall-modal { background: white; border-radius: 16px; padding: 2.5rem; max-width: 720px; width: 100%; box-shadow: 0 20px 60px rgba(15,23,42,0.25); position: relative; text-align: center; animation: pop 220ms cubic-bezier(.34,1.56,.64,1); }
        .paywall-close { position: absolute; top: 1rem; right: 1rem; background: transparent; border: 0; font-size: 1.5rem; color: #64748b; cursor: pointer; padding: 0.25rem 0.5rem; line-height: 1; }
        .paywall-icon { font-size: 3rem; margin-bottom: 0.5rem; }
        .paywall-title { font-family: var(--font-head, system-ui); font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
        .paywall-desc { color: #475569; margin: 0 0 1.25rem; line-height: 1.55; }
        .paywall-current { font-size: 0.875rem; color: #64748b; margin-bottom: 1.5rem; padding: 0.5rem 1rem; background: #f8fafc; border-radius: 8px; display: inline-block; }
        .paywall-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
        @media (max-width: 640px) { .paywall-tiers { grid-template-columns: 1fr; } }
        .paywall-tier { position: relative; background: white; border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1rem; cursor: pointer; transition: all 150ms; font-family: inherit; text-align: center; }
        .paywall-tier:hover:not(:disabled) { border-color: #16a34a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(22,163,74,0.12); }
        .paywall-tier:disabled { opacity: 0.6; cursor: wait; }
        .paywall-tier-featured { border-color: #16a34a; background: linear-gradient(180deg, #f0fdf4 0%, white 50%); }
        .paywall-tier-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #16a34a; color: white; font-size: 0.6875rem; font-weight: 700; padding: 0.25rem 0.625rem; border-radius: 999px; letter-spacing: 0.05em; text-transform: uppercase; }
        .paywall-tier-name { font-size: 0.75rem; font-weight: 700; color: #64748b; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
        .paywall-tier-price b { font-size: 1.5rem; font-weight: 700; color: #0f172a; }
        .paywall-tier-price span { font-size: 0.8125rem; color: #64748b; margin-left: 0.25rem; }
        .paywall-tier-desc { font-size: 0.8125rem; color: #475569; margin-top: 0.625rem; line-height: 1.4; }
        .paywall-tier-loading { font-size: 0.75rem; color: #16a34a; margin-top: 0.5rem; font-weight: 600; }
        .paywall-skip { background: transparent; border: 0; color: #64748b; font-size: 0.875rem; cursor: pointer; padding: 0.5rem 1rem; font-family: inherit; }
        .paywall-skip:hover { color: #0f172a; text-decoration: underline; }
        @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
        @keyframes pop { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
      `}</style>
    </div>
  );
}

function AccountMenu({ user, plan, onPortal }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener("click", handler);
    return () => document.removeEventListener("click", handler);
  }, []);

  const initials = useMemo(() => {
    if (!user) return "??";
    const name = user.name || user.email || "";
    const parts = name.split(/[\s@.]+/).filter(Boolean);
    return (parts[0]?.[0] || "?").toUpperCase() + (parts[1]?.[0] || "").toUpperCase();
  }, [user]);

  if (!user) {
    return <a className="login-cta" href={window.API.loginUrl()}>Přihlásit</a>;
  }

  const limit = PLAN_LIMITS[plan];

  return (
    <div className="account-menu" ref={ref}>
      <button className="avatar" onClick={() => setOpen(o => !o)} aria-label="Účet" type="button">
        {user.image ? <img src={user.image} alt="" /> : initials}
      </button>
      {open && (
        <div className="account-dropdown">
          <div className="account-info">
            <div className="account-name">{user.name || "Uživatel"}</div>
            <div className="account-email">{user.email}</div>
            <div className="account-plan" style={{ color: limit.color }}>● {limit.label}</div>
          </div>
          <div className="account-divider" />
          {(plan === "starter" || plan === "pro" || plan === "business") && (
            <button className="account-item" onClick={onPortal} type="button">Spravovat předplatné</button>
          )}
          {plan === "free" && (
            <a className="account-item" href="https://spocitaito.cz/index.html#pricing">Vyberte plán →</a>
          )}
          <a className="account-item" href={window.API.logoutUrl("https://spocitaito.cz/")}>Odhlásit se</a>
        </div>
      )}
      <style>{`
        .login-cta { padding: 0.5rem 1rem; background: #16a34a; color: white; border-radius: 8px; font-weight: 600; font-size: 0.875rem; text-decoration: none; }
        .login-cta:hover { background: #15803d; }
        .account-menu { position: relative; }
        .account-menu .avatar { cursor: pointer; overflow: hidden; padding: 0; border: 0; }
        .account-menu .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
        .account-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,0.08); padding: 0.5rem; z-index: 100; }
        .account-info { padding: 0.75rem; }
        .account-name { font-weight: 600; font-size: 0.875rem; color: #0f172a; }
        .account-email { font-size: 0.8125rem; color: #64748b; margin-top: 0.125rem; }
        .account-plan { font-size: 0.75rem; font-weight: 600; margin-top: 0.5rem; letter-spacing: 0.05em; }
        .account-divider { height: 1px; background: #f1f5f9; margin: 0.25rem 0; }
        .account-item { display: block; width: 100%; text-align: left; padding: 0.625rem 0.75rem; background: transparent; border: 0; border-radius: 8px; font-family: inherit; font-size: 0.875rem; color: #334155; cursor: pointer; text-decoration: none; }
        .account-item:hover { background: #f8fafc; }
      `}</style>
    </div>
  );
}

function LoadingScreen() {
  return (
    <div style={{ display: "grid", placeItems: "center", minHeight: "60vh", color: "#64748b" }}>
      <div style={{ textAlign: "center" }}>
        <div style={{ width: 40, height: 40, margin: "0 auto 1rem", border: "3px solid #e2e8f0", borderTopColor: "#16a34a", borderRadius: "50%", animation: "spin 0.8s linear infinite" }} />
        <p>Načítám…</p>
      </div>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

function AuthApp() {
  const [authState, setAuthState] = useState({ loading: true, user: null, plan: "demo" });
  const [properties, setProperties] = useState([]);
  const [paywall, setPaywall] = useState(null);
  const [syncing, setSyncing] = useState(false);
  const saveTimers = useRef({});

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (params.get("upgraded") === "1") {
      window.history.replaceState({}, "", window.location.pathname + window.location.hash);
    }

    (async () => {
      try {
        const me = await window.API.me();
        if (me.authenticated) {
          const plan = tierToPlan(me.user?.tier);
          let props = [];
          try {
            props = await window.API.listProperties();
          } catch (e) {
            console.error("Failed to load properties:", e);
          }
          if (props.length === 0) {
            try {
              const created = await window.API.createProperty({
                name: "Ukázkový byt — Vinohrady",
                rent: 22000,
                costs: { mortgage: 12500, fund: 2800, insurance: 350, propertyTax: 200, management: 1500, reserve: 1100, other: 0 },
              });
              props = [created];
            } catch (e) { console.error("Seed failed:", e); }
          }
          setAuthState({ loading: false, user: me.user, plan });
          setProperties(props);
        } else {
          setAuthState({ loading: false, user: null, plan: "demo" });
          setProperties([{ ...DEMO_PROPERTY }]);
        }
      } catch (e) {
        console.error("Bootstrap failed:", e);
        setAuthState({ loading: false, user: null, plan: "demo" });
        setProperties([{ ...DEMO_PROPERTY }]);
      }
    })();
  }, []);

  const scheduleSave = useCallback((id, patch) => {
    if (authState.plan === "demo") return;
    if (saveTimers.current[id]) clearTimeout(saveTimers.current[id]);
    saveTimers.current[id] = setTimeout(async () => {
      setSyncing(true);
      try { await window.API.updateProperty(id, patch); }
      catch (e) { console.error("Save failed:", e); }
      finally { setSyncing(false); }
    }, 800);
  }, [authState.plan]);

  const addProperty = useCallback(async () => {
    const limit = PLAN_LIMITS[authState.plan];
    if (properties.length >= limit.max) {
      if (authState.plan === "demo") {
        setPaywall({ title: "Přihlaste se pro více nemovitostí", desc: "V demo režimu lze upravit jen jednu ukázkovou nemovitost. Přihlášením dostanete vlastní portfolio." });
      } else if (authState.plan === "free") {
        setPaywall({ title: "Přidejte další nemovitosti v placeném tarifu", desc: "Vaše demo zahrnuje 1 nemovitost. V tarifu STARTER (199 Kč/měs) sledujete až 5 nemovitostí, v PRO (499 Kč/měs) jich máte bez limitu." });
      } else {
        setPaywall({ title: `Limit plánu ${limit.label} dosažen`, desc: `Plán ${limit.label} umožňuje sledovat ${limit.max} nemovitostí. Vyšší plán odemkne víc.` });
      }
      return;
    }
    if (authState.plan === "demo") {
      setProperties(prev => [...prev, {
        id: `local-${Date.now()}`,
        name: `Nová nemovitost ${prev.length + 1}`,
        rent: 18000,
        costs: { mortgage: 10000, fund: 2200, insurance: 300, propertyTax: 180, management: 1200, reserve: 900, other: 0 },
      }]);
      return;
    }
    try {
      const created = await window.API.createProperty({
        name: `Nová nemovitost ${properties.length + 1}`,
        rent: 18000,
        costs: { mortgage: 10000, fund: 2200, insurance: 300, propertyTax: 180, management: 1200, reserve: 900, other: 0 },
      });
      setProperties(prev => [...prev, created]);
    } catch (e) {
      if (e.code === "limit_reached") setPaywall({ title: "Limit dosažen", desc: e.message || "Vyberte si vyšší plán." });
      else alert("Nepodařilo se přidat nemovitost: " + e.message);
    }
  }, [authState.plan, properties.length]);

  const updateProperty = useCallback((p) => {
    setProperties(prev => prev.map(x => x.id === p.id ? p : x));
    scheduleSave(p.id, { name: p.name, rent: p.rent, costs: p.costs });
  }, [scheduleSave]);

  const removeProperty = useCallback(async (id) => {
    setProperties(prev => prev.filter(p => p.id !== id));
    if (authState.plan !== "demo" && !String(id).startsWith("local-")) {
      try { await window.API.deleteProperty(id); } catch (e) { console.error("Delete failed:", e); }
    }
  }, [authState.plan]);

  const handlePortal = useCallback(async () => {
    try {
      const url = await window.API.portal();
      window.location.href = url;
    } catch (e) { alert("Nepodařilo se otevřít správu předplatného: " + e.message); }
  }, []);

  const tryAccessFeature = useCallback((feature) => {
    if (authState.plan === "demo") {
      setPaywall({ title: "Pokračujte přihlášením", desc: "Tato funkce je dostupná pouze pro přihlášené uživatele." });
      return false;
    }
    if (authState.plan === "free") {
      const titles = { history: "Historie je v placených tarifech", scenarios: "Scénáře jsou v plánu PRO", export: "Export PDF v plánu STARTER" };
      const descs = {
        history: "Sledujte vývoj výnosů měsíc po měsíci a porovnávejte mezi obdobími. Odemkněte v plánu STARTER.",
        scenarios: "Modelujte růst nájmů, refinancování, prodej a další scénáře v plánu PRO.",
        export: "Vygenerujte profesionální PDF reporty pro vaše účetní v plánu STARTER a vyšším.",
      };
      setPaywall({ title: titles[feature] || "Tato funkce je v placených tarifech", desc: descs[feature] || "Vaše demo zahrnuje 1 nemovitost. Vyberte tarif a odemkněte všechny funkce." });
      return false;
    }
    if (feature === "scenarios" && authState.plan === "starter") {
      setPaywall({ title: "Scénáře jsou v plánu PRO", desc: "Modelujte růst nájmů, refinancování, prodej a další scénáře v plánu PRO." });
      return false;
    }
    return true;
  }, [authState.plan]);

  if (authState.loading) return <LoadingScreen />;

  window.__AUTH = {
    user: authState.user,
    plan: authState.plan,
    planLabel: PLAN_LIMITS[authState.plan].label,
    planColor: PLAN_LIMITS[authState.plan].color,
    syncing,
    onPortal: handlePortal,
    tryAccessFeature,
  };

  return (
    <>
      <window.App
        externalProperties={properties}
        externalSetProperties={setProperties}
        externalAddProperty={addProperty}
        externalUpdateProperty={updateProperty}
        externalRemoveProperty={removeProperty}
        externalAuth={window.__AUTH}
      />
      <PaywallModal
        open={!!paywall}
        onClose={() => setPaywall(null)}
        reason={paywall || { title: "", desc: "" }}
        plan={authState.plan}
      />
    </>
  );
}

window.AuthApp = AuthApp;
window.AccountAvatar = AccountMenu;