"use client";

import type { Ajuda } from "@prisma/client";
import { useState } from "react";
import { HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from "@/components/ui/dialog";

type Props = {
  rotulo: string;
  ajuda: Ajuda | null;
  allowTextShortcuts?: boolean;
  onUseShortcut?: (value: string) => void;
};

export function AjudaButton({ rotulo, ajuda, allowTextShortcuts = false, onUseShortcut }: Props) {
  const [open, setOpen] = useState(false);

  if (!ajuda) {
    return null;
  }

  function useShortcut(value: string) {
    onUseShortcut?.(value);
    setOpen(false);
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          type="button"
          variant="outline"
          size="sm"
          className="h-8 gap-1.5 px-2"
          aria-label={`Ajuda sobre: ${rotulo}`}
        >
          <HelpCircle className="h-4 w-4" />
          <span className="max-[360px]:hidden">Ajuda</span>
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{rotulo}</DialogTitle>
          <DialogDescription>
            Use estas orientacoes para responder com mais seguranca.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-5">
          <section className="space-y-2">
            <h3 className="text-sm font-semibold">O que responder</h3>
            <p className="text-sm leading-6 text-muted-foreground">{ajuda.oQueResponder}</p>
          </section>
          <section className="space-y-2">
            <h3 className="text-sm font-semibold">Por que perguntamos</h3>
            <p className="text-sm leading-6 text-muted-foreground">{ajuda.porQuePerguntamos}</p>
          </section>
          <section className="space-y-2 rounded-lg border bg-muted p-4">
            <h3 className="text-sm font-semibold">Mini exemplo</h3>
            <p className="text-sm leading-6 text-muted-foreground">{ajuda.miniExemplo}</p>
            <p className="text-xs leading-5 text-muted-foreground">
              Os exemplos servem apenas como referência. Substitua pelas informações reais da sua empresa.
            </p>
          </section>
        </div>

        <DialogFooter>
          {allowTextShortcuts ? (
            <>
              <Button type="button" variant="outline" onClick={() => useShortcut("Nao se aplica")}>
                Usar "Nao se aplica"
              </Button>
              <Button type="button" variant="outline" onClick={() => useShortcut("A definir")}>
                Usar "A definir"
              </Button>
            </>
          ) : null}
          <DialogClose asChild>
            <Button type="button">Fechar</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}