mylegal-stage-law/src/components/app-shell.tsx

import { Link, useLocation, useNavigate } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { useAuth } from "@/lib/auth";
import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { supabase } from "@/integrations/supabase/client";
import {
  Briefcase,
  Users,
  Receipt,
  ShieldCheck,
  LogOut,
  Scale,
  LayoutDashboard,
  CheckSquare,
  MessageSquare,
  Activity,
  DollarSign,
  FileText,
  FolderOpen,
  Settings as SettingsIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
import type { ReactNode } from "react";
import { useBubbleCounts } from "@/lib/use-bubble-counts";
import { NotificationBell } from "@/components/notifications/notification-bell";
import { DateCalculator } from "@/components/date-calculator";
import { HeaderTimer } from "@/components/timer/header-timer";
import { QuickAddTime, QuickAddExpense } from "@/components/quick-add/quick-add";

function initials(name: string, email: string) {
  const src = (name || email || "").trim();
  return src.split(/\s+/).map((p) => p[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
}

interface NavItem {
  to: string;
  label: string;
  icon: typeof Briefcase;
  adminOnly?: boolean;
  bubbleKey?: "messages" | "tasks";
}

const NAV: NavItem[] = [
  { to: "/", label: "Dashboard", icon: LayoutDashboard },
  { to: "/clients", label: "Clients", icon: Users },
  { to: "/cases", label: "Cases", icon: Briefcase },
  { to: "/tasks", label: "Tasks", icon: CheckSquare, bubbleKey: "tasks" },
  { to: "/messages", label: "Messages", icon: MessageSquare, bubbleKey: "messages" },
  { to: "/status", label: "Status Updates", icon: Activity },
  { to: "/collections", label: "Collections", icon: DollarSign },
  { to: "/documents", label: "Documents", icon: FileText },
  { to: "/files", label: "Files", icon: FolderOpen },
  { to: "/invoices", label: "Invoices", icon: Receipt },
  { to: "/settings", label: "Settings", icon: SettingsIcon },
  { to: "/admin/users", label: "Users", icon: ShieldCheck, adminOnly: true },
];

function Bubble({ count }: { count: number }) {
  if (!count) return null;
  return (
    <span className="ml-auto h-5 min-w-5 px-1.5 rounded-full bg-destructive text-destructive-foreground text-[10px] font-bold flex items-center justify-center">
      {count > 99 ? "99+" : count}
    </span>
  );
}

export function AppShell({ children }: { children: ReactNode }) {
  const { user, signOut, isAdmin, roles } = useAuth();
  const location = useLocation();
  const navigate = useNavigate();
  const counts = useBubbleCounts();
  const [profile, setProfile] = useState<{ full_name: string; avatar_url: string | null } | null>(null);

  useEffect(() => {
    if (!user) return;
    supabase
      .from("profiles")
      .select("full_name, avatar_url")
      .eq("id", user.id)
      .maybeSingle()
      .then(({ data }) => {
        if (data) setProfile({ full_name: data.full_name || "", avatar_url: (data as any).avatar_url ?? null });
      });
    const ch = supabase
      .channel(`profile-self-${user.id}-${Math.random().toString(36).slice(2)}`)
      .on(
        "postgres_changes",
        { event: "UPDATE", schema: "public", table: "profiles", filter: `id=eq.${user.id}` },
        (payload) => {
          const r = payload.new as any;
          setProfile({ full_name: r.full_name || "", avatar_url: r.avatar_url ?? null });
        },
      )
      .subscribe();
    return () => {
      supabase.removeChannel(ch);
    };
  }, [user]);

  const handleSignOut = async () => {
    await signOut();
    navigate({ to: "/login" });
  };

  return (
    <div className="flex min-h-screen bg-background">
      {/* Sidebar */}
      <aside className="hidden md:flex w-64 flex-col bg-sidebar text-sidebar-foreground border-r border-sidebar-border">
        <div className="px-6 py-5 border-b border-sidebar-border flex items-center gap-2.5">
          <div className="h-9 w-9 rounded-md bg-sidebar-primary flex items-center justify-center">
            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
          </div>
          <div className="leading-tight flex-1 min-w-0">
            <div className="font-serif text-lg truncate">Stage Law Firm, PLLC</div>
            <div className="text-[10px] uppercase tracking-widest text-sidebar-foreground/60">Law Firm Suite</div>
          </div>
        </div>

        <nav className="flex-1 px-3 py-4 space-y-0.5">
          {NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
            const active = item.to === "/" ? location.pathname === "/" : location.pathname.startsWith(item.to);
            const Icon = item.icon;
            const bubble = item.bubbleKey ? counts[item.bubbleKey] : 0;
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors",
                  active
                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
                    : "text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground",
                )}
              >
                <Icon className="h-4 w-4" />
                {item.label}
                <Bubble count={bubble} />
              </Link>
            );
          })}
        </nav>

        <div className="px-4 py-4 border-t border-sidebar-border">
          <Link
            to="/settings/profile"
            className="flex items-center gap-2.5 mb-3 group rounded-md -mx-1 px-1 py-1 hover:bg-sidebar-accent/60"
          >
            <Avatar className="h-9 w-9">
              {profile?.avatar_url ? <AvatarImage src={profile.avatar_url} alt="" /> : null}
              <AvatarFallback className="text-[11px] bg-sidebar-accent text-sidebar-accent-foreground">
                {initials(profile?.full_name || "", user?.email || "")}
              </AvatarFallback>
            </Avatar>
            <div className="min-w-0 flex-1 leading-tight">
              <div className="text-xs font-medium truncate text-sidebar-foreground group-hover:text-sidebar-accent-foreground">
                {profile?.full_name || user?.email}
              </div>
              <div className="text-[10px] uppercase tracking-wider text-sidebar-foreground/50 truncate">
                {roles.join(" · ") || "no role"}
              </div>
            </div>
          </Link>
          <Button
            variant="ghost"
            size="sm"
            className="w-full justify-start text-sidebar-foreground/80 hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground"
            onClick={handleSignOut}
          >
            <LogOut className="h-4 w-4 mr-2" />
            Sign out
          </Button>
        </div>
      </aside>

      {/* Mobile top bar */}
      <div className="md:hidden fixed top-0 inset-x-0 h-14 bg-sidebar text-sidebar-foreground border-b border-sidebar-border flex items-center justify-between px-4 z-30">
        <Link to="/" className="flex items-center gap-2">
          <Scale className="h-5 w-5" />
          <span className="font-serif text-lg">Counsel</span>
        </Link>
        <div className="flex items-center gap-2">
          <DateCalculator />
          <NotificationBell />
          <Button variant="ghost" size="sm" onClick={handleSignOut} className="text-sidebar-foreground">
            <LogOut className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <main className="flex-1 min-w-0 md:ml-0 mt-14 md:mt-0">
        <div className="md:hidden flex overflow-x-auto gap-1 px-3 py-2 border-b bg-card">
          {NAV.filter((n) => !n.adminOnly || isAdmin).map((item) => {
            const active = item.to === "/" ? location.pathname === "/" : location.pathname.startsWith(item.to);
            const bubble = item.bubbleKey ? counts[item.bubbleKey] : 0;
            return (
              <Link
                key={item.to}
                to={item.to}
                className={cn(
                  "px-3 py-1.5 rounded-md text-xs font-medium whitespace-nowrap relative",
                  active ? "bg-primary text-primary-foreground" : "text-muted-foreground",
                )}
              >
                {item.label}
                {bubble > 0 && (
                  <span className="ml-1 inline-flex h-4 min-w-4 px-1 rounded-full bg-destructive text-destructive-foreground text-[9px] font-bold items-center justify-center">
                    {bubble > 99 ? "99+" : bubble}
                  </span>
                )}
              </Link>
            );
          })}
        </div>
        {children}
      </main>
    </div>
  );
}

export function PageHeader({
  title,
  description,
  actions,
}: {
  title: string;
  description?: string;
  actions?: ReactNode;
}) {
  return (
    <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-3 mb-6">
      <div>
        <h1 className="font-serif text-3xl text-foreground">{title}</h1>
        {description && <p className="text-sm text-muted-foreground mt-1">{description}</p>}
      </div>
      {actions && <div className="flex gap-2">{actions}</div>}
    </div>
  );
}

export function PageContainer({ children }: { children: ReactNode }) {
  return <div className="p-6 md:p-8 max-w-[1400px] mx-auto">{children}</div>;
}