const LS_KEY = "pinboard.v1";

function saveToStorage(data) {
  try {
    localStorage.setItem(LS_KEY, JSON.stringify(data));
  } catch (e) {
    console.error("Save error", e);
  }
}
function loadFromStorage() {
  try {
    const raw = localStorage.getItem(LS_KEY);
    return raw ? JSON.parse(raw) : null;
  } catch (e) {
    console.error("Load error", e);
    return null;
  }
}

function uid(prefix = "id") {
  return `${prefix}_${Math.random().toString(36).slice(2, 9)}_${Date.now()}`;
}

function fileToDataUrl(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

// ---------- Main App ----------
export default function App() {
  const [boards, setBoards] = useState(() => {
    const saved = loadFromStorage();
    return saved?.boards || [{ id: "default", name: "All Pins" }];
  });
  const [pins, setPins] = useState(() => loadFromStorage()?.pins || []);
  const [activeBoard, setActiveBoard] = useState("default");
  const [query, setQuery] = useState("");
  const [tagFilter, setTagFilter] = useState("");
  const [modalPin, setModalPin] = useState(null);
  const [showAddPin, setShowAddPin] = useState(false);
  const [showNewBoard, setShowNewBoard] = useState(false);

  // Persist
  useEffect(() => {
    saveToStorage({ boards, pins });
  }, [boards, pins]);

  const allTags = useMemo(() => {
    const s = new Set();
    pins.forEach((p) => p.tags?.forEach((t) => s.add(t)));
    return Array.from(s).sort();
  }, [pins]);

  const filteredPins = useMemo(() => {
    return pins
      .filter((p) => (activeBoard === "default" ? true : p.boardId === activeBoard))
      .filter((p) =>
        query
          ? (p.title + " " + (p.notes || "") + " " + (p.tags || []).join(" "))
              .toLowerCase()
              .includes(query.toLowerCase())
          : true
      )
      .filter((p) => (tagFilter ? p.tags?.includes(tagFilter) : true))
      .sort((a, b) => b.createdAt - a.createdAt);
  }, [pins, activeBoard, query, tagFilter]);

  function addBoard(name) {
    const newBoard = { id: uid("board"), name: name.trim() || "Untitled" };
    setBoards((b) => [...b, newBoard]);
    setActiveBoard(newBoard.id);
    setShowNewBoard(false);
  }

  async function addPinsFromFiles(files, meta = {}) {
    const list = Array.from(files).filter((f) => f.type.startsWith("image/"));
    const newItems = [];
    for (const file of list) {
      const dataUrl = await fileToDataUrl(file);
      const pin = {
        id: uid("pin"),
        title: meta.title || file.name.replace(/\.[^.]+$/, ""),
        notes: meta.notes || "",
        tags: meta.tags || [],
        boardId: meta.boardId || activeBoard || "default",
        image: dataUrl, // Data URL (base64)
        createdAt: Date.now(),
      };
      newItems.push(pin);
    }
    setPins((prev) => [...newItems, ...prev]);
    setShowAddPin(false);
  }

  function deletePin(id) {
    setPins((prev) => prev.filter((p) => p.id !== id));
    setModalPin(null);
  }

  function updatePin(updated) {
    setPins((prev) => prev.map((p) => (p.id === updated.id ? updated : p)));
  }

  function movePinToBoard(pin, boardId) {
    updatePin({ ...pin, boardId });
  }

  // Drag & drop uploader
  const dropRef = useRef(null);
  useEffect(() => {
    const el = dropRef.current;
    if (!el) return;
    const prevent = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };
    const onDrop = async (e) => {
      prevent(e);
      if (e.dataTransfer.files?.length) {
        await addPinsFromFiles(e.dataTransfer.files, {});
      }
    };
    ["dragenter", "dragover", "dragleave", "drop"].forEach((ev) => el.addEventListener(ev, prevent));
    el.addEventListener("drop", onDrop);
    return () => {
      ["dragenter", "dragover", "dragleave", "drop"].forEach((ev) => el.removeEventListener(ev, prevent));
      el.removeEventListener("drop", onDrop);
    };
  }, []);

  return (
    <div className="min-h-screen bg-stone-100 text-stone-900">
      {/* Header */}
      <header className="sticky top-0 z-30 backdrop-blur bg-stone-100/80 border-b border-stone-200">
        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center gap-3">
          <Logo />
          <input
            type="search"
            placeholder="Search pins, notes, #tags…"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            className="flex-1 rounded-xl border border-stone-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-emerald-400"
          />
          <button onClick={() => setShowAddPin(true)} className="btn">Add Pin</button>
          <button onClick={() => setShowNewBoard(true)} className="btn-secondary">New Board</button>
        </div>
      </header>

      {/* Toolbar */}
      <div className="max-w-6xl mx-auto px-4 py-4 flex flex-wrap items-center gap-3">
        <BoardTabs boards={boards} active={activeBoard} onChange={setActiveBoard} />
        <div className="ml-auto flex items-center gap-2">
          <span className="text-sm text-stone-500">Filter tag</span>
          <select value={tagFilter} onChange={(e) => setTagFilter(e.target.value)} className="rounded-lg border border-stone-300 px-3 py-2">
            <option value="">All</option>
            {allTags.map((t) => (
              <option key={t} value={t}>{t}</option>
            ))}
          </select>
          {!!(query || tagFilter) && (
            <button className="btn-ghost" onClick={() => { setQuery(""); setTagFilter(""); }}>Clear</button>
          )}
        </div>
      </div>

      {/* Drop zone */}
      <div ref={dropRef} className="max-w-6xl mx-auto px-4">
        <div className="rounded-2xl border border-dashed border-stone-300 p-4 text-center text-stone-500">
          Drag & drop images here to add pins
        </div>
      </div>

      {/* Masonry Grid */}
      <main className="max-w-6xl mx-auto px-4 py-6">
        {filteredPins.length === 0 ? (
          <EmptyState onAdd={() => setShowAddPin(true)} />
        ) : (
          <MasonryGrid>
            {filteredPins.map((pin) => (
              <PinCard key={pin.id} pin={pin} boards={boards} onOpen={() => setModalPin(pin)} onMove={(b) => movePinToBoard(pin, b)} />
            ))}
          </MasonryGrid>
        )}
      </main>

      {/* Modals */}
      {showAddPin && (
        <AddPinModal
          boards={boards}
          defaultBoard={activeBoard}
          onClose={() => setShowAddPin(false)}
          onAdd={addPinsFromFiles}
        />
      )}
      {showNewBoard && (
        <NewBoardModal onClose={() => setShowNewBoard(false)} onCreate={addBoard} />
      )}
      {modalPin && (
        <PinModal
          pin={modalPin}
          boards={boards}
          onClose={() => setModalPin(null)}
          onDelete={() => deletePin(modalPin.id)}
          onSave={updatePin}
        />
      )}

      {/* Styles */}
      <style>{`
        .btn { @apply rounded-xl bg-emerald-600 text-white px-4 py-2 hover:scale-[1.03] active:scale-[0.98] transition; }
        .btn-secondary { @apply rounded-xl bg-stone-900 text-white px-4 py-2 hover:scale-[1.03] active:scale-[0.98] transition; }
        .btn-ghost { @apply rounded-xl bg-transparent border border-stone-300 px-3 py-2 hover:scale-[1.03] transition; }
        .tab { @apply px-3 py-1.5 rounded-full border border-stone-300 hover:bg-stone-200/60 cursor-pointer; }
        .tab-active { @apply bg-stone-900 text-white border-stone-900; }
        .masonry { column-count: 1; column-gap: 1rem; }
        @media (min-width: 640px) { .masonry { column-count: 2; } }
        @media (min-width: 1024px) { .masonry { column-count: 3; } }
        .masonry-item { break-inside: avoid; margin-bottom: 1rem; }
      `}</style>
    </div>
  );
}

