"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { NextcloudFolderBrowser } from "@/components/admin/NextcloudFolderBrowser";
import { removePhotoFolderAction, updatePhotoFolderAction, movePhotoFolderAction } from "@/lib/actions/admin";
import { formatDateDE } from "@/lib/orderConstants";

type Folder = { id: string; label: string; nextcloudPath: string; assignedAt: string; released: boolean; orderId: string | null };
type OrderOption = { id: string; label: string };

export function AdminPhotoPanel({
  clientId,
  orderId,
  orders,
  folders,
}: {
  clientId: string;
  orderId?: string;
  orders: OrderOption[];
  folders: Folder[];
}) {
  const [browsing, setBrowsing] = useState(false);
  const [editingId, setEditingId] = useState<string | null>(null);
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="mt-4 border-t border-white/10 pt-4">
      <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">Foto-Ordner</p>

      {folders.length > 0 && (
        <ul className="flex flex-col gap-2 mb-3">
          {folders.map((f, i) => (
            <li key={f.id} className="border border-white/10 rounded-lg p-3">
              <div className="flex items-center gap-2">
                <div className="flex flex-col gap-0.5 shrink-0">
                  <button
                    disabled={pending || i === 0}
                    onClick={() => startTransition(async () => { await movePhotoFolderAction(f.id, "up"); router.refresh(); })}
                    className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-30"
                    title="Nach oben"
                  >
                    ▲
                  </button>
                  <button
                    disabled={pending || i === folders.length - 1}
                    onClick={() => startTransition(async () => { await movePhotoFolderAction(f.id, "down"); router.refresh(); })}
                    className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-30"
                    title="Nach unten"
                  >
                    ▼
                  </button>
                </div>
                <Link href={`/de/admin/folders/${f.id}`} className="flex-1 min-w-0">
                  <p className="text-sm truncate">📁 {f.label || f.nextcloudPath}</p>
                  <p className="text-xs text-[var(--rk-ink-muted)] flex items-center gap-2">
                    {formatDateDE(new Date(f.assignedAt))}
                    {!f.released && (
                      <span className="text-amber-400">· nicht freigegeben</span>
                    )}
                  </p>
                </Link>
                <div className="flex items-center gap-3 shrink-0">
                  <button
                    onClick={() => setEditingId(editingId === f.id ? null : f.id)}
                    className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]"
                  >
                    Bearbeiten
                  </button>
                  <button
                    disabled={pending}
                    onClick={() => startTransition(async () => { await removePhotoFolderAction(f.id); router.refresh(); })}
                    className="text-xs text-[var(--rk-ink-muted)] hover:text-red-400 disabled:opacity-50"
                  >
                    entfernen
                  </button>
                </div>
              </div>

              {editingId === f.id && (
                <form
                  onSubmit={(e) => {
                    e.preventDefault();
                    const data = new FormData(e.currentTarget);
                    startTransition(async () => {
                      await updatePhotoFolderAction(f.id, data);
                      setEditingId(null);
                      router.refresh();
                    });
                  }}
                  className="mt-3 flex flex-wrap gap-2 items-end border-t border-white/10 pt-3"
                >
                  <label className="flex flex-col gap-1 text-xs">
                    <span className="text-[var(--rk-ink-muted)]">Titel</span>
                    <input
                      name="label"
                      defaultValue={f.label}
                      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</span>
                    <input
                      name="assignedAt"
                      type="date"
                      defaultValue={f.assignedAt.slice(0, 10)}
                      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>
                  {orders.length > 0 && (
                    <label className="flex flex-col gap-1 text-xs">
                      <span className="text-[var(--rk-ink-muted)]">Zugeordneter Auftrag</span>
                      <select
                        name="orderId"
                        defaultValue={f.orderId ?? ""}
                        className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-sm focus:outline-none focus:border-white/50"
                      >
                        <option value="">Keinem Auftrag zugeordnet</option>
                        {orders.map((o) => (
                          <option key={o.id} value={o.id}>
                            {o.label}
                          </option>
                        ))}
                      </select>
                    </label>
                  )}
                  <button
                    type="submit"
                    disabled={pending}
                    className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
                  >
                    Speichern
                  </button>
                </form>
              )}
            </li>
          ))}
        </ul>
      )}

      {browsing ? (
        <NextcloudFolderBrowser
          clientId={clientId}
          orderId={orderId}
          onDone={() => {
            setBrowsing(false);
            router.refresh();
          }}
        />
      ) : (
        <button
          onClick={() => setBrowsing(true)}
          className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white"
        >
          Ordner zuweisen
        </button>
      )}
    </div>
  );
}