const { useState, useEffect } = React;

// ── Login screen ───────────────────────────────────────────────────────────────

const LoginPage = ({ onLogin }) => {
  const sb = window.supabaseClient;
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    try {
      const { data: authData, error: authError } = await sb.auth.signInWithPassword({ email, password });
      if (authError) throw authError;

      const { data: adminData, error: adminError } = await sb
        .from("admin_users")
        .select("role")
        .eq("id", authData.user.id)
        .single();

      if (adminError || !adminData) {
        await sb.auth.signOut();
        throw new Error("Access denied. No admin privileges.");
      }

      onLogin(authData.user);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      minHeight:"100vh", display:"flex", alignItems:"center", justifyContent:"center",
      background:"var(--paper)", padding:16
    }}>
      <div style={{width:"100%", maxWidth:360}}>
        <div style={{display:"flex", flexDirection:"column", alignItems:"center", marginBottom:32}}>
          <div style={{
            width:36, height:36, background:"var(--ink)", borderRadius:10,
            display:"grid", placeItems:"center", marginBottom:16
          }}>
            <span style={{color:"var(--paper)", fontWeight:700, fontSize:16, lineHeight:1}}>P</span>
          </div>
          <div style={{fontSize:17, fontWeight:600, color:"var(--ink)"}}>Sign in</div>
          <div style={{fontSize:13, color:"var(--ink-3)", marginTop:4}}>Pipal admin dashboard</div>
        </div>

        <div className="panel" style={{padding:24}}>
          <form onSubmit={handleSubmit} style={{display:"flex", flexDirection:"column", gap:16}}>
            <div style={{display:"flex", flexDirection:"column", gap:6}}>
              <label style={{fontSize:11, fontWeight:500, color:"var(--ink-2)", textTransform:"uppercase", letterSpacing:"0.06em", fontFamily:"var(--font-mono)"}}>Email</label>
              <input
                type="email" required autoFocus
                placeholder="admin@pipal.life"
                value={email}
                onChange={e => setEmail(e.target.value)}
                style={{
                  padding:"8px 12px", fontSize:13, borderRadius:6,
                  border:"1px solid var(--hairline)", background:"var(--surface-2)",
                  color:"var(--ink)", outline:"none", fontFamily:"var(--font-sans)"
                }}
              />
            </div>
            <div style={{display:"flex", flexDirection:"column", gap:6}}>
              <label style={{fontSize:11, fontWeight:500, color:"var(--ink-2)", textTransform:"uppercase", letterSpacing:"0.06em", fontFamily:"var(--font-mono)"}}>Password</label>
              <input
                type="password" required
                placeholder="••••••••"
                value={password}
                onChange={e => setPassword(e.target.value)}
                style={{
                  padding:"8px 12px", fontSize:13, borderRadius:6,
                  border:"1px solid var(--hairline)", background:"var(--surface-2)",
                  color:"var(--ink)", outline:"none", fontFamily:"var(--font-sans)"
                }}
              />
            </div>
            {error && (
              <div style={{
                padding:"10px 12px", borderRadius:6, fontSize:12,
                background:"var(--neg-soft)", color:"var(--neg)", border:"1px solid var(--neg-soft)"
              }}>{error}</div>
            )}
            <button
              type="submit" disabled={loading}
              style={{
                padding:"10px", borderRadius:6, fontSize:13, fontWeight:500,
                background:"var(--accent)", color:"#fff", border:"none",
                cursor: loading ? "not-allowed" : "pointer", opacity: loading ? 0.7 : 1,
                fontFamily:"var(--font-sans)"
              }}
            >{loading ? "Signing in…" : "Continue"}</button>
          </form>
        </div>
      </div>
    </div>
  );
};

// ── App shell ──────────────────────────────────────────────────────────────────

