import React from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  useAccountFilter,
  formatAccountFilterLabel,
  type AccountFilterValue,
} from "./AccountFilterContext";
import { ChevronDown } from "lucide-react";

const OPTIONS: Array<{ value: AccountFilterValue; label: string }> = [
  { value: "all", label: "All Accounts" },
  { value: "a", label: "Connected Account A" },
  { value: "b", label: "Connected Account B" },
  { value: "c", label: "Connected Account C" },
];

export function AccountFilterControl({
  dense,
}: {
  dense?: boolean;
}) {
  const { state, setState } = useAccountFilter();

  function setAccount(account: AccountFilterValue) {
    setState((s) => ({ ...s, account }));
  }

  return (
    <Card className={dense ? "p-2" : "p-3"}>
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2">
            <Badge variant="secondary" className="whitespace-nowrap">Viewing</Badge>
            <span className="truncate text-sm font-medium" title={formatAccountFilterLabel(state.account)}>
              {formatAccountFilterLabel(state.account)}
            </span>
          </div>
          <div className="mt-1 text-xs text-muted-foreground">Applies to the entire workspace.</div>
        </div>

        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="outline"
              size={dense ? "sm" : "default"}
              className="shrink-0"
            >
              <span className="sr-only">Change account filter</span>
              <ChevronDown className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuLabel>Account scope</DropdownMenuLabel>
            <DropdownMenuSeparator />
            {OPTIONS.map((o) => (
              <DropdownMenuItem
                key={o.value}
                onSelect={(e) => {
                  e.preventDefault();
                  setAccount(o.value);
                }}
                className="flex items-center justify-between gap-2"
              >
                <span>{o.label}</span>
                {state.account === o.value ? <span className="text-xs text-primary">Selected</span> : null}
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </Card>
  );
}