"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { reviewQmSubmissionAction, deleteQmSubmissionAction } from "@/lib/actions/qm";
import type { QmStatus } from "@/models/QmSubmission";
import { formatDateDE } from "@/lib/orderConstants";

const STATUS_LABELS: Record<QmStatus, string> = { pending: "In Prüfung", approved: "Freigegeben", rejected: "Abgelehnt" };
const STATUS_STYLES: Record<QmStatus, string> = {
  pending: "border-amber-400/40 text-amber-400",
  approved: "border-emerald-400/40 text-emerald-400",
  rejected: "border-red-400/40 text-red-400",
};

export function QmReviewCard({
  submission,
}: {
  submission: {
    id: string;
    title: string;
    description: string;
    submitterName: string;
    status: QmStatus;
    reviewNote: string;
    createdAt: string;
    attachmentUrl: string | null;
  };
}) {
  const [pending, startTransition] = useTransition();
  const [note, setNote] = useState(submission.reviewNote);
  const router = useRouter();

  function review(status: QmStatus) {
    startTransition(async () => {
      await reviewQmSubmissionAction(submission.id, status, note);
      router.refresh();
    });
  }

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5">
      <div className="flex items-start justify-between gap-3 mb-2">
        <div>
          <p className="text-sm font-medium">{submission.title}</p>
          <p className="text-xs text-[var(--rk-ink-muted)]">
            {submission.submitterName} · {formatDateDE(new Date(submission.createdAt))}
          </p>
        </div>
        <span className={`text-xs border rounded-full px-2.5 py-0.5 shrink-0 ${STATUS_STYLES[submission.status]}`}>
          {STATUS_LABELS[submission.status]}
        </span>
      </div>
      {submission.description && (
        <p className="text-sm text-[var(--rk-ink-muted)] whitespace-pre-line mb-2">{submission.description}</p>
      )}
      {submission.attachmentUrl && (
        <a
          href={submission.attachmentUrl}
          target="_blank"
          rel="noopener noreferrer"
          className="text-xs underline text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] mb-3 inline-block"
        >
          Anhang öffnen
        </a>
      )}

      <textarea
        value={note}
        onChange={(e) => setNote(e.target.value)}
        placeholder="Rückmeldung (optional)"
        rows={2}
        disabled={pending}
        className="w-full mt-2 bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50 resize-y"
      />
      <div className="flex items-center gap-2 mt-3">
        <button
          disabled={pending}
          onClick={() => review("approved")}
          className="text-xs border border-emerald-400/40 text-emerald-400 rounded-lg px-3 py-1.5 hover:bg-emerald-400/10 transition-colors disabled:opacity-50"
        >
          Freigeben
        </button>
        <button
          disabled={pending}
          onClick={() => review("rejected")}
          className="text-xs border border-red-400/40 text-red-400 rounded-lg px-3 py-1.5 hover:bg-red-400/10 transition-colors disabled:opacity-50"
        >
          Ablehnen
        </button>
        <button
          disabled={pending}
          onClick={() => {
            if (confirm("Diese Einreichung wirklich löschen?")) {
              startTransition(async () => {
                await deleteQmSubmissionAction(submission.id);
                router.refresh();
              });
            }
          }}
          className="text-xs text-[var(--rk-ink-muted)] hover:text-red-400 transition-colors ml-auto disabled:opacity-50"
        >
          Löschen
        </button>
      </div>
    </div>
  );
}