"use client";

import { useRef, useState } from "react";
import { ImagePlus, Loader2, Palette } from "lucide-react";
import { Modal } from "@/components/ui/modal";
import { cn } from "@/lib/utils";
import { ColorWheelPicker } from "@/components/ui/color-wheel-picker";
import {
  CATEGORY_LABELS,
  NOTE_COVER_CATEGORIES,
  type NoteCoverCategory,
} from "@/lib/notes/note-covers";

interface CreateDesignModalProps {
  open: boolean;
  onClose: () => void;
  onCreated: () => void;
}

const TEXT_COLOR_PRESETS = ["#ffffff", "#0a0a0a", "#fde68a", "#38bdf8", "#f472b6", "#4ade80"];

export function CreateDesignModal({ open, onClose, onCreated }: CreateDesignModalProps) {
  const [name, setName] = useState("");
  const [category, setCategory] = useState<NoteCoverCategory>("custom");
  const [tone, setTone] = useState<"light" | "dark">("dark");
  const [editorSurface, setEditorSurface] = useState<"glass" | "solid">("glass");
  const [textColor, setTextColor] = useState<string | null>(null);
  const [wheelOpen, setWheelOpen] = useState(false);
  const [priceEuros, setPriceEuros] = useState("0");
  const [file, setFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);

  function handleFileChange(selected: File | null) {
    setFile(selected);
    setPreviewUrl(selected ? URL.createObjectURL(selected) : null);
  }

  function reset() {
    setName("");
    setCategory("custom");
    setTone("dark");
    setEditorSurface("glass");
    setTextColor(null);
    setWheelOpen(false);
    setPriceEuros("0");
    setFile(null);
    setPreviewUrl(null);
    setError(null);
  }

  async function handleSubmit() {
    if (!name.trim()) return setError("Give your design a name.");
    if (!file) return setError("Pick an image to use as the background.");

    setSubmitting(true);
    setError(null);
    try {
      const formData = new FormData();
      formData.append("name", name.trim());
      formData.append("category", category);
      formData.append("tone", tone);
      formData.append("editor_surface", editorSurface);
      if (textColor) formData.append("text_color", textColor);
      formData.append("price_euros", priceEuros || "0");
      formData.append("file", file);

      const res = await fetch("/api/notes/designs", { method: "POST", body: formData });
      const json = await res.json();
      if (!res.ok) throw new Error(json.error || "Design could not be uploaded");

      reset();
      onCreated();
      onClose();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Design could not be uploaded");
    } finally {
      setSubmitting(false);
    }
  }

  const toneTextClass = textColor ? undefined : tone === "light" ? "text-neutral-900" : "text-white";

  return (
    <Modal
      open={open}
      onClose={() => {
        if (!submitting) {
          reset();
          onClose();
        }
      }}
      title="Create your own design"
      description="Upload an image to use as a note background. Publish it and it shows up for everyone in the marketplace."
      className="max-w-lg"
    >
      <div className="space-y-4">
        <button
          type="button"
          onClick={() => fileInputRef.current?.click()}
          className={cn(
            "relative flex h-32 w-full items-center justify-center overflow-hidden rounded-xl border border-dashed border-border transition-colors hover:border-ring",
            !previewUrl && "bg-muted/40",
          )}
          style={previewUrl ? { backgroundImage: `url(${previewUrl})`, backgroundSize: "cover", backgroundPosition: "center" } : undefined}
        >
          {previewUrl ? (
            <span
              className={cn("rounded-md bg-black/40 px-3 py-1.5 text-xs font-semibold backdrop-blur-sm", toneTextClass)}
              style={textColor ? { color: textColor } : undefined}
            >
              Change image
            </span>
          ) : (
            <span className="flex flex-col items-center gap-1.5 text-muted-foreground">
              <ImagePlus className="h-5 w-5" />
              <span className="text-xs font-medium">Click to upload an image</span>
            </span>
          )}
          <input
            ref={fileInputRef}
            type="file"
            accept="image/*"
            className="hidden"
            onChange={(e) => handleFileChange(e.target.files?.[0] ?? null)}
          />
        </button>

        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">Name</label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="e.g. Midnight Marble"
            className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
          />
        </div>

        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Category</label>
            <select
              value={category}
              onChange={(e) => setCategory(e.target.value as NoteCoverCategory)}
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
            >
              {NOTE_COVER_CATEGORIES.map((cat) => (
                <option key={cat} value={cat}>
                  {CATEGORY_LABELS[cat]}
                </option>
              ))}
            </select>
          </div>
          <div className="space-y-1.5">
            <label className="text-xs font-medium text-muted-foreground">Text tone</label>
            <div className="flex overflow-hidden rounded-lg border border-border">
              {(["dark", "light"] as const).map((t) => (
                <button
                  key={t}
                  type="button"
                  onClick={() => setTone(t)}
                  className={cn(
                    "flex-1 py-2 text-sm font-medium transition-colors",
                    tone === t ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50",
                  )}
                >
                  {t === "dark" ? "Light text" : "Dark text"}
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">Writing area background</label>
          <div className="flex overflow-hidden rounded-lg border border-border">
            {(["glass", "solid"] as const).map((s) => (
              <button
                key={s}
                type="button"
                onClick={() => setEditorSurface(s)}
                className={cn(
                  "flex-1 py-2 text-sm font-medium transition-colors",
                  editorSurface === s ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent/50",
                )}
              >
                {s === "glass" ? "Blurred glass" : "Normal / solid"}
              </button>
            ))}
          </div>
          <p className="text-[11px] text-muted-foreground">
            Blurred glass lets the image show through behind your writing. Solid gives a normal opaque card.
          </p>
        </div>

        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">Text color (optional — overrides tone)</label>
          <div className="flex flex-wrap items-center gap-2">
            <button
              type="button"
              onClick={() => setTextColor(null)}
              className={cn(
                "rounded-lg border px-2.5 py-1.5 text-[11.5px] font-medium transition-colors",
                !textColor ? "border-ring bg-accent" : "border-border text-muted-foreground hover:bg-accent/50",
              )}
            >
              Auto
            </button>
            {TEXT_COLOR_PRESETS.map((color) => (
              <button
                key={color}
                type="button"
                onClick={() => setTextColor(color)}
                title={color}
                style={{ backgroundColor: color }}
                className={cn(
                  "h-7 w-7 rounded-full border-2 transition-transform hover:scale-110",
                  textColor === color ? "border-ring" : "border-border",
                )}
              />
            ))}
            <button
              type="button"
              onClick={() => setWheelOpen((v) => !v)}
              title="Custom color"
              className={cn(
                "flex h-7 w-7 items-center justify-center rounded-full border-2 transition-transform hover:scale-110",
                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 && (
            <div className="flex justify-center rounded-lg border border-border bg-background/60 p-3">
              <ColorWheelPicker value={textColor || "#ffffff"} onChange={setTextColor} />
            </div>
          )}
        </div>

        <div className="space-y-1.5">
          <label className="text-xs font-medium text-muted-foreground">Price (€, 0 = free)</label>
          <input
            type="number"
            min={0}
            step={0.5}
            value={priceEuros}
            onChange={(e) => setPriceEuros(e.target.value)}
            className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-ring"
          />
        </div>

        {error && <p className="text-xs text-destructive">{error}</p>}

        <button
          type="button"
          onClick={() => void handleSubmit()}
          disabled={submitting}
          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 disabled:opacity-60"
        >
          {submitting && <Loader2 className="h-4 w-4 animate-spin" />}
          {submitting ? "Publishing…" : "Publish to marketplace"}
        </button>
      </div>
    </Modal>
  );
}