import { useState } from "react";
import { trackEvent } from "@executor-js/react/api/analytics";
import { Button } from "@executor-js/react/components/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@executor-js/react/components/dialog";
import { SupportOptions } from "./support-options";

// ---------------------------------------------------------------------------
// Cloud-only "Get support" button for the shared shell's `supportSlot`.
// ---------------------------------------------------------------------------

function HelpIcon({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" className={className} aria-hidden>
      <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.3" />
      <path
        d="M6.25 6.25c.25-1 1-1.5 1.85-1.5 1 0 1.9.7 1.9 1.7 0 .8-.5 1.2-1.1 1.6-.55.4-.9.7-.9 1.45M8 11.25v.05"
        stroke="currentColor"
        strokeWidth="1.3"
        strokeLinecap="round"
      />
    </svg>
  );
}

export function SupportSlot() {
  const [open, setOpen] = useState(false);
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Button
        type="button"
        variant="ghost"
        onClick={() => {
          trackEvent("support_opened");
          setOpen(true);
        }}
        className="flex h-auto w-full items-center justify-start gap-2.5 rounded-md px-2.5 py-1.5 text-sm font-normal text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground"
      >
        <HelpIcon className="size-3.5 text-muted-foreground" />
        Get support
      </Button>
      <DialogContent className="sm:max-w-[440px]">
        <DialogHeader>
          <DialogTitle className="font-display text-xl">Get support</DialogTitle>
          <DialogDescription className="text-sm leading-relaxed">
            Reach out through any of the channels below.
          </DialogDescription>
        </DialogHeader>
        <div className="py-2">
          <SupportOptions />
        </div>
      </DialogContent>
    </Dialog>
  );
}