"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { moveFileAction, renameFileAction } from "@/lib/cloud/actions";
import { KIND_COLOR, KIND_ICON, kindOf } from "@/lib/cloud/format";
import type { FileDTO } from "@/lib/cloud/queries";

/** Nur Umbenennen und Verschieben — Freigaben haben ihren eigenen Dialog. */
export function FileEditDialog({
  file,
  folders,
  onClose,
}: {
  file: FileDTO;
  folders: { id: string; name: string; parentId: string | null }[];
  onClose: () => void;
}) {
  const router = useRouter();
  const kind = kindOf(file.mime, file.name);

  const [name, setName] = useState(file.name);
  const [folderId, setFolderId] = useState<string | null>(file.folderId);
  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);
    if (name !== file.name) {
      const res = await renameFileAction(file.id, name);
      if (res.error) {
        setSaving(false);
        return setError(res.error);
      }
    }
    if (folderId !== file.folderId) {
      const res = await moveFileAction(file.id, folderId);
      if (res.error) {
        setSaving(false);
        return setError(res.error);
      }
    }
    setSaving(false);
    onClose();
    router.refresh();
  };

  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: KIND_COLOR[kind], background: `${KIND_COLOR[kind]}1a` }}
          >
            <Icon name={KIND_ICON[kind]} size={18} />
          </span>
          <div className="min-w-0 flex-1">
            <h3 className="leading-tight">Datei bearbeiten</h3>
            <p className="text-muted mt-1 truncate text-sm">{file.name}</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)}
              autoFocus
            />
          </div>

          <div className="field">
            <label className="label">Ordner</label>
            <select
              className="select"
              value={folderId ?? ""}
              onChange={(e) => setFolderId(e.target.value || null)}
            >
              <option value="">Persönliche Ablage</option>
              {folders.map((f) => (
                <option key={f.id} value={f.id}>
                  {f.name}
                </option>
              ))}
            </select>
          </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 …" : "Speichern"}
          </button>
        </div>
      </div>
    </div>
  );
}