// ========================================================
//  Main App
// ========================================================

function App(){
  const [market, setMarket]       = useState("SE");
  const [view, setView]           = useState("oversikt");
  const [periodSpec, setPeriodSpec] = useState({ kind:"this-month" });
  const period = useMemo(() => resolvePeriod(periodSpec), [periodSpec]);
  const [currentUser, setCurrentUser] = useState(() => {
    try { return localStorage.getItem("easytull:currentUser") || ANVANDARE[0].email; }
    catch(_){ return ANVANDARE[0].email; }
  });
  useEffect(() => { try { localStorage.setItem("easytull:currentUser", currentUser); } catch(_){ } }, [currentUser]);

  // editable state
  const [leadsState, setLeadsState]   = useState({});  // overrides on top of LEADS_DB
  const [budgetState, setBudgetState] = useState({});
  const [kostnaderState, setKostnaderState] = useState({});
  const [intakterState, setIntakterState]   = useState({});
  const [mal, setMal]                 = useState(MAL);
  const [valuta, setValuta]           = useState({ SE: "SEK", NO: "NOK" });
  const [users, setUsers]             = useState(ANVANDARE);
  const settingsReady = useRef(false);
  const [authRequired, setAuthRequired] = useState(false);
  const [accessDeniedEmail, setAccessDeniedEmail] = useState(null);

  useEffect(() => {
    let cancelled = false;
    if(!window.EASYTULL_BACKEND) return;
    window.EASYTULL_BACKEND.loadAll()
      .then(payload => {
        if(cancelled || !payload.configured) return;
        if(payload.authRequired){ setAuthRequired(true); return; }
        const email = window.EASYTULL_BACKEND.getUserEmail?.();
        const hydrated = hydrateFromSupabase(payload);
        const hydratedUsers = hydrated.users || ANVANDARE;
        setUsers(hydratedUsers);
        if(email && hydratedUsers.some(u => u.email === email)) setCurrentUser(email);
        else if(email) setAccessDeniedEmail(email);
        else setCurrentUser(ANVANDARE[0].email);
        setLeadsState(hydrated.leadsState);
        setBudgetState(hydrated.budgetState);
        setKostnaderState(hydrated.kostnaderState);
        setIntakterState(hydrated.intakterState);
        if(hydrated.mal) setMal(hydrated.mal);
        if(hydrated.valuta) setValuta(hydrated.valuta);
        settingsReady.current = true;
      })
      .catch(err => console.warn("Supabase-data kunde inte laddas.", err));
    return () => { cancelled = true; };
  }, []);

  useEffect(() => {
    if(!settingsReady.current || !window.EASYTULL_BACKEND) return;
    window.EASYTULL_BACKEND.persistSettings({ mal, valuta, users })
      .catch(err => console.warn("Inställningar kunde inte sparas i Supabase.", err));
  }, [mal, valuta, users]);

  // Role-gating: redirect non-admins away from admin-only views
  const me = users.find(u => u.email === currentUser);
  const isAdmin = me && me.rolltyp === "Admin";
  useEffect(() => {
    if((view === "ekonomi" || view === "installningar") && !isAdmin) setView("oversikt");
  }, [view, isAdmin]);

  let viewEl = null;
  if(view === "oversikt")        viewEl = <OversiktView market={market} period={period}/>;
  else if(view === "leads")      viewEl = <LeadsView market={market} period={period} leadsState={leadsState} setLeadsState={setLeadsState} currentUser={currentUser} isAdmin={isAdmin}/>;
  else if(view === "budget")     viewEl = <BudgetView market={market} period={period} budgetState={budgetState} setBudgetState={setBudgetState}/>;
  else if(view === "analys")     viewEl = <AnalysView market={market} period={period}/>;
  else if(view === "installningar" && isAdmin) viewEl = <InstallningarView market={market} period={period} mal={mal} setMal={setMal} valuta={valuta} setValuta={setValuta} users={users} setUsers={setUsers}/>;
  else if(view === "ekonomi" && isAdmin) viewEl = <PrivatEkonomiView market={market} period={period} kostnaderState={kostnaderState} setKostnaderState={setKostnaderState} intakterState={intakterState} setIntakterState={setIntakterState}/>;

  if(authRequired) return <LoginScreen/>;
  if(accessDeniedEmail) return <AccessDeniedScreen email={accessDeniedEmail}/>;

  return (
    <div className="flex min-h-screen bg-paper-100">
      <Sidebar
        view={view}
        setView={setView}
        market={market}
        setMarket={setMarket}
        periodSpec={periodSpec}
        setPeriodSpec={setPeriodSpec}
        period={period}
        currentUser={currentUser}
        users={users}
      />
      <main className="flex-1 min-w-0 px-8 py-8">
        {viewEl}
      </main>
    </div>
  );
}

