"use client";

import { useState } from "react";
import { Palette, Printer } from "lucide-react";
import { Modal } from "@/components/ui/modal";
import { cn } from "@/lib/utils";
import { ColorWheelPicker } from "@/components/ui/color-wheel-picker";
import { NotePrintContent } from "@/components/notes/note-print-content";

interface PrintExportModalProps {
  open: boolean;
  onClose: () => void;
  title: string;
  content: Record<string, unknown>;
}

// Presets chosen for legibility on white paper — the dark/bright palette
// used for on-screen custom covers would be unreadable here.
const PRINT_TEXT_COLOR_PRESETS = ["#000000", "#1e3a8a", "#166534", "#7c2d12", "#581c87", "#334155"];

export function PrintExportModal({ open, onClose, title, content }: PrintExportModalProps) {
  const [textColor, setTextColor] = useState("#000000");
  const [colorMode, setColorMode] = useState<"color" | "bw">("color");
  const [wheelOpen, setWheelOpen] = useState(false);

  return (
    <>
      <Modal open={open} onClose={onClose} title="Print / export note" className="max-w-sm">
      <div className="space-y-4">
        <p className="text-[12.5px] text-muted-foreground">
          Always printed as plain white paper, regardless of any cover design applied on screen.
        </p>

        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">Text color</label>
          <div className="flex flex-wrap items-center gap-2">
            {PRINT_TEXT_COLOR_PRESETS.map((color) => (
              <button
                key={color}
                type="button"
                onClick={() => setTextColor(color)}
                title={color}
                disabled={colorMode === "bw"}
                style={{ backgroundColor: color }}
                className={cn(
                  "h-7 w-7 rounded-full border-2 transition-transform hover:scale-110 disabled:opacity-40 disabled:hover:scale-100",
                  textColor === color ? "border-ring" : "border-border",
                )}
              />
            ))}
            <button
              type="button"
              onClick={() => setWheelOpen((v) => !v)}
              disabled={colorMode === "bw"}
              title="Custom color"
              className={cn(
                "flex h-7 w-7 items-center justify-center rounded-full border-2 transition-transform hover:scale-110 disabled:opacity-40 disabled:hover:scale-100",
                wheelOpen ? "border-ring" : "border-border",
              )}
              style={{
                backgroundImage:
                  "conic-gradient(red, yellow, lime, cyan, blue, magenta, red)",
              }}
            >
              <Palette className="h-3 w-3 text-white drop-shadow-[0_0_2px_rgba(0,0,0,0.7)]" />
            </button>
          </div>

          {wheelOpen && colorMode === "color" && (
            <div className="flex justify-center rounded-lg border border-border bg-background/60 p-3">
              <ColorWheelPicker value={textColor} onChange={setTextColor} />
            </div>
          )}
        </div>

        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">Color mode</label>
          <div className="flex overflow-hidden rounded-lg border border-border">
            {(["color", "bw"] as const).map((mode) => (
              <button
                key={mode}
                type="button"
                onClick={() => setColorMode(mode)}
                className={cn(
                  "flex-1 py-2 text-sm font-medium transition-colors",
                  colorMode === mode ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50",
                )}
              >
                {mode === "color" ? "Color" : "Black & white"}
              </button>
            ))}
          </div>
        </div>

        <button
          type="button"
          onClick={() => window.print()}
          className="flex w-full items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
        >
          <Printer className="h-4 w-4" />
          Print / save as PDF
        </button>
      </div>
      </Modal>

      {/* Rendered outside the modal so its print layout isn't constrained by
          the modal's own positioned box — it fills the whole printable page. */}
      <NotePrintContent title={title} content={content} textColor={textColor} grayscale={colorMode === "bw"} />
    </>
  );
}