import { useEffect, useState } from "react";
import { useNavigate } from "@tanstack/react-router";
import { supabase } from "@/integrations/supabase/client";
import { Button } from "@/components/ui/button";
import { LogOut, User, Languages, ShoppingCart } from "lucide-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { useLang } from "@/lib/i18n";

export function TopBar() {
  const navigate = useNavigate();
  const [email, setEmail] = useState<string>("");
  const [role, setRole] = useState<string>("");
  const { lang, toggle, t } = useLang();

  useEffect(() => {
    supabase.auth.getUser().then(async ({ data }) => {
      if (!data.user) return;
      setEmail(data.user.email ?? "");
      const { data: roles } = await supabase.from("user_roles").select("role").eq("user_id", data.user.id).limit(1).maybeSingle();
      setRole((roles as any)?.role ?? "");
    });
  }, []);

  const logout = async () => {
    await supabase.auth.signOut();
    navigate({ to: "/auth", replace: true });
  };

  return (
    <div className="flex w-full items-center justify-between">
      <div className="text-sm font-medium text-muted-foreground">
        {new Date().toLocaleDateString(lang === "bn" ? "bn-BD" : "en-GB", { weekday: "long", day: "numeric", month: "long", year: "numeric" })}
      </div>
      <div className="flex items-center gap-2">
      <Button variant="default" size="sm" onClick={() => navigate({ to: "/pos" })} className="gap-1.5" title="POS">
        <ShoppingCart className="h-4 w-4" />
        <span className="text-xs font-semibold">POS</span>
      </Button>
      <Button variant="outline" size="sm" onClick={toggle} className="gap-1.5" title="Switch language">
        <Languages className="h-4 w-4" />
        <span className="text-xs font-semibold">{lang === "bn" ? "EN" : "বাং"}</span>
      </Button>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="sm" className="gap-2">
            <div className="h-7 w-7 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xs font-bold">
              {email.charAt(0).toUpperCase() || "U"}
            </div>
            <span className="hidden md:inline text-sm">{email}</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end" className="w-56">
          <DropdownMenuLabel>
            <div className="flex flex-col">
              <span className="text-sm">{email}</span>
              {role && <span className="text-xs text-muted-foreground capitalize">{role}</span>}
            </div>
          </DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem onClick={() => navigate({ to: "/settings" })}><User className="h-4 w-4 mr-2" />{t("tb.settings")}</DropdownMenuItem>
          <DropdownMenuItem onClick={logout}><LogOut className="h-4 w-4 mr-2" />{t("tb.logout")}</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      </div>
    </div>
  );
}