import { useState } from "react";
import TabNavigation from "./components/TabNavigation";
import SetupWizard from "./pages/SetupWizard";
import Onboarding from "./pages/Onboarding";
import Dashboard from "./pages/Dashboard";
import AutoPost from "./pages/AutoPost";
import Scheduler from "./pages/Scheduler";
import Analytics from "./pages/Analytics";
import Profiles from "./pages/Profiles";
import Settings from "./pages/Settings";

type Tab = "dashboard" | "scheduler" | "autopost" | "analytics" | "profiles" | "settings";

export default function App() {
  const params = new URLSearchParams(window.location.search);
  const tabMap: Record<string, Tab> = {
    dashboard: "dashboard",
    connect: "profiles",
    compose: "scheduler",
    calendar: "scheduler",
    scheduler: "scheduler",
    autopost: "autopost",
    activity: "dashboard",
    analytics: "analytics",
    settings: "settings",
    profiles: "profiles",
    about: "settings",
  };
  const rawTab = params.get("tab") || "dashboard";
  const initialTab = tabMap[rawTab] || "dashboard";
  const [showConnectedBanner] = useState(() => params.get("connected") === "1");
  const [activeTab, setActiveTabState] = useState<Tab>(initialTab);
  const setActiveTab = (tab: Tab) => {
    setActiveTabState(tab);
    const url = new URL(window.location.href);
    url.searchParams.set("tab", tab);
    window.history.replaceState({}, "", url.toString());
  };

  const [wizardSkipped, setWizardSkipped] = useState(false);

  if (!viralyWP.isConnected) {
    if (!wizardSkipped && !sessionStorage.getItem("viraly_wizard_skipped")) {
      return (
        <SetupWizard
          onSkip={() => {
            setWizardSkipped(true);
            sessionStorage.setItem("viraly_wizard_skipped", "1");
          }}
        />
      );
    }
    return <Onboarding />;
  }

  const renderTab = () => {
    switch (activeTab) {
      case "dashboard":
        return <Dashboard onNavigate={setActiveTab} />;
      case "scheduler":
        return <Scheduler onNavigate={setActiveTab} />;
      case "autopost":
        return <AutoPost onNavigate={setActiveTab} />;
      case "analytics":
        return <Analytics />;
      case "profiles":
        return <Profiles />;
      case "settings":
        return <Settings />;
      default:
        return <Dashboard onNavigate={setActiveTab} />;
    }
  };

  return (
    <div>
      <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />

      {showConnectedBanner && (
        <div className="vr-flex vr-items-start vr-gap-3 vr-p-4 vr-rounded-lg vr-bg-emerald-50 vr-border vr-border-emerald-200 vr-mb-5 vr-text-emerald-800 vr-text-sm">
          <i className="fa-solid fa-circle-check vr-text-emerald-500 vr-mt-0.5" />
          <span>
            Your site is connected! Head to{" "}
            <button
              onClick={() => setActiveTab("profiles")}
              className="vr-font-semibold vr-underline vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0 vr-text-emerald-800"
            >
              Profiles
            </button>{" "}
            to connect your social accounts.
          </span>
        </div>
      )}

      <div>{renderTab()}</div>
    </div>
  );
}