import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import { Toaster } from "@/components/ui/toaster";
import LoginPage from "@/components/auth/LoginPage";
import PinProtection from "@/components/auth/PinProtection";
import ProtectedRoute from "@/components/auth/ProtectedRoute";
import LockButton from "@/components/auth/LockButton";
import Header from "@/components/dashboard/Header";
import { ThemeProvider } from "@/components/theme/ThemeProvider";
import Navigation from "@/components/dashboard/Navigation";
import { ScrollProvider } from "@/contexts/ScrollContext";
import DateTimeWeatherDisplay from "@/components/dashboard/DateTime";
import AircallDashboard from "@/components/dashboard/AircallDashboard";
import KlaviyoApiTest from "@/components/dashboard/KlaviyoApiTest";
import EventFeed from "./components/dashboard/EventFeed";
import StatCards from "./components/dashboard/StatCards";
import ProductGrid from "./components/dashboard/ProductGrid";
import SalesChart from "./components/dashboard/SalesChart";

// Public layout
const PublicLayout = () => (
  <div className="min-h-screen w-screen">
    <div className="w-full">
      <div className="p-6">
        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 text-left mb-5">
          Black Friday 2024
        </h1>
      </div>
    </div>
  </div>
);

// Pin Protected Layout
const PinProtectedLayout = ({ children }) => {
  const [isPinVerified, setIsPinVerified] = React.useState(() => {
    return sessionStorage.getItem("pinVerified") === "true";
  });

  const handlePinSuccess = () => {
    setIsPinVerified(true);
    sessionStorage.setItem("pinVerified", "true");
  };

  if (!isPinVerified) {
    return <PinProtection onSuccess={handlePinSuccess} />;
  }

  return children;
};

// Small Layout
const SmallLayout = () => {
  const SCALE_FACTOR = 2;

  return (
    <div className="min-h-screen w-screen overflow-hidden">
      <div className="flex">
        <div
          style={{
            transform: `scale(${SCALE_FACTOR})`,
            transformOrigin: "top left",
            padding: "1.5rem",
            marginBottom: "1.5rem",
          }}
        >
          <span className="absolute top-0 left-0">
            <LockButton />
          </span>
          <DateTimeWeatherDisplay scaleFactor={SCALE_FACTOR} />
        </div>
      </div>
    </div>
  );
};

// Main dashboard layout
const DashboardLayout = () => {
  return (
    <ScrollProvider>
      <div className="min-h-screen max-w-[1600px] mx-auto">
        <div className="p-4">
          <Header />
        </div>
        <Navigation />
        <div className="p-4 space-y-4">
          <div className="grid grid-cols-1 xl:grid-cols-6 gap-4">
            <div className="2xl:col-span-4 col-span-6">
              <div className="space-y-4 h-full w-full">
                <StatCards />
              </div>
            </div>
            <div className="xl:col-span-2 col-span-6 h-[530px] 2xl:block hidden">
              <div className="h-full">
                <div className="h-full"><EventFeed /></div>
              </div>
            </div>
          </div>
          <div className="grid grid-cols-12 gap-4">
            <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:hidden h-[740px]">
              <EventFeed />
            </div>
            <div className="col-span-12 lg:col-span-6 xl:col-span-6 2xl:col-span-4 h-[740px]">
              <ProductGrid />
            </div>
            <div className="col-span-12 2xl:col-span-8 h-full w-full flex">
              <SalesChart className="w-full h-full"/>
            </div>
          </div>
          <AircallDashboard />
        </div>
      </div>
    </ScrollProvider>
  );
};

function App() {
  return (
    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
      <Router>
        <Routes>
          <Route path="/black-friday" element={<PublicLayout />} />
          <Route path="/login" element={<LoginPage />} />
          <Route
            path="/small"
            element={
              <PinProtectedLayout>
                <SmallLayout />
              </PinProtectedLayout>
            }
          />
          <Route
            path="/dashboard"
            element={
              <ProtectedRoute>
                <DashboardLayout />
              </ProtectedRoute>
            }
          />
          <Route path="/" element={<Navigate to="/dashboard" replace />} />
        </Routes>
        <Toaster />
      </Router>
    </ThemeProvider>
  );
}

export default App;
