"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { Eye, ImageOff, Loader2, Lock, Palette, Plus, Sparkles } from "lucide-react";
import { cn } from "@/lib/utils";
import {
  CATEGORY_LABELS,
  NOTE_COVER_CATEGORIES,
  formatCoverPrice,
  type NoteCover,
} from "@/lib/notes/note-covers";
import { useNoteDesigns } from "@/hooks/use-note-designs";
import { useNoteDesignPurchases } from "@/hooks/use-note-design-purchases";
import { NoteDesignPreviewModal } from "@/components/notes/note-design-preview-modal";
import { CreateDesignModal } from "@/components/notes/create-design-modal";

interface NoteCoverPickerProps {
  coverId: string | null;
  onSelect: (coverId: string | null) => void;
  disabled?: boolean;
}

export function NoteCoverPicker({ coverId, onSelect, disabled }: NoteCoverPickerProps) {
  const [open, setOpen] = useState(false);
  const [activeCategory, setActiveCategory] = useState<NoteCover["category"]>(NOTE_COVER_CATEGORIES[0]);
  const [previewCover, setPreviewCover] = useState<NoteCover | null>(null);
  const [createOpen, setCreateOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const { allCovers, refetch: refetchDesigns } = useNoteDesigns();
  const { fullAccess, ownsCover, purchaseCover, purchasingId, error } = useNoteDesignPurchases();

  useEffect(() => {
    if (!open) return;
    function handleClick(e: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, [open]);

  const visible = allCovers.filter((cover) => cover.category === activeCategory);

  function handleCoverClick(cover: NoteCover) {
    if (ownsCover(cover)) {
      onSelect(cover.id);
      setOpen(false);
    } else {
      void purchaseCover(cover);
    }
  }

  return (
    <div ref={containerRef} className="relative inline-block">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        disabled={disabled}
        className="flex items-center gap-2 rounded-xl border border-white/[0.08] bg-white/[0.04] px-3.5 py-2.5 text-[13px] font-semibold text-white/70 transition-all hover:border-white/[0.14] hover:bg-white/[0.07] hover:text-white disabled:opacity-40"
      >
        <Palette className="h-3.5 w-3.5" />
        {coverId ? "Change cover" : "Add cover"}
      </button>

      {open && (
        <div className="absolute left-0 top-full z-50 mt-2 w-[320px] rounded-2xl border border-border bg-popover p-3 shadow-2xl">
          <div className="mb-2 flex flex-wrap gap-1">
            {NOTE_COVER_CATEGORIES.map((category) => (
              <button
                key={category}
                type="button"
                onClick={() => setActiveCategory(category)}
                className={cn(
                  "rounded-full px-2.5 py-1 text-[11px] font-semibold transition-colors",
                  activeCategory === category
                    ? "bg-accent text-accent-foreground"
                    : "text-muted-foreground hover:text-foreground",
                )}
              >
                {CATEGORY_LABELS[category]}
              </button>
            ))}
          </div>

          <div className="grid grid-cols-4 gap-2">
            <button
              type="button"
              onClick={() => {
                onSelect(null);
                setOpen(false);
              }}
              title="No cover"
              className="flex h-14 items-center justify-center rounded-lg border border-dashed border-border text-muted-foreground transition-colors hover:border-ring hover:text-foreground"
            >
              <ImageOff className="h-4 w-4" />
            </button>
            {visible.map((cover) => {
              const owned = ownsCover(cover);
              const purchasing = purchasingId === cover.id;
              return (
                <button
                  key={cover.id}
                  type="button"
                  title={owned ? cover.name : `${cover.name} — ${formatCoverPrice(cover.price)}`}
                  onClick={() => handleCoverClick(cover)}
                  disabled={purchasing}
                  style={cover.swatch}
                  className={cn(
                    "group relative h-14 overflow-hidden rounded-lg border transition-all hover:scale-[1.04] disabled:opacity-60 disabled:hover:scale-100",
                    coverId === cover.id ? "border-ring ring-2 ring-ring/40" : "border-border",
                  )}
                >
                  {!owned && (
                    <div className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 bg-black/55 text-white backdrop-blur-[1px]">
                      {purchasing ? (
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
                      ) : (
                        <>
                          <Lock className="h-3 w-3" />
                          <span className="text-[9px] font-semibold">{formatCoverPrice(cover.price)}</span>
                        </>
                      )}
                    </div>
                  )}
                  <span
                    role="button"
                    title="Preview"
                    onClick={(e) => {
                      e.stopPropagation();
                      setPreviewCover(cover);
                    }}
                    className="absolute left-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/55 text-white opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100"
                  >
                    <Eye className="h-2.5 w-2.5" />
                  </span>
                </button>
              );
            })}
          </div>

          {error && <p className="mt-2 text-[11px] text-destructive">{error}</p>}

          <div className="mt-2 flex items-center justify-between border-t border-border/60 pt-2">
            <button
              type="button"
              onClick={() => setCreateOpen(true)}
              className="flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground"
            >
              <Plus className="h-3 w-3" />
              Create design
            </button>
            <Link
              href="/notes/marketplace"
              onClick={() => setOpen(false)}
              className="flex items-center gap-1 text-[11px] font-medium text-primary hover:underline"
            >
              <Sparkles className="h-3 w-3" />
              Marketplace
            </Link>
          </div>
          <p className="mt-1.5 text-[10.5px] text-muted-foreground">
            {fullAccess ? "Owner — every design unlocked" : "3 designs free, the rest unlock individually"}
          </p>
        </div>
      )}

      <NoteDesignPreviewModal cover={previewCover} open={!!previewCover} onClose={() => setPreviewCover(null)} />
      <CreateDesignModal open={createOpen} onClose={() => setCreateOpen(false)} onCreated={() => void refetchDesigns()} />
    </div>
  );
}