"use client";

import { useEffect, useRef, useState } from "react";

function RefreshIcon() {
  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 1 0 2 5.3" fill="none" stroke="currentColor" strokeWidth="2"/><path d="M20 5v6h-6" fill="none" stroke="currentColor" strokeWidth="2"/></svg>;
}
function ShareIcon() {
  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 16V3m0 0L7 8m5-5 5 5M5 13v7h14v-7" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>;
}

type ReportActionsProps = {
  loading: boolean;
  onReinspect: () => void;
  onInspectAnother: () => void;
  onShare: () => void;
  onExportJson: () => void;
  onExportMarkdown: () => void;
};

export function ReportActions({ loading, onReinspect, onInspectAnother, onShare, onExportJson, onExportMarkdown }: ReportActionsProps) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [desktopExportOpen, setDesktopExportOpen] = useState(false);
  const [mobileExportOpen, setMobileExportOpen] = useState(false);
  const desktopRef = useRef<HTMLDivElement | null>(null);
  const mobileRef = useRef<HTMLDivElement | null>(null);

  const close = () => {
    setMobileOpen(false);
    setDesktopExportOpen(false);
    setMobileExportOpen(false);
  };

  useEffect(() => {
    if (!mobileOpen && !desktopExportOpen && !mobileExportOpen) return;
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") close();
    };
    const onPointerDown = (event: PointerEvent) => {
      if (![desktopRef.current, mobileRef.current].some((element) => element?.contains(event.target as Node))) close();
    };
    document.addEventListener("keydown", onKeyDown);
    document.addEventListener("pointerdown", onPointerDown);
    return () => {
      document.removeEventListener("keydown", onKeyDown);
      document.removeEventListener("pointerdown", onPointerDown);
    };
  }, [mobileOpen, desktopExportOpen, mobileExportOpen]);

  const controls = (variant: "desktop" | "mobile") => {
    const exportOpen = variant === "desktop" ? desktopExportOpen : mobileExportOpen;
    const setExportOpen = variant === "desktop" ? setDesktopExportOpen : setMobileExportOpen;
    const exportId = variant + "-export-options";
    return <>
      <button type="button" className="action-reinspect" onClick={() => { close(); onReinspect(); }} disabled={loading}><RefreshIcon />{loading ? "Inspecting…" : "Re-inspect"}</button>
      <button type="button" className="inspect-another-btn" onClick={() => { close(); onInspectAnother(); }}>Inspect another host</button>
      <button type="button" className="share-btn" onClick={() => { close(); onShare(); }}><ShareIcon />Share</button>
      <div className="export-control"><button type="button" className="export-btn" aria-expanded={exportOpen} aria-controls={exportId} onClick={() => setExportOpen((open) => !open)}>Export <span aria-hidden="true">⌄</span></button>{exportOpen && <div id={exportId} className="export-popover" aria-label="Export report"><button type="button" onClick={() => { onExportJson(); close(); }}>JSON</button><button type="button" onClick={() => { onExportMarkdown(); close(); }}>Markdown</button></div>}</div>
    </>;
  };

  return <><div ref={desktopRef} className="report-actions">{controls("desktop")}</div><div ref={mobileRef} className="mobile-action-menu"><button type="button" className="actions-toggle" aria-expanded={mobileOpen} aria-controls="mobile-report-actions" onClick={() => setMobileOpen((open) => !open)}>Actions <span aria-hidden="true">⌄</span></button>{mobileOpen && <div id="mobile-report-actions" className="actions-popover" aria-label="Report actions">{controls("mobile")}</div>}</div></>;
}