// ---------- UI Bits ----------
function Logo() {
  return (
    <div className="flex items-center gap-2 select-none">
      <div className="h-8 w-8 rounded-2xl bg-emerald-600" />
      <div className="font-bold tracking-tight">Pinboard</div>
    </div>
  );
}

function BoardTabs({ boards, active, onChange }) {
  return (
    <div className="flex flex-wrap gap-2">
      {boards.map((b) => (
        <button
          key={b.id}
          className={`tab ${active === b.id ? "tab-active" : ""}`}
          onClick={() => onChange(b.id)}
          title={b.name}
        >
          {b.name}
        </button>
      ))}
    </div>
  );
}

function MasonryGrid({ children }) {
  return <div className="masonry">{children}</div>;
}

function PinCard({ pin, boards, onOpen, onMove }) {
  const [hover, setHover] = useState(false);
  return (
    <div className="masonry-item group rounded-2xl overflow-hidden border border-stone-200 bg-white shadow-sm">
      <div className="relative">
        <img
          src={pin.image}
          alt={pin.title}
          className={`w-full block transition-transform ${hover ? "scale-[1.03]" : ""}`}
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
          onClick={onOpen}
        />
        <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition">
          <select
            className="rounded-lg bg-white/90 border border-stone-300 px-2 py-1 text-sm"
            value={pin.boardId}
            onChange={(e) => onMove(e.target.value)}
            title="Move to board"
          >
            {boards.map((b) => (
              <option key={b.id} value={b.id}>{b.name}</option>
            ))}
          </select>
        </div>
      </div>
      <div className="p-3">
        <div className="font-medium truncate" title={pin.title}>{pin.title}</div>
        {pin.tags?.length ? (
          <div className="mt-1 flex flex-wrap gap-1">
            {pin.tags.map((t) => (
              <span key={t} className="text-xs px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">#{t}</span>
            ))}
          </div>
        ) : null}
      </div>
    </div>
  );
}

