LabWise/App.tsx

import { useState } from "react";
import { Dashboard } from "./components/Dashboard";
import { Inventory } from "./components/Inventory";
import { ProtocolChecker } from "./components/ProtocolChecker";
import { useSession, signIn, signOut } from "./lib/auth-client";
import { Button } from "./components/ui/button";
import { Card, CardContent } from "./components/ui/card";
import {
  LayoutDashboard,
  Package,
  FileCheck,
  LogOut,
} from "lucide-react";
const logo = "/logo.png";

type Tab = "dashboard" | "inventory" | "protocol";

export default function App() {
  const { data: session, isPending } = useSession();
  const [activeTab, setActiveTab] = useState<Tab>("dashboard");

  const navItems = [
    { id: "dashboard" as Tab, label: "Dashboard", icon: LayoutDashboard },
    { id: "inventory" as Tab, label: "Inventory", icon: Package },
    { id: "protocol" as Tab, label: "Protocol Checker", icon: FileCheck },
  ];

  if (isPending) {
    return (
      <div className="flex h-screen items-center justify-center bg-secondary">
        <img src={logo} alt="LabWise" className="h-12 opacity-50 animate-pulse" />
      </div>
    );
  }

  if (!session) {
    return (
      <div className="flex h-screen items-center justify-center bg-secondary">
        <Card className="w-full max-w-sm">
          <CardContent className="p-8 space-y-6">
            <div className="flex justify-center">
              <img src={logo} alt="LabWise" className="h-12" />
            </div>
            <p className="text-center text-muted-foreground text-sm">
              Sign in to access your lab inventory and protocols.
            </p>
            <Button
              variant="outline"
              className="w-full flex items-center gap-3"
              onClick={() => signIn.social({ provider: "google", callbackURL: "/" })}
            >
              <svg viewBox="0 0 24 24" className="h-4 w-4" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/>
                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
              </svg>
              Sign in with Google
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <div className="flex h-screen bg-secondary">
      {/* Sidebar */}
      <aside className="w-64 bg-card border-r border-border flex flex-col">
        <div className="p-6 border-b border-border flex items-center justify-center">
          <img src={logo} alt="labwise" className="h-15" />
        </div>

        <nav className="flex-1 p-4">
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <button
                key={item.id}
                onClick={() => setActiveTab(item.id)}
                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg mb-2 transition-colors ${
                  activeTab === item.id
                    ? "bg-accent text-primary"
                    : "text-muted-foreground hover:bg-muted"
                }`}
              >
                <Icon className="w-5 h-5" />
                <span>{item.label}</span>
              </button>
            );
          })}
        </nav>

        <div className="p-4 border-t border-border">
          <div className="text-xs text-muted-foreground mb-2 truncate px-1">
            {session.user.email}
          </div>
          <button
            onClick={() => signOut()}
            className="w-full flex items-center gap-3 px-4 py-2 rounded-lg text-muted-foreground hover:bg-muted transition-colors text-sm"
          >
            <LogOut className="w-4 h-4" />
            <span>Sign out</span>
          </button>
        </div>
      </aside>

      {/* Main Content */}
      <main className="flex-1 overflow-auto">
        {activeTab === "dashboard" && <Dashboard setActiveTab={setActiveTab} />}
        {activeTab === "inventory" && <Inventory />}
        {activeTab === "protocol" && <ProtocolChecker />}
      </main>
    </div>
  );
}