"use client";

import { useState, useEffect } from "react";
import { Landing } from "@/components/site-saz/Landing";
import { Wizard } from "@/components/site-saz/Wizard";
import { AdminPanel } from "@/components/site-saz/AdminPanel";
import { UserPanel } from "@/components/site-saz/UserPanel";
import { MobileApp } from "@/components/site-saz/MobileApp";
import { TemplatesGallery } from "@/components/site-saz/TemplatesGallery";
import { ViewSwitcher } from "@/components/site-saz/ViewSwitcher";
import { ThemeProvider } from "@/components/site-saz/ThemeProvider";

export type ViewId =
  | "landing"
  | "wizard"
  | "admin"
  | "user"
  | "mobile"
  | "templates";

export const viewMeta: { id: ViewId; label: string; icon: string }[] = [
  { id: "landing", label: "صفحه اصلی", icon: "Home" },
  { id: "wizard", label: "ویزارد ۵ کلیکی", icon: "Sparkles" },
  { id: "templates", label: "گالری قالب‌ها", icon: "LayoutTemplate" },
  { id: "user", label: "پنل کاربری", icon: "LayoutDashboard" },
  { id: "admin", label: "پنل سوپرادمین", icon: "Shield" },
  { id: "mobile", label: "اپ موبایل PWA", icon: "Smartphone" },
];

export default function Home() {
  const [view, setView] = useState<ViewId>("landing");

  // smooth scroll to top on view change
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "instant" as ScrollBehavior });
  }, [view]);

  return (
    <ThemeProvider>
      <main className="min-h-screen bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors">
        {view === "landing" && <Landing onNavigate={setView} />}
        {view === "wizard" && <Wizard onNavigate={setView} />}
        {view === "admin" && <AdminPanel />}
        {view === "user" && <UserPanel onNavigate={setView} />}
        {view === "mobile" && <MobileApp />}
        {view === "templates" && <TemplatesGallery onNavigate={setView} />}

        {/* Floating view switcher - hidden on focused flows (wizard, mobile) */}
        {view !== "mobile" && view !== "wizard" && (
          <ViewSwitcher current={view} onChange={setView} />
        )}
      </main>
    </ThemeProvider>
  );
}