/// <reference types="vite/client" />
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route, useNavigate, useParams, Link } from "react-router-dom";
import { createClient, SupabaseClient } from "@supabase/supabase-js";
import { ThemeProvider, LandingPage, ScanProgress, ScoreGauge, FindingsList, EmailGate, Dashboard, PricingTable } from "@scankit/ui";
import { emitAnalyticsEvent } from "@scankit/analytics";
import { openCheckout } from "@scankit/billing";
import { product } from "./product.config.js";
import { copy } from "./copy.js";

// Global style additions for neat layout
const globalStyles = `
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
  }
  .btn-primary {
    background-color: var(--accent-color);
    color: #ffffff;
  }
  .btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }
  .btn-secondary {
    background-color: #1f2937;
    color: #ffffff;
    border: 1px solid #374151;
  }
  .btn-secondary:hover {
    background-color: #374151;
  }
`;

if (typeof document !== "undefined") {
  const styleEl = document.createElement("style");
  styleEl.textContent = globalStyles;
  document.head.appendChild(styleEl);
}

function App() {
  const [config, setConfig] = useState<{
    supabaseUrl: string;
    supabaseAnonKey: string;
    paddleClientToken: string;
    paddleEnv: "sandbox" | "live" | "stub";
  } | null>(null);

  const [supabase, setSupabase] = useState<SupabaseClient | null>(null);
  const [user, setUser] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/config")
      .then((res) => res.json())
      .then((data) => {
        setConfig(data);
        const client = createClient(data.supabaseUrl, data.supabaseAnonKey);
        setSupabase(client);

        client.auth.getSession().then(({ data: { session } }: any) => {
          setUser(session?.user ?? null);
          setLoading(false);
        });

        const { data: { subscription } } = client.auth.onAuthStateChange((_event: any, session: any) => {
          setUser(session?.user ?? null);
        });

        return () => subscription.unsubscribe();
      })
      .catch((err) => {
        console.error("Failed to load environment configuration:", err);
        setLoading(false);
      });
  }, []);

  if (loading || !supabase || !config) {
    return (
      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", color: "#ffffff", backgroundColor: "#0b0c10" }}>
        <div style={{ textAlign: "center" }}>
          <div style={{ border: "4px solid rgba(255,255,255,0.1)", borderTop: "4px solid #3B82F6", borderRadius: "50%", width: "40px", height: "40px", animation: "spin 1s linear infinite", margin: "0 auto 16px" }} />
          <div>Initializing InboxShield...</div>
          <style>{`@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`}</style>
        </div>
      </div>
    );
  }

  return (
    <ThemeProvider config={{ accentColor: product.accentColor }}>
      <Routes>
        <Route path="/" element={<Home copy={copy} />} />
        <Route path="/scan/:id" element={<ScanReport copy={copy} user={user} supabase={supabase} config={config} />} />
        <Route path="/scan/:id/claim" element={<ScanClaim user={user} supabase={supabase} />} />
        <Route path="/dashboard" element={<UserDashboard copy={copy} user={user} supabase={supabase} config={config} />} />
        <Route path="/login" element={<Login supabase={supabase} />} />
        <Route path="/billing" element={<BillingSettings user={user} supabase={supabase} config={config} />} />
        <Route path="/admin" element={<AdminDashboard user={user} supabase={supabase} />} />
      </Routes>
    </ThemeProvider>
  );
}

// ── 1. Page: Home (Landing) ──
function Home({ copy }: { copy: any }) {
  const navigate = useNavigate();
  const [scanning, setScanning] = useState(false);
  const [scanDomain, setScanDomain] = useState("");
  const [scanOnComplete, setScanOnComplete] = useState<any>(null);

  const handleScan = async (domain: string) => {
    setScanDomain(domain);
    setScanning(true);
    emitAnalyticsEvent("scan_started", { domain });

    let scanId: string | null = null;
    let scanPromise = fetch("/api/scan", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ input: domain }),
    }).then(async (res) => {
      const data = await res.json();
      if (res.ok && data.scanId) {
        scanId = data.scanId;
      } else {
        throw new Error(data.message || "Failed to complete scan");
      }
    });

    const onComplete = async () => {
      try {
        await scanPromise;
        if (scanId) {
          emitAnalyticsEvent("scan_completed", { domain, score: 85 });
          navigate(`/scan/${scanId}`);
        }
      } catch (err: any) {
        alert(err.message || "Failed to complete scan");
        setScanning(false);
      }
    };

    setScanOnComplete(() => onComplete);
  };

  if (scanning) {
    return (
      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", backgroundColor: "#0b0c10" }}>
        <div style={{ width: "100%", maxWidth: "600px", padding: "0 24px" }}>
          <ScanProgress steps={copy.progress.steps} durationMs={3000} onComplete={scanOnComplete} />
        </div>
      </div>
    );
  }

  return (
    <LandingPage
      copy={copy}
      onScan={handleScan}
      scanLoading={false}
      onSubscribe={() => navigate("/dashboard")}
    />
  );
}

