/**
 * Free-tier AI Helper toolbar teaser — opens Pro upgrade dialog.
 */

import { useState } from "react";
import * as Tooltip from "@radix-ui/react-tooltip";
import { MagicWandIcon } from "@radix-ui/react-icons";

import { ProBadge, ProUpgradeDialog } from "@/components/Pro";

export function AiHelperUpgradeButton() {
  const [proDialogOpen, setProDialogOpen] = useState(false);

  return (
    <>
      <Tooltip.Provider>
        <Tooltip.Root>
          <Tooltip.Trigger asChild>
            <button type="button" className="oppb-ai-helper-btn oppb-ai-helper-btn--locked" onClick={() => setProDialogOpen(true)}>
              <MagicWandIcon className="w-4 h-4" />
              <span>AI Helper</span>
              <ProBadge size="sm" />
            </button>
          </Tooltip.Trigger>
          <Tooltip.Portal>
            <Tooltip.Content className="oppb-tooltip" sideOffset={5}>
              Generate optimized HTML/CSS using AI (Pro feature)
              <Tooltip.Arrow className="oppb-tooltip-arrow" />
            </Tooltip.Content>
          </Tooltip.Portal>
        </Tooltip.Root>
      </Tooltip.Provider>

      <ProUpgradeDialog open={proDialogOpen} onOpenChange={setProDialogOpen} triggeredBy="ai_helper" />
    </>
  );
}

export default AiHelperUpgradeButton;
