"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { Swatches } from "@/components/ui/Swatches";
import { IconPicker } from "@/components/ui/IconPicker";
import { createFolderAction, renameFolderAction } from "@/lib/cloud/actions";
import type { FolderDTO } from "@/lib/cloud/queries";

export const FOLDER_ICONS = [
  "folder",
  "image",
  "video",
  "music",
  "document",
  "archive",
  "projects",
  "creators",
  "shield",
  "star",
];

export const DEFAULT_FOLDER_COLOR = "#ffc36b";

/** Nur Ordner-Eigenschaften — Freigaben laufen über den eigenen Dialog. */
export function FolderDialog({
  folder,
  parentId,
  onClose,
}: {
  /** null = neuer Ordner */
  folder: FolderDTO | null;
  parentId: string | null;
  onClose: () => void;
}) {
  const router = useRouter();
  const isNew = !folder;

  const [name, setName] = useState(folder?.name ?? "");
  const [color, setColor] = useState<string | null>(folder?.color ?? DEFAULT_FOLDER_COLOR);
  const [icon, setIcon] = useState(folder?.icon ?? "folder");
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const save = async () => {
    setError(null);
    if (!name.trim()) return setError("Name darf nicht leer sein.");

    setSaving(true);
    const res = isNew
      ? await createFolderAction(name, parentId, color, icon)
      : await renameFolderAction(folder!.id, name, color, icon);
    setSaving(false);

    if (res.error) return setError(res.error);
    onClose();
    router.refresh();
  };

  const accent = color ?? DEFAULT_FOLDER_COLOR;

  return (
    <div className="dialog-overlay" onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
      <div className="dialog-card animate-in" role="dialog" aria-modal="true">
        <div className="mb-4 flex items-start gap-3">
          <span
            className="vault-mark"
            style={{ color: accent, background: `${accent}1f`, borderColor: `${accent}44` }}
          >
            <Icon name={icon} size={18} />
          </span>
          <div className="min-w-0 flex-1">
            <h3 className="leading-tight">{isNew ? "Neuer Ordner" : "Ordner bearbeiten"}</h3>
            <p className="text-muted mt-1 truncate text-sm">
              {name.trim() || "Name, Farbe und Symbol festlegen"}
            </p>
          </div>
        </div>

        {error ? <p className="field-error mb-3">{error}</p> : null}

        <div className="flex flex-col gap-4">
          <div className="field">
            <label className="label">Name</label>
            <input
              className="input"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="z. B. Grafiken"
              autoFocus
              onKeyDown={(e) => {
                if (e.key === "Enter" && name.trim()) void save();
              }}
            />
          </div>

          <div className="field">
            <label className="label">Farbe</label>
            <Swatches value={color} onChange={setColor} />
          </div>

          <div className="field">
            <label className="label">Symbol</label>
            <IconPicker value={icon} onChange={setIcon} options={FOLDER_ICONS} />
          </div>
        </div>

        <div className="mt-5 flex items-center justify-end gap-2">
          <button className="btn btn-ghost" onClick={onClose} disabled={saving}>
            Abbrechen
          </button>
          <button
            className="btn btn-primary"
            onClick={() => void save()}
            disabled={saving || !name.trim()}
          >
            {saving ? "Speichern …" : isNew ? "Ordner erstellen" : "Speichern"}
          </button>
        </div>
      </div>
    </div>
  );
}