// ── 2. Page: Scan Report ──
function ScanReport({ copy, user, supabase, config }: { copy: any; user: any; supabase: SupabaseClient; config: any }) {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [scan, setScan] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [submittingEmail, setSubmittingEmail] = useState(false);
  const [emailSent, setEmailSent] = useState(false);

  const fetchReport = async () => {
    try {
      const session = (await supabase.auth.getSession()).data.session;
      const headers: Record<string, string> = {};
      if (session?.access_token) {
        headers["Authorization"] = `Bearer ${session.access_token}`;
      }

      const res = await fetch(`/api/scan/${id}`, { headers });
      if (res.ok) {
        const data = await res.json();
        setScan(data);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchReport();
  }, [id, user]);

  const handleEmailGateSubmit = async (email: string) => {
    setSubmittingEmail(true);
    try {
      await fetch(`/api/scan/${id}/capture-email`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email }),
      });

      emitAnalyticsEvent("lead", { email });

      const claimRedirectUrl = `${window.location.origin}/scan/${id}/claim`;
      const { error } = await supabase.auth.signInWithOtp({
        email,
        options: { emailRedirectTo: claimRedirectUrl },
      });

      if (error) {
        alert(error.message);
      } else {
        setEmailSent(true);
      }
    } catch (err: any) {
      alert("Error occurred submitting email");
    } finally {
      setSubmittingEmail(false);
    }
  };

  if (loading) {
    return <div style={{ color: "#ffffff", padding: "40px", textAlign: "center" }}>Loading report...</div>;
  }

  if (!scan) {
    return <div style={{ color: "#ffffff", padding: "40px", textAlign: "center" }}>Report not found.</div>;
  }

  const result = scan.result;

  return (
    <div style={{ color: "#ffffff", backgroundColor: "#0b0c10", minHeight: "100vh" }}>
      <nav style={{ padding: "20px 0", borderBottom: "1px solid #1f2937" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontWeight: 800, fontSize: "20px" }}>
            Inbox<span style={{ color: "var(--accent-color)" }}>Shield</span>
          </div>
          <div>
            {user ? (
              <button onClick={() => navigate("/dashboard")} className="btn btn-secondary" style={{ padding: "8px 16px" }}>Dashboard</button>
            ) : (
              <button onClick={() => navigate("/login")} className="btn btn-secondary" style={{ padding: "8px 16px" }}>Sign In</button>
            )}
          </div>
        </div>
      </nav>

      <div className="container" style={{ padding: "40px 24px", display: "flex", flexDirection: "column", gap: "32px", alignItems: "center" }}>
        <div style={{ textAlign: "center", maxWidth: "600px" }}>
          <h2 style={{ fontSize: "28px", fontWeight: 800, marginBottom: "8px" }}>
            Scan Report for <span style={{ color: "var(--accent-color)" }}>{scan.input}</span>
          </h2>
          <p style={{ color: "#9ca3af" }}>
            Checked on {new Date().toLocaleDateString()}
          </p>
        </div>

        {result && (
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "32px", width: "100%" }}>
            <ScoreGauge score={result.score} title={result.headline} />

            <div style={{ width: "100%", maxWidth: "800px" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }}>
                <h3 style={{ fontSize: "22px", fontWeight: 700 }}>Remediation Checklist</h3>
                {user && !scan.gated && (
                  <button onClick={() => navigate("/dashboard")} className="btn btn-primary" style={{ padding: "10px 20px" }}>Set Up Daily Monitoring</button>
                )}
              </div>

              {emailSent ? (
                <div style={{ textAlign: "center", padding: "32px", border: "1px solid #1f2937", borderRadius: "12px", background: "#111217", margin: "24px auto", maxWidth: "500px" }} data-testid="check-inbox-message">
                  <h3 style={{ fontSize: "20px", fontWeight: 700, marginBottom: "12px" }}>Check your inbox!</h3>
                  <p style={{ color: "#9ca3af" }}>We sent a magic sign-in link. Click it to unlock your full, technical DNS remediation instructions.</p>
                </div>
              ) : (
                <FindingsList
                  findings={result.findings}
                  isAnonymous={scan.gated}
                  onGateSubmit={handleEmailGateSubmit}
                  gateLoading={submittingEmail}
                  gateTitle={copy.result.gateTitle}
                  gateSub={copy.result.gateSub}
                />
              )}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

// ── 3. Page: Claim Scan ──
function ScanClaim({ user, supabase }: { user: any; supabase: SupabaseClient }) {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();

  useEffect(() => {
    if (!user) return;

    supabase.auth.getSession().then(async ({ data: { session } }: any) => {
      if (!session) return;
      try {
        await fetch(`/api/scan/${id}/claim`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "Authorization": `Bearer ${session.access_token}`,
          },
        });
        
        emitAnalyticsEvent("signup_confirmed");
        navigate("/dashboard");
      } catch (err) {
        console.error(err);
        navigate("/dashboard");
      }
    });
  }, [user, id]);

  return (
    <div style={{ color: "#ffffff", padding: "100px", textAlign: "center", backgroundColor: "#0b0c10", minHeight: "100vh" }}>
      <h2>Unlocking and claiming your scan report...</h2>
      <p style={{ color: "#9ca3af", marginTop: "12px" }}>Please wait while we set up your dashboard account.</p>
    </div>
  );
}

