import { useEffect, useState } from "preact/hooks";
import { Bell } from "lucide-preact";
import { Button } from "@/components/ui/button";
import { disableAgentBrowserPush, enableAgentBrowserPush, getAgentPushState, observeAgentPush, refreshAgentBrowserPush } from "@/lib/agent-push-browser";

export function AgentNotifications({ onLogout }: { onLogout: () => Promise<void> }) {
  const [state, setState] = useState(getAgentPushState), [signingOut, setSigningOut] = useState(false);
  useEffect(() => observeAgentPush(setState), []);
  return <details className="shrink-0 border-t border-violet-300/15 px-3 py-2 text-xs text-violet-100/75">
    <summary className="flex cursor-pointer items-center gap-2 rounded py-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"><Bell className="h-4 w-4" />Agent notifications</summary>
    <div className="space-y-2 pb-1 pt-2">
      <p role="status">{state.message}</p>
      {state.error ? <p role="alert" className="text-rose-300">{state.error}</p> : null}
      <div className="flex flex-wrap gap-2">
        {state.enabled ? <Button className="h-8 text-xs" variant="secondary" disabled={state.busy} onClick={() => void disableAgentBrowserPush()}>Turn off notifications</Button>
          : <Button className="h-8 text-xs" variant="secondary" disabled={!state.canEnable} onClick={() => void enableAgentBrowserPush()}>Enable notifications</Button>}
        <Button className="h-8 text-xs" variant="ghost" disabled={state.busy} onClick={() => void refreshAgentBrowserPush()}>Refresh</Button>
        <Button className="h-8 text-xs" variant="ghost" disabled={signingOut} onClick={() => { setSigningOut(true); void onLogout().finally(() => setSigningOut(false)); }}>Sign out</Button>
      </div>
    </div>
  </details>;
}