"use client";

import { InfoIcon } from "lucide-react";
import { useSyncExternalStore, type ReactNode } from "react";

import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";

const finePointerQuery = "(hover: hover) and (pointer: fine)";

function subscribe(callback: () => void) {
  const query = window.matchMedia(finePointerQuery);
  query.addEventListener("change", callback);
  return () => query.removeEventListener("change", callback);
}

function getSnapshot() {
  return window.matchMedia(finePointerQuery).matches;
}

function Trigger({ label, showIcon }: { label: ReactNode; showIcon: boolean }) {
  return (
    <span className="inline-flex min-h-11 cursor-help items-center gap-1 rounded-md text-left font-medium underline decoration-border underline-offset-4 outline-none transition-colors hover:bg-primary/15 hover:text-primary hover:decoration-2 hover:decoration-primary focus-visible:bg-primary/15 focus-visible:text-primary focus-visible:ring-2 focus-visible:ring-ring md:min-h-0">
      {label}
      {showIcon ? <InfoIcon aria-hidden="true" className="size-3.5 text-muted-foreground" /> : null}
    </span>
  );
}

export function TermDetail({
  label,
  title,
  detail,
  showIcon = true,
  interactive = false,
}: {
  label: ReactNode;
  title: string;
  detail: string;
  showIcon?: boolean;
  interactive?: boolean;
}) {
  const finePointer = useSyncExternalStore(subscribe, getSnapshot, () => false);

  if (finePointer && !interactive) {
    return (
      <HoverCard>
        <HoverCardTrigger aria-label={`ดูรายละเอียด ${title}`}>
          <Trigger label={label} showIcon={showIcon} />
        </HoverCardTrigger>
        <HoverCardContent align="start">
          <p className="font-medium text-primary">{title}</p>
          <p className="mt-1 whitespace-pre-line text-muted-foreground">{detail}</p>
        </HoverCardContent>
      </HoverCard>
    );
  }

  return (
    <Drawer showSwipeHandle>
      <DrawerTrigger aria-label={`เปิดรายละเอียด ${title}`}>
        <Trigger label={label} showIcon={showIcon} />
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle className="text-primary">{title}</DrawerTitle>
          <DrawerDescription className="whitespace-pre-line text-left">{detail}</DrawerDescription>
        </DrawerHeader>
        <div className="h-6" />
      </DrawerContent>
    </Drawer>
  );
}