// ── 4. Page: Dashboard ──
function UserDashboard({ copy, user, supabase, config }: { copy: any; user: any; supabase: SupabaseClient; config: any }) {
  const navigate = useNavigate();
  const [monitors, setMonitors] = useState<any[]>([]);
  const [entitlement, setEntitlement] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [addLoading, setAddLoading] = useState(false);
  const [runLoading, setRunLoading] = useState<Record<string, boolean>>({});

  const fetchDashboardData = async () => {
    try {
      const session = (await supabase.auth.getSession()).data.session;
      if (!session) {
        navigate("/login");
        return;
      }
      
      const headers = { "Authorization": `Bearer ${session.access_token}` };
      
      const [monRes, entRes] = await Promise.all([
        fetch("/api/monitors", { headers }),
        fetch("/api/me/entitlement", { headers }),
      ]);

      if (monRes.ok) {
        const monData = await monRes.json();
        const mapped = (monData.monitors || []).map((m: any) => ({
          id: m.id,
          input: m.input,
          last_score: m.last_score,
          last_scan_id: m.last_scan_id,
          next_run_at: m.next_run_at || new Date().toISOString(),
          created_at: m.created_at,
          trend: [100, m.last_score ?? 100],
        }));
        setMonitors(mapped);
      }

      if (entRes.ok) {
        const entData = await entRes.json();
        setEntitlement(entData);
      }
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDashboardData();
  }, [user]);

  const handleAddMonitor = async (domain: string) => {
    setAddLoading(true);
    try {
      const session = (await supabase.auth.getSession()).data.session;
      const res = await fetch("/api/monitors", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Authorization": `Bearer ${session?.access_token}`,
        },
        body: JSON.stringify({ input: domain }),
      });
      const data = await res.json();
      if (res.ok) {
        fetchDashboardData();
      } else if (res.status === 403) {
        alert("Monitor limit reached! Please upgrade your plan.");
      } else {
        alert(data.message || "Failed to add monitor");
      }
    } catch (err) {
      alert("Error adding monitor");
    } finally {
      setAddLoading(false);
    }
  };

  const handleRunMonitor = async (id: string) => {
    setRunLoading(prev => ({ ...prev, [id]: true }));
    try {
      const session = (await supabase.auth.getSession()).data.session;
      const res = await fetch(`/api/monitors/${id}/run`, {
        method: "POST",
        headers: { "Authorization": `Bearer ${session?.access_token}` },
      });
      if (res.ok) {
        fetchDashboardData();
      }
    } catch (err) {
      console.error(err);
    } finally {
      setRunLoading(prev => ({ ...prev, [id]: false }));
    }
  };

  const handleDeleteMonitor = async (id: string) => {
    if (!confirm("Are you sure you want to delete this monitor?")) return;
    try {
      const session = (await supabase.auth.getSession()).data.session;
      const res = await fetch(`/api/monitors/${id}`, {
        method: "DELETE",
        headers: { "Authorization": `Bearer ${session?.access_token}` },
      });
      if (res.ok) {
        fetchDashboardData();
      }
    } catch (err) {
      console.error(err);
    }
  };

  const handleSubscribe = (planKey: string) => {
    if (!user) return;
    const prices: Record<string, string> = {
      starter: config.paddlePriceStarter || "pri_starter",
      pro: config.paddlePricePro || "pri_pro",
      agency: config.paddlePriceAgency || "pri_agency",
    };
    
    const priceId = prices[planKey];
    if (!priceId) return;

    openCheckout({
      priceId,
      email: user.email,
      userId: user.id,
      productSlug: "inboxshield",
      paddleEnv: config.paddleEnv,
    });
  };

  if (loading) {
    return <div style={{ color: "#ffffff", padding: "40px", textAlign: "center" }}>Loading dashboard...</div>;
  }

  const limit = entitlement?.monitorLimit ?? 0;

  return (
    <div style={{ color: "#ffffff", backgroundColor: "#0b0c10", minHeight: "100vh" }}>
      <nav style={{ padding: "20px 0", borderBottom: "1px solid #1f2937" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontWeight: 800, fontSize: "20px" }}>
            Inbox<span style={{ color: "var(--accent-color)" }}>Shield</span> Dashboard
          </div>
          <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
            <Link to="/billing" style={{ color: "#9ca3af", textDecoration: "none" }}>Billing</Link>
            {user?.email === "admin@test.local" && (
              <Link to="/admin" style={{ color: "#9ca3af", textDecoration: "none" }}>Admin</Link>
            )}
            <button onClick={() => supabase.auth.signOut().then(() => navigate("/"))} className="btn btn-secondary" style={{ padding: "6px 12px", fontSize: "14px" }}>Sign Out</button>
          </div>
        </div>
      </nav>

      <div className="container" style={{ padding: "40px 24px" }}>
        <Dashboard
          monitors={monitors}
          alerts={[]}
          limit={limit}
          onAddMonitor={handleAddMonitor}
          onRunMonitor={handleRunMonitor}
          onDeleteMonitor={handleDeleteMonitor}
          addLoading={addLoading}
          runLoading={runLoading}
        />

        {limit === 0 && (
          <div style={{ marginTop: "48px" }}>
            <PricingTable
              tagline={copy.pricing.tagline}
              onSubscribe={handleSubscribe}
              isLoading={false}
            />
          </div>
        )}
      </div>
    </div>
  );
}

