"use client";

import { useEffect, useState, useTransition } from "react";
import { assignPhotoFolderAction } from "@/lib/actions/admin";

type Entry = { name: string; path: string; isDirectory: boolean };

export function NextcloudFolderBrowser({
  clientId,
  orderId,
  onDone,
}: {
  clientId: string;
  orderId?: string;
  onDone: () => void;
}) {
  const [path, setPath] = useState<string | null>(null);
  const [entries, setEntries] = useState<Entry[]>([]);
  const [loading, setLoading] = useState(true);
  const [pending, startTransition] = useTransition();

  useEffect(() => {
    setLoading(true);
    const url = path ? `/api/admin/nextcloud/browse?path=${encodeURIComponent(path)}` : "/api/admin/nextcloud/browse";
    fetch(url)
      .then((r) => r.json())
      .then((data) => {
        setPath(data.path);
        setEntries(data.entries || []);
      })
      .finally(() => setLoading(false));
  }, [path]);

  const segments = (path || "").split("/").filter(Boolean);
  const [label, setLabel] = useState("");
  const [assignedAt, setAssignedAt] = useState(() => new Date().toISOString().slice(0, 10));

  useEffect(() => {
    setLabel(segments[segments.length - 1] || "");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [path]);

  return (
    <div className="border border-white/15 rounded-lg p-4 mt-2">
      <div className="flex items-center justify-between mb-3">
        <p className="text-xs text-[var(--rk-ink-muted)] break-all">{path}</p>
        <button onClick={onDone} className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]">
          ✕
        </button>
      </div>

      {segments.length > 1 && (
        <button
          onClick={() => setPath("/" + segments.slice(0, -1).join("/"))}
          className="text-xs mb-2 text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]"
        >
          ← zurück
        </button>
      )}

      {loading ? (
        <p className="text-xs text-[var(--rk-ink-muted)]">Lädt…</p>
      ) : (
        <ul className="flex flex-col gap-1 max-h-52 overflow-y-auto">
          {entries.map((e) => (
            <li key={e.path}>
              <button
                onClick={() => setPath(e.path)}
                className="text-xs text-left w-full px-2 py-1 rounded hover:bg-white/5"
              >
                📁 {e.name}
              </button>
            </li>
          ))}
          {entries.length === 0 && <li className="text-xs text-[var(--rk-ink-muted)]">Keine Unterordner.</li>}
        </ul>
      )}

      {path && (
        <div className="mt-3 flex flex-col gap-2 border-t border-white/10 pt-3">
          <label className="flex flex-col gap-1 text-xs">
            <span className="text-[var(--rk-ink-muted)]">Titel (für den Kunden sichtbar)</span>
            <input
              value={label}
              onChange={(e) => setLabel(e.target.value)}
              placeholder="z. B. Convention Shooting Mai 2026"
              className="bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1 text-xs">
            <span className="text-[var(--rk-ink-muted)]">Datum der Fotos</span>
            <input
              type="date"
              value={assignedAt}
              onChange={(e) => setAssignedAt(e.target.value)}
              className="bg-transparent border border-white/15 rounded-lg px-2.5 py-1.5 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
        </div>
      )}

      <button
        disabled={pending || !path}
        onClick={() =>
          startTransition(async () => {
            await assignPhotoFolderAction(clientId, path!, label || path!, assignedAt, orderId);
            onDone();
          })
        }
        className="mt-3 text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
      >
        Diesen Ordner zuweisen
      </button>
    </div>
  );
}