function EmptyState({ onAdd }) {
  return (
    <div className="text-center text-stone-500 border border-stone-200 rounded-2xl p-10 bg-white">
      <p className="mb-4">No pins yet. Add a few images to get started.</p>
      <button className="btn" onClick={onAdd}>Add your first pin</button>
    </div>
  );
}

function ModalShell({ children, onClose }) {
  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40" onClick={onClose}>
      <div className="w-full max-w-2xl" onClick={(e) => e.stopPropagation()}>
        <div className="rounded-2xl bg-white shadow-xl overflow-hidden border border-stone-200">
          {children}
        </div>
      </div>
    </div>
  );
}

function NewBoardModal({ onClose, onCreate }) {
  const [name, setName] = useState("");
  return (
    <ModalShell onClose={onClose}>
      <div className="p-4 flex flex-col gap-3">
        <h3 className="text-lg font-semibold">New Board</h3>
        <input className="rounded-lg border border-stone-300 px-3 py-2" placeholder="Board name" value={name} onChange={(e) => setName(e.target.value)} />
        <div className="flex gap-2 justify-end">
          <button className="btn-ghost" onClick={onClose}>Cancel</button>
          <button className="btn" onClick={() => onCreate(name)}>Create</button>
        </div>
      </div>
    </ModalShell>
  );
}