function AccessDeniedScreen({ email }){
  async function logout(){
    try { await window.EASYTULL_BACKEND?.signOut(); }
    finally { window.location.reload(); }
  }
  return (
    <div className="min-h-screen bg-paper-100 flex items-center justify-center p-6">
      <div className="w-full max-w-[420px] bg-white border border-paper-200 rounded-xl p-6 shadow-sm">
        <div className="display text-[24px] text-ink-900">Ingen åtkomst</div>
        <p className="text-sm text-ink-600 mt-2 leading-relaxed">
          {email} finns inte i dashboardens användarlista. Be admin bjuda in adressen.
        </p>
        <button onClick={logout} className="mt-5 w-full bg-ink-900 text-paper-50 rounded-lg px-4 py-2.5 text-sm">
          Logga ut
        </button>
      </div>
    </div>
  );
}

function LoginScreen(){
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [busy, setBusy] = useState(false);

  async function login(e){
    e.preventDefault();
    setBusy(true);
    setError("");
    try {
      await window.EASYTULL_BACKEND.signIn(email, password);
      window.location.reload();
    } catch(err) {
      setError(err.message || "Inloggningen misslyckades.");
      setBusy(false);
    }
  }

  return (
    <div className="min-h-screen bg-paper-100 flex items-center justify-center p-6">
      <form onSubmit={login} className="w-full max-w-[380px] bg-white border border-paper-200 rounded-xl p-6 shadow-sm">
        <div className="flex items-center gap-2.5 mb-6">
          <div className="w-8 h-8 rounded-lg bg-accent flex items-center justify-center display text-paper-50 text-[18px] leading-none">e</div>
          <div>
            <div className="display text-[21px] text-ink-900 leading-none">Easytull</div>
            <div className="text-[10.5px] text-ink-500 tracking-wider uppercase mt-1">Marknadsdashboard</div>
          </div>
        </div>
        <div className="space-y-3">
          <label className="block">
            <span className="eyebrow text-ink-500 block mb-1.5">E-post</span>
            <input type="email" value={email} onChange={e=>setEmail(e.target.value)} className="w-full bg-paper-50 border border-paper-200 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-ink-700" required/>
          </label>
          <label className="block">
            <span className="eyebrow text-ink-500 block mb-1.5">Lösenord</span>
            <input type="password" value={password} onChange={e=>setPassword(e.target.value)} className="w-full bg-paper-50 border border-paper-200 rounded-lg px-3 py-2.5 text-sm outline-none focus:border-ink-700" required/>
          </label>
        </div>
        {error && <div className="mt-4 text-[13px] text-rose-700 bg-rose-50 border border-rose-100 rounded-lg px-3 py-2">{error}</div>}
        <button type="submit" disabled={busy} className="mt-5 w-full bg-ink-900 text-paper-50 rounded-lg px-4 py-2.5 text-sm disabled:opacity-60">
          {busy ? "Loggar in..." : "Logga in"}
        </button>
      </form>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);