import React, { useState } from "react";
import { ThemeProvider } from "@/components/dashboard/theme/ThemeProvider";
import LockButton from "@/components/dashboard/LockButton";
import PinProtection from "@/components/dashboard/PinProtection";
import DateTimeWeatherDisplay from "@/components/dashboard/DateTime";
import MiniStatCards from "@/components/dashboard/MiniStatCards";
import MiniRealtimeAnalytics from "@/components/dashboard/MiniRealtimeAnalytics";
import MiniSalesChart from "@/components/dashboard/MiniSalesChart";
import MiniEventFeed from "@/components/dashboard/MiniEventFeed";

// Pin Protected Layout
const PinProtectedLayout = ({ children }: { children: React.ReactNode }) => {
  const [isPinVerified, setIsPinVerified] = 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 DATETIME_SCALE = 2;
  const STATS_SCALE = 1.65;
  const ANALYTICS_SCALE = 1.65;
  const SALES_SCALE = 1.65;
  const FEED_SCALE = 1.65;

  return (
    <div className="min-h-screen w-screen relative">
      <span className="absolute top-4 left-4 z-50">
        <LockButton />
      </span>
      
      <div className="p-4 grid grid-cols-12 gap-4">
        {/* DateTime */}
        <div className="col-span-3">
          <div style={{ 
            transform: `scale(${DATETIME_SCALE})`,
            transformOrigin: 'top left',
            width: `${100/DATETIME_SCALE}%`
          }}>
            <DateTimeWeatherDisplay scaleFactor={DATETIME_SCALE} />
          </div>
        </div>

        {/* Stats and Analytics */}
        <div className="col-span-9">
          <div className="">
            {/* Mini Stat Cards */}
            <div>
              <div style={{ 
                transform: `scale(${STATS_SCALE})`,
                transformOrigin: 'top left',
                width: `${100/STATS_SCALE}%`
              }}>
                <MiniStatCards 
                  title="Live Stats"
                  timeRange="today"
                />
              </div>
            </div>

            {/* Mini Charts Grid */}
            <div className="grid grid-cols-2 gap-4 mt-28">
              {/* Mini Sales Chart */}
              <div>
                <div style={{ 
                  transform: `scale(${SALES_SCALE})`,
                  transformOrigin: 'top left',
                  width: `${100/SALES_SCALE}%`
                }}>
                  <MiniSalesChart />
                </div>
              </div>

              {/* Mini Realtime Analytics */}
              <div className="-mt-1">
                <div style={{ 
                  transform: `scale(${ANALYTICS_SCALE})`,
                  transformOrigin: 'top left',
                  width: `${100/ANALYTICS_SCALE}%`,
                  height: `${100/ANALYTICS_SCALE}%`
                }}>
                  <MiniRealtimeAnalytics />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Event Feed at bottom */}
      <div className="absolute bottom-0 left-0 right-0">
        <div style={{ 
          transform: `scale(${FEED_SCALE})`,
          transformOrigin: 'bottom center',
          width: `${100/FEED_SCALE}%`,
          margin: '0 auto'
        }}>
          <MiniEventFeed />
        </div>
      </div>
    </div>
  );
};

export function SmallDashboard() {
  return (
    <ThemeProvider>
      <PinProtectedLayout>
        <SmallLayout />
      </PinProtectedLayout>
    </ThemeProvider>
  );
}

export default SmallDashboard; 