"use client";

import { useState, useTransition } from "react";
import { rejectOrderAction, unrejectOrderAction } from "@/lib/actions/admin";
import { formatDateTimeDE } from "@/lib/orderConstants";

export function RejectOrderPanel({
  orderId,
  rejected,
  rejectionReason,
  rejectionNote,
  rejectedAt,
  reasons,
}: {
  orderId: string;
  rejected: boolean;
  rejectionReason?: string;
  rejectionNote?: string;
  rejectedAt?: string | null;
  reasons: { id: string; label: string }[];
}) {
  const [pending, startTransition] = useTransition();
  const [open, setOpen] = useState(false);
  const [reasonId, setReasonId] = useState(reasons[0]?.id ?? "");
  const [note, setNote] = useState("");

  if (rejected) {
    return (
      <div className="mt-4 border-t border-white/10 pt-4">
        <p className="text-xs uppercase tracking-[0.1em] text-red-400 mb-1">Abgelehnt</p>
        <p className="text-sm">
          {rejectionReason}
          {rejectionNote ? ` — ${rejectionNote}` : ""}
        </p>
        {rejectedAt && (
          <p className="text-[0.65rem] text-[var(--rk-ink-muted)] mt-1">{formatDateTimeDE(new Date(rejectedAt))}</p>
        )}
        <button
          disabled={pending}
          onClick={() => startTransition(() => unrejectOrderAction(orderId))}
          className="mt-2 text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] disabled:opacity-50"
        >
          Ablehnung aufheben
        </button>
      </div>
    );
  }

  return (
    <div className="mt-4 border-t border-white/10 pt-4">
      {!open ? (
        <button
          onClick={() => setOpen(true)}
          className="text-xs border border-red-400/40 text-red-400 rounded-lg px-3 py-1.5 hover:bg-red-400/10"
        >
          Auftrag ablehnen
        </button>
      ) : (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            if (!reasonId) return;
            startTransition(() => {
              rejectOrderAction(orderId, reasonId, note);
              setOpen(false);
              setNote("");
            });
          }}
          className="flex flex-wrap gap-2 items-center"
        >
          <select
            value={reasonId}
            onChange={(e) => setReasonId(e.target.value)}
            required
            className="bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:border-white/50"
          >
            {reasons.length === 0 && <option value="">Keine Gründe angelegt</option>}
            {reasons.map((r) => (
              <option key={r.id} value={r.id}>
                {r.label}
              </option>
            ))}
          </select>
          <input
            type="text"
            placeholder="Notiz (optional)"
            value={note}
            onChange={(e) => setNote(e.target.value)}
            className="flex-1 min-w-[8rem] bg-[var(--rk-bg)] border border-white/15 rounded-lg px-2.5 py-1.5 text-xs focus:outline-none focus:border-white/50"
          />
          <button
            type="submit"
            disabled={pending || !reasonId}
            className="text-xs border border-red-400/40 text-red-400 rounded-lg px-3 py-1.5 hover:bg-red-400/10 disabled:opacity-50"
          >
            Bestätigen
          </button>
          <button
            type="button"
            onClick={() => setOpen(false)}
            className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]"
          >
            Abbrechen
          </button>
        </form>
      )}
    </div>
  );
}