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>
            <div className="space-y-3">
              <Button
                className="w-full"
                onClick={() => signIn.social({ provider: "google", callbackURL: "/" })}
              >
                Sign in with Google
              </Button>
              <Button
                variant="outline"
                className="w-full"
                onClick={() => signIn.social({ provider: "github", callbackURL: "/" })}
              >
                Sign in with GitHub
              </Button>
            </div>
          </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>
  );
}