"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { createTestimonialFromFeedbackAction, createQuickReviewFromFeedbackAction } from "@/lib/actions/feedback";
import { formatDateDE } from "@/lib/orderConstants";

export function FeedbackRow({
  item,
  canConvertToTestimonial,
}: {
  canConvertToTestimonial: boolean;
  item: {
    id: string;
    clientName: string;
    shootingType: string;
    rating: number;
    comment: string;
    allowTestimonial: boolean;
    usedForTestimonial: boolean;
    usedForQuickReview: boolean;
    submittedAt: string | null;
    orderId: string;
  };
}) {
  const [pending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="bg-[var(--rk-surface)] border border-white/10 rounded-2xl p-5 flex flex-col gap-2">
      <div className="flex items-start justify-between gap-3 flex-wrap">
        <div>
          <p className="text-sm">
            {item.clientName}
            {item.shootingType && <span className="text-[var(--rk-ink-muted)]"> · {item.shootingType}</span>}
          </p>
          <p className="text-xs text-[var(--rk-ink-muted)]">
            {item.submittedAt ? formatDateDE(new Date(item.submittedAt)) : ""}
          </p>
        </div>
        <div className="flex items-center gap-3 shrink-0">
          <span style={{ color: "#f5c518" }} className="text-sm tracking-wider">
            {"★".repeat(item.rating)}
            <span className="text-[var(--rk-ink-muted)]">{"★".repeat(5 - item.rating)}</span>
          </span>
          <a
            href={`/de/admin/orders/${item.orderId}`}
            className="text-xs text-[var(--rk-ink-muted)] hover:text-[var(--rk-ink)] underline"
          >
            Auftrag ansehen
          </a>
        </div>
      </div>

      {item.comment && <p className="text-sm text-[var(--rk-ink)] leading-relaxed">{item.comment}</p>}

      {item.allowTestimonial && (
        <div className="mt-1 flex flex-wrap items-center gap-2">
          {item.usedForTestimonial ? (
            <span className="text-xs text-emerald-400">✓ Als Kundenstimme übernommen (ausgeblendet, bitte in „Bewertungen" gegenlesen)</span>
          ) : item.comment && canConvertToTestimonial ? (
            <button
              disabled={pending}
              onClick={() => startTransition(async () => { await createTestimonialFromFeedbackAction(item.id); router.refresh(); })}
              className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
            >
              Als Kundenstimme übernehmen
            </button>
          ) : null}

          {item.usedForQuickReview ? (
            <span className="text-xs text-emerald-400">✓ Sterne-Bewertung übernommen</span>
          ) : canConvertToTestimonial ? (
            <button
              disabled={pending}
              onClick={() => startTransition(async () => { await createQuickReviewFromFeedbackAction(item.id); router.refresh(); })}
              className="text-xs border border-white/30 rounded-lg px-3 py-1.5 hover:border-white disabled:opacity-50"
              title="Fließt sofort und sichtbar in den öffentlichen Durchschnitt ein — kein weiterer Freigabe-Schritt nötig."
            >
              Als Sterne-Bewertung freigeben
            </button>
          ) : null}
        </div>
      )}
    </div>
  );
}