"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { setOrderUsageRightsAction } from "@/lib/actions/admin";
import { USAGE_RIGHTS_OPTIONS, USAGE_RIGHTS_LABELS, type UsageRights } from "@/lib/orderConstants";

export function UsageRightsSelect({ orderId, usageRights, canEdit }: { orderId: string; usageRights: UsageRights; canEdit: boolean }) {
  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">Modellfreigabe / Nutzungsrechte</p>
      {canEdit ? (
        <select
          value={usageRights}
          disabled={pending}
          onChange={(e) =>
            startTransition(async () => {
              await setOrderUsageRightsAction(orderId, e.target.value);
              router.refresh();
            })
          }
          className="w-full bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 disabled:opacity-50"
        >
          {USAGE_RIGHTS_OPTIONS.map((opt) => (
            <option key={opt} value={opt} className="bg-[var(--rk-bg)]">
              {USAGE_RIGHTS_LABELS[opt]}
            </option>
          ))}
        </select>
      ) : (
        <p className="text-sm">{USAGE_RIGHTS_LABELS[usageRights]}</p>
      )}
      <p className="text-xs text-[var(--rk-ink-muted)] mt-1.5">
        Fließt beim Erstellen des Standard-Vertrags als Schnappschuss mit ein, danach hier weiter änderbar (wirkt sich
        nicht rückwirkend auf bereits erstellte Verträge aus).
      </p>
    </div>
  );
}