// ── 5. Page: Login ──
function Login({ supabase }: { supabase: SupabaseClient }) {
  const [email, setEmail] = useState("");
  const [loading, setLoading] = useState(false);
  const [sent, setSent] = useState(false);

  const handleLogin = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const { error } = await supabase.auth.signInWithOtp({
      email,
      options: { emailRedirectTo: window.location.origin + "/dashboard" },
    });
    setLoading(false);
    if (error) {
      alert(error.message);
    } else {
      setSent(true);
    }
  };

  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh", color: "#ffffff", backgroundColor: "#0b0c10" }}>
      <div style={{ width: "100%", maxWidth: "400px", padding: "32px", border: "1px solid #1f2937", borderRadius: "12px", background: "#111217" }}>
        <h2 style={{ fontSize: "24px", fontWeight: 800, marginBottom: "8px", textAlign: "center" }}>Sign In to InboxShield</h2>
        <p style={{ color: "#9ca3af", textAlign: "center", fontSize: "14px", marginBottom: "24px" }}>Enter your email to sign in via magic link.</p>

        {sent ? (
          <div style={{ textAlign: "center", color: "#10b981" }}>Check your inbox! We've sent a magic login link.</div>
        ) : (
          <form onSubmit={handleLogin} style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
            <input
              type="email"
              placeholder="name@company.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              style={{ padding: "12px", borderRadius: "8px", border: "1px solid #374151", background: "#0b0c10", color: "#ffffff" }}
            />
            <button type="submit" disabled={loading} className="btn btn-primary" style={{ padding: "12px" }}>
              {loading ? "Sending..." : "Send Magic Link"}
            </button>
          </form>
        )}
      </div>
    </div>
  );
}

// ── 6. Page: Billing Settings ──
function BillingSettings({ user, supabase, config }: { user: any; supabase: SupabaseClient; config: any }) {
  const navigate = useNavigate();

  const handleSubscribe = (planKey: string) => {
    if (!user) return;
    const prices: Record<string, string> = {
      starter: config.paddlePriceStarter || "pri_starter",
      pro: config.paddlePricePro || "pri_pro",
      agency: config.paddlePriceAgency || "pri_agency",
    };
    const priceId = prices[planKey];
    if (!priceId) return;

    openCheckout({
      priceId,
      email: user.email,
      userId: user.id,
      productSlug: "inboxshield",
      paddleEnv: config.paddleEnv,
    });
  };

  return (
    <div style={{ color: "#ffffff", backgroundColor: "#0b0c10", minHeight: "100vh" }}>
      <nav style={{ padding: "20px 0", borderBottom: "1px solid #1f2937" }}>
        <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontWeight: 800, fontSize: "20px" }}>InboxShield Billing</div>
          <button onClick={() => navigate("/dashboard")} className="btn btn-secondary" style={{ padding: "8px 16px" }}>Dashboard</button>
        </div>
      </nav>
      <div className="container" style={{ padding: "40px 24px" }}>
        <PricingTable
          tagline="Manage your subscription and monitors count limit."
          onSubscribe={handleSubscribe}
          isLoading={false}
        />
      </div>
    </div>
  );
}