function AddPinModal({ onClose, onAdd, boards, defaultBoard }) {
  const [files, setFiles] = useState([]);
  const [title, setTitle] = useState("");
  const [notes, setNotes] = useState("");
  const [tags, setTags] = useState("");
  const [boardId, setBoardId] = useState(defaultBoard || "default");
  const inputRef = useRef(null);

  return (
    <ModalShell onClose={onClose}>
      <div className="p-4 flex flex-col gap-3">
        <h3 className="text-lg font-semibold">Add Pins</h3>
        <div className="rounded-xl border border-dashed border-stone-300 p-6 text-center">
          <p className="mb-2">Drag and drop images here, or</p>
          <button className="btn" onClick={() => inputRef.current?.click()}>Choose files</button>
          <input ref={inputRef} type="file" accept="image/*" multiple className="hidden" onChange={(e) => setFiles(Array.from(e.target.files || []))} />
          {files.length > 0 && (
            <div className="mt-3 text-sm text-stone-600">{files.length} file(s) selected</div>
          )}
        </div>
        <div className="grid sm:grid-cols-2 gap-3">
          <input className="rounded-lg border border-stone-300 px-3 py-2" placeholder="Title (optional)" value={title} onChange={(e) => setTitle(e.target.value)} />
          <select className="rounded-lg border border-stone-300 px-3 py-2" value={boardId} onChange={(e) => setBoardId(e.target.value)}>
            {boards.map((b) => (
              <option key={b.id} value={b.id}>{b.name}</option>
            ))}
          </select>
          <input className="rounded-lg border border-stone-300 px-3 py-2 sm:col-span-2" placeholder="Tags (comma or space separated)" value={tags} onChange={(e) => setTags(e.target.value)} />
          <textarea className="rounded-lg border border-stone-300 px-3 py-2 sm:col-span-2" rows={3} placeholder="Notes (optional)" value={notes} onChange={(e) => setNotes(e.target.value)} />
        </div>
        <div className="flex gap-2 justify-end">
          <button className="btn-ghost" onClick={onClose}>Cancel</button>
          <button
            className="btn"
            onClick={() =>
              onAdd(files, {
                title: title.trim() || undefined,
                notes: notes.trim() || "",
                tags: tags
                  .split(/[ ,]+/)
                  .map((t) => t.trim())
                  .filter(Boolean),
                boardId,
              })
            }
            disabled={files.length === 0}
          >
            Add {files.length ? `(${files.length})` : ""}
          </button>
        </div>
      </div>
    </ModalShell>
  );
}

function PinModal({ pin, onClose, onDelete, onSave, boards }) {
  const [title, setTitle] = useState(pin.title);
  const [notes, setNotes] = useState(pin.notes || "");
  const [tags, setTags] = useState((pin.tags || []).join(", "));
  const [boardId, setBoardId] = useState(pin.boardId);

  return (
    <ModalShell onClose={onClose}>
      <div className="grid md:grid-cols-2 gap-0">
        <div className="bg-stone-50 p-4 flex items-center justify-center">
          <img src={pin.image} alt={pin.title} className="max-h-[70vh] w-auto rounded-xl border border-stone-200" />
        </div>
        <div className="p-4 flex flex-col gap-3">
          <input className="rounded-lg border border-stone-300 px-3 py-2" value={title} onChange={(e) => setTitle(e.target.value)} />
          <select className="rounded-lg border border-stone-300 px-3 py-2" value={boardId} onChange={(e) => setBoardId(e.target.value)}>
            {boards.map((b) => (
              <option key={b.id} value={b.id}>{b.name}</option>
            ))}
          </select>
          <textarea className="rounded-lg border border-stone-300 px-3 py-2" rows={6} value={notes} onChange={(e) => setNotes(e.target.value)} />
          <input className="rounded-lg border border-stone-300 px-3 py-2" value={tags} onChange={(e) => setTags(e.target.value)} />
          <div className="flex gap-2 justify-between">
            <button className="btn-ghost" onClick={() => onDelete()}>Delete</button>
            <div className="flex gap-2">
              <a
                className="btn-ghost"
                href={pin.image}
                download={(title || "pin").replace(/\s+/g, "_") + ".png"}
              >
                Download
              </a>
              <button
                className="btn"
                onClick={() =>
                  onSave({
                    ...pin,
                    title: title.trim() || "Untitled",
                    notes,
                    tags: tags
                      .split(/[ ,]+/)
                      .map((t) => t.trim())
                      .filter(Boolean),
                    boardId,
                  })
                }
              >
                Save
              </button>
            </div>
          </div>
        </div>
      </div>
    </ModalShell>
  );
}