import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { CheckIcon, ChevronDownIcon } from "lucide-react";
import * as React from "react";

interface Company {
  id: string;
  name: string;
  taxName: string;
  initials: string;
}

const companies: Company[] = [
  { id: "company-1", name: "Mi Empresa", taxName: "Mi Empresa S.L.", initials: "ME" },
  { id: "company-2", name: "Comercial Norte", taxName: "Comercial Norte S.L.", initials: "CN" },
  {
    id: "company-3",
    name: "Servicios Globales",
    taxName: "Servicios Globales S.L.",
    initials: "SG",
  },
];

interface AppCompanySwitcherProps {
  className?: string;
}

export const AppCompanySwitcher = ({ className }: AppCompanySwitcherProps) => {
  const [selectedCompany, setSelectedCompany] = React.useState<Company>(companies[0]);

  return (
    <div className={cn("w-full", className)}>
      <DropdownMenu>
        <DropdownMenuTrigger
          render={
            <button
              className={cn(
                "flex h-14 w-full items-center gap-3 rounded-none px-3 text-left hover:bg-muted transition-colors",
                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              )}
              type="button"
            >
              <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-sm font-semibold text-white">
                {selectedCompany.initials}
              </span>

              <span className="min-w-0 flex-1 group-data-[collapsible=icon]:hidden">
                <span className="block truncate text-sm font-semibold leading-5 text-foreground">
                  {selectedCompany.name}
                </span>
                <span className="block truncate text-xs text-muted-foreground">
                  {selectedCompany.taxName}
                </span>
              </span>

              <ChevronDownIcon
                aria-hidden="true"
                className="size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden"
              />
            </button>
          }
        />

        <DropdownMenuContent align="start" className="w-64" side="bottom">
          <DropdownMenuGroup>
            <DropdownMenuLabel>Empresa activa</DropdownMenuLabel>
            <DropdownMenuSeparator />

            {companies.map((company) => {
              const isSelected = company.id === selectedCompany.id;

              return (
                <DropdownMenuItem
                  className="gap-3 py-2"
                  key={company.id}
                  onSelect={() => setSelectedCompany(company)}
                >
                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground">
                    {company.initials}
                  </span>

                  <span className="min-w-0 flex-1">
                    <span className="block truncate font-medium">{company.name}</span>
                    <span className="block truncate text-xs text-muted-foreground">
                      {company.taxName}
                    </span>
                  </span>

                  {isSelected ? (
                    <CheckIcon aria-hidden="true" className="size-4 text-blue-600" />
                  ) : null}
                </DropdownMenuItem>
              );
            })}
          </DropdownMenuGroup>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
};