const PAGES = [
  { id: "overview",      label: "Overview",      crumb: ["Operations","Overview"] },
  { id: "dispatch",      label: "Delivery",      crumb: ["Operations","Delivery"] },
  { id: "orders",        label: "Orders",        crumb: ["Operations","Orders"] },
  { id: "stores",        label: "Stores",        crumb: ["Catalog","Stores"] },
  { id: "products",      label: "Products",      crumb: ["Catalog","Products"] },
  { id: "discovery",     label: "Discovery",     crumb: ["Catalog","Discovery"] },
  { id: "categories",    label: "Categories",    crumb: ["Catalog","Categories"] },
  { id: "promotions",    label: "Promotions",    crumb: ["Catalog","Promotions"] },
  { id: "notifications", label: "Notifications", crumb: ["People","Notifications"] },
  { id: "users",         label: "Users",         crumb: ["People","Users"] },
  { id: "drivers",       label: "Drivers",       crumb: ["People","Drivers"] },
  { id: "verifications", label: "Verifications", crumb: ["People","Verifications"] },
  { id: "finance",       label: "Finance",       crumb: ["Money","Finance"] },
  { id: "analytics",     label: "Analytics",     crumb: ["Money","Analytics"] },
  { id: "logs",          label: "Logs",          crumb: ["Money","Logs"] },
  { id: "config",        label: "Config",        crumb: ["Money","Config"] },
  { id: "emails",        label: "Emails",        crumb: ["People","Emails"] },
];

const App = () => {
  const I = window.Icons;
  const sb = window.supabaseClient;
  const [page, setPage] = useState("overview");
  const [user, setUser] = useState(null);
  const [initializing, setInitializing] = useState(true);

  // Check existing session on mount
  useEffect(() => {
    if (!sb) { setInitializing(false); return; }
    sb.auth.getSession().then(({ data: { session } }) => {
      if (session?.user) {
        sb.from("admin_users").select("role").eq("id", session.user.id).single()
          .then(({ data }) => {
            if (data) setUser(session.user);
            else sb.auth.signOut();
            setInitializing(false);
          });
      } else {
        setInitializing(false);
      }
    });
  }, []);

  const handleLogout = async () => {
    await sb.auth.signOut();
    setUser(null);
  };

  if (initializing) {
    return (
      <div style={{height:"100vh", display:"flex", alignItems:"center", justifyContent:"center", background:"var(--paper)", color:"var(--ink-3)", fontSize:13}}>
        Loading…
      </div>
    );
  }

  if (!user) return <LoginPage onLogin={setUser}/>;

  const pageMeta = PAGES.find(p => p.id === page) || PAGES[0];

  let Body;
  switch (page) {
    case "overview":   Body = <window.OverviewPage/>; break;
    case "dispatch":   Body = <window.DeliveryPage/>; break;
    case "orders":     Body = <window.OrdersPage/>; break;
    case "stores":     Body = <window.StoresPage/>; break;
    case "products":   Body = <window.ProductsPage/>; break;
    case "promotions": Body = <window.PromotionsPage/>; break;
    case "analytics":  Body = <window.AnalyticsPage/>; break;
    case "categories":     Body = <window.CategoriesPage/>; break;
    case "verifications":  Body = <window.VerificationsPage/>; break;
    case "notifications":  Body = <window.NotificationsPage/>; break;
    case "logs":           Body = <window.LogsPage/>; break;
    case "config":         Body = <window.ConfigPage/>; break;
    case "emails":         Body = <window.EmailsPage/>; break;
    case "referrals":      Body = <window.ReferralsPage/>; break;
    case "users":          Body = <window.UsersPage/>; break;
    default:               Body = <window.PlaceholderPage id={pageMeta.id} label={pageMeta.label}/>;
  }

  return (
    <div className="app">
      <window.Sidebar current={page} onChange={setPage} user={user} onLogout={handleLogout}/>
      <div className="main">
        <div className="topbar">
          <div className="crumbs">
            <span>{pageMeta.crumb[0]}</span>
            <span className="sep">/</span>
            <span className="here">{pageMeta.crumb[1]}</span>
          </div>
          <div className="topbar-spacer"/>
          <div className="topbar-tools">
            <div className="cmd">
              <I.search size={12}/>
              <span>Search orders, users, stores…</span>
              <span className="key">⌘K</span>
            </div>
            <div className="icon-btn" title="Notifications"><I.bell size={14}/></div>
            <div className="icon-btn" title="Help"><I.message size={14}/></div>
          </div>
        </div>

        <div className="scroll">{Body}</div>
      </div>
    </div>
  );
};

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