// ── 7. Page: Admin Dashboard ──
function AdminDashboard({ user, supabase }: { user: any; supabase: SupabaseClient }) {
  const navigate = useNavigate();
  const [metrics, setMetrics] = useState<any>(null);
  const [compUserId, setCompUserId] = useState("");
  const [compPlan, setCompPlan] = useState("starter");

  useEffect(() => {
    if (user?.email !== "admin@test.local") {
      navigate("/dashboard");
      return;
    }

    const fetchMetrics = async () => {
      const session = (await supabase.auth.getSession()).data.session;
      const res = await fetch("/api/admin/metrics", {
        headers: { "Authorization": `Bearer ${session?.access_token}` },
      });
      if (res.ok) {
        setMetrics(await res.json());
      }
    };
    fetchMetrics();
  }, [user]);

  const handleGrantComp = async (e: React.FormEvent) => {
    e.preventDefault();
    const session = (await supabase.auth.getSession()).data.session;
    const res = await fetch(`/api/admin/users/${compUserId}/comp`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${session?.access_token}`,
      },
      body: JSON.stringify({ planKey: compPlan, expiresAt: null }),
    });
    if (res.ok) {
      alert("Successfully granted comp subscription!");
    } else {
      alert("Failed to grant comp");
    }
  };

  return (
    <div style={{ color: "#ffffff", backgroundColor: "#0b0c10", minHeight: "100vh", padding: "40px 0" }}>
      <div className="container" style={{ display: "flex", flexDirection: "column", gap: "32px" }}>
        <div style={{ display: "flex", justifyContent: "space-between" }}>
          <h2>Admin Dashboard</h2>
          <button onClick={() => navigate("/dashboard")} className="btn btn-secondary" style={{ padding: "8px 16px" }}>Dashboard</button>
        </div>

        {metrics && (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "20px" }}>
            <div style={{ padding: "20px", border: "1px solid #1f2937", borderRadius: "8px", background: "#111217" }}>
              <div style={{ color: "#9ca3af" }}>Signups</div>
              <div style={{ fontSize: "28px", fontWeight: 800 }}>{metrics.signups}</div>
            </div>
            <div style={{ padding: "20px", border: "1px solid #1f2937", borderRadius: "8px", background: "#111217" }}>
              <div style={{ color: "#9ca3af" }}>Total Scans</div>
              <div style={{ fontSize: "28px", fontWeight: 800 }}>{metrics.scans}</div>
            </div>
            <div style={{ padding: "20px", border: "1px solid #1f2937", borderRadius: "8px", background: "#111217" }}>
              <div style={{ color: "#9ca3af" }}>Subscriptions</div>
              <div style={{ fontSize: "28px", fontWeight: 800 }}>{metrics.subs}</div>
            </div>
          </div>
        )}

        <div style={{ border: "1px solid #1f2937", borderRadius: "12px", padding: "32px", background: "#111217", maxWidth: "500px" }}>
          <h3>Grant Admin Comp Subscription</h3>
          <form onSubmit={handleGrantComp} style={{ display: "flex", flexDirection: "column", gap: "16px", marginTop: "16px" }}>
            <input
              type="text"
              placeholder="User ID (UUID)"
              value={compUserId}
              onChange={(e) => setCompUserId(e.target.value)}
              required
              style={{ padding: "12px", borderRadius: "8px", border: "1px solid #374151", background: "#0b0c10", color: "#ffffff" }}
            />
            <select
              value={compPlan}
              onChange={(e) => setCompPlan(e.target.value)}
              style={{ padding: "12px", borderRadius: "8px", border: "1px solid #374151", background: "#0b0c10", color: "#ffffff" }}
            >
              <option value="starter">Starter</option>
              <option value="pro">Pro</option>
              <option value="agency">Agency</option>
            </select>
            <button type="submit" className="btn btn-primary" style={{ padding: "12px" }}>Grant Comp</button>
          </form>
        </div>
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);