"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { adminDeleteCharacterWishAction, updateCharacterWishStatusAction } from "@/lib/actions/characterWishes";
import { formatDateDE } from "@/lib/orderConstants";
import { WISH_STATUSES, WISH_STATUS_COLORS, type WishStatus } from "@/lib/characterWishStatus";

const STATUS_LABELS: Record<WishStatus, string> = {
  offen: "Offen",
  angenommen: "Angenommen",
  abgelehnt: "Abgelehnt",
  umgesetzt: "Umgesetzt",
};
const optionStyle = { backgroundColor: "#17171a", color: "#f5f5f4" };

type Entry = {
  id: string;
  clientName: string;
  fandom: string;
  note: string;
  createdAt: string;
  status: WishStatus;
};

export function AdminWishlistRow({
  character,
  entries,
  canDelete,
}: {
  character: string;
  entries: Entry[];
  canDelete: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <details className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5">
      <summary className="flex items-center justify-between gap-3 cursor-pointer list-none">
        <p className="text-sm">
          {character}
          {entries[0]?.fandom && <span className="text-[var(--rk-ink-muted)]"> · {entries[0].fandom}</span>}
        </p>
        <span className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] shrink-0">
          {entries.length}× gewünscht
        </span>
      </summary>
      <div className="mt-4 pt-4 border-t border-white/10 flex flex-col gap-3" onClick={(e) => e.stopPropagation()}>
        {entries.map((entry) => (
          <div key={entry.id} className="flex flex-wrap items-start justify-between gap-3 text-sm">
            <div className="min-w-0">
              <p className="text-[var(--rk-ink)]">{entry.clientName}</p>
              {entry.note && <p className="text-xs text-[var(--rk-ink-muted)] mt-0.5">{entry.note}</p>}
              <p className="text-[0.65rem] text-[var(--rk-ink-muted)] opacity-70 mt-0.5">
                {formatDateDE(new Date(entry.createdAt))}
              </p>
            </div>
            <div className="flex shrink-0 items-center gap-3">
              <select
                value={entry.status}
                disabled={pending}
                onChange={(e) => {
                  const status = e.target.value;
                  startTransition(async () => {
                    await updateCharacterWishStatusAction(entry.id, status);
                    router.refresh();
                  });
                }}
                className="rounded-lg border border-white/15 bg-transparent px-2 py-1 text-xs [color-scheme:dark] focus:border-white/50 focus:outline-none disabled:opacity-50"
                style={{ color: WISH_STATUS_COLORS[entry.status] }}
              >
                {WISH_STATUSES.map((s) => (
                  <option key={s} value={s} style={optionStyle}>
                    {STATUS_LABELS[s]}
                  </option>
                ))}
              </select>
              {canDelete && (
                <button
                  type="button"
                  disabled={pending}
                  onClick={() => {
                    if (confirm("Diesen Wunsch entfernen?")) {
                      startTransition(async () => {
                        await adminDeleteCharacterWishAction(entry.id);
                        router.refresh();
                      });
                    }
                  }}
                  className="text-xs text-red-400/80 hover:text-red-400 disabled:opacity-50"
                >
                  Löschen
                </button>
              )}
            </div>
          </div>
        ))}
      </div>
    </details>
  );
}