"use client";

import { useState, useTransition } from "react";
import { useTranslations } from "next-intl";
import { clientCancelOrderAction } from "@/lib/actions/orders";

export function ClientCancelOrderPanel({
  orderId,
  rejected,
  rejectedBy,
  rejectionReason,
  rejectionNote,
  canCancel,
}: {
  orderId: string;
  rejected: boolean;
  rejectedBy?: "admin" | "client" | null;
  rejectionReason?: string;
  rejectionNote?: string;
  canCancel: boolean;
}) {
  const t = useTranslations("orders");
  const [pending, startTransition] = useTransition();
  const [open, setOpen] = useState(false);
  const [reason, setReason] = useState("");

  if (rejected) {
    return (
      <div className="border border-white/10 rounded-xl p-5">
        <p className="text-sm text-red-400">
          {rejectedBy === "client" ? t("orderCancelledByYou") : t("orderCancelledByRakku")}
        </p>
        {rejectedBy === "admin" && rejectionReason && (
          <p className="mt-2 text-sm text-[var(--rk-ink-muted)]">
            {rejectionReason}
            {rejectionNote ? ` ${rejectionNote}` : ""}
          </p>
        )}
      </div>
    );
  }

  if (!canCancel) return null;

  if (!open) {
    return (
      <button
        onClick={() => setOpen(true)}
        className="self-start text-xs border border-red-400/40 text-red-400 rounded-lg px-4 py-2 hover:bg-red-400/10 transition-colors"
      >
        {t("cancelOrder")}
      </button>
    );
  }

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        if (!reason.trim()) return;
        startTransition(() => {
          clientCancelOrderAction(orderId, reason);
          setOpen(false);
        });
      }}
      className="flex flex-col gap-2 border border-white/10 rounded-xl p-5"
    >
      <textarea
        value={reason}
        onChange={(e) => setReason(e.target.value)}
        placeholder={t("cancelReasonPlaceholder")}
        required
        rows={3}
        className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
      />
      <div className="flex gap-2">
        <button
          type="submit"
          disabled={pending}
          className="text-xs border border-red-400/40 text-red-400 rounded-lg px-4 py-2 hover:bg-red-400/10 disabled:opacity-50"
        >
          {t("cancelConfirm")}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)]"
        >
          {t("cancelCancel")}
        </button>
      </div>
    </form>
  );
}