"use client";

import { Modal } from "@/components/ui/modal";
import { cn } from "@/lib/utils";
import { useNoteDesigns } from "@/hooks/use-note-designs";
import { TemplateContentPreview } from "@/components/notes/template-content-preview";
import type { NoteTemplate } from "@/lib/notes/note-templates";

interface TemplatePreviewModalProps {
  template: NoteTemplate | null;
  open: boolean;
  onClose: () => void;
}

// Same idea as NoteDesignPreviewModal, but shows the template's real content
// (read-only, inert) instead of placeholder bars — and applies the bundled
// cover when the template has one, so exclusive templates preview as the
// full package (design + structure) they actually are.
export function TemplatePreviewModal({ template, open, onClose }: TemplatePreviewModalProps) {
  const { getCover } = useNoteDesigns();
  if (!template) return null;

  const cover = getCover(template.coverId);
  const toneText = cover?.tone === "light" ? "text-neutral-900" : "text-white";
  const toneMuted = cover?.tone === "light" ? "text-neutral-900/55" : "text-white/55";

  return (
    <Modal open={open} onClose={onClose} title={template.name} className="max-w-xl">
      <div className={cn("overflow-hidden rounded-2xl", !cover && "border border-border bg-muted/20")} style={cover?.style}>
        <div className="max-h-[65vh] overflow-y-auto p-5 pb-6 sm:p-7 sm:pb-8">
          <div className={cn("mb-3 flex items-center gap-1 text-[12.5px]", cover ? toneMuted : "text-muted-foreground")}>
            <span>Notes</span>
            <span className="px-1">/</span>
            <span className={cn("font-medium", cover ? toneText : "text-foreground/80")}>{template.name}</span>
          </div>

          <p
            className={cn("mb-4 text-2xl font-bold tracking-tight", cover ? toneText : "text-foreground")}
            style={cover && cover.tone === "dark" ? { textShadow: "0 2px 16px rgba(0,0,0,0.35)" } : undefined}
          >
            {template.name}
          </p>

          <div
            className={cn(
              "rounded-2xl p-4",
              cover ? "border border-white/15 bg-black/25 backdrop-blur-xl shadow-xl" : "border border-border bg-background/60",
            )}
          >
            <TemplateContentPreview content={template.content} />
          </div>
        </div>
      </div>
    </Modal>
  );
}