"use client";

import { useState } from "react";
import { Star, Check, Trash2, Pencil } from "lucide-react";
import { approveReview, deleteReview, updateReview } from "@/lib/actions/reviews";
import type { Review } from "@/generated/prisma/client";

export function ReviewRow({ review }: { review: Review }) {
  const [editing, setEditing] = useState(false);
  const [rating, setRating] = useState(review.rating);

  if (editing) {
    return (
      <form
        action={updateReview.bind(null, review.id)}
        onSubmit={() => setEditing(false)}
        className="flex flex-col gap-3 rounded-2xl border border-charcoal-950/10 bg-white p-5"
      >
        <input
          name="authorName"
          defaultValue={review.authorName}
          required
          maxLength={80}
          className="rounded-lg border border-charcoal-950/15 px-3 py-2 text-sm focus:border-gold-500 focus:outline-none"
        />
        <input type="hidden" name="rating" value={rating} />
        <div className="flex gap-1 text-gold-500">
          {Array.from({ length: 5 }).map((_, i) => {
            const value = i + 1;
            return (
              <button key={value} type="button" onClick={() => setRating(value)}>
                <Star size={20} fill={value <= rating ? "currentColor" : "none"} />
              </button>
            );
          })}
        </div>
        <textarea
          name="quote"
          defaultValue={review.quote}
          required
          minLength={10}
          maxLength={600}
          rows={3}
          className="rounded-lg border border-charcoal-950/15 px-3 py-2 text-sm focus:border-gold-500 focus:outline-none"
        />
        <div className="flex gap-2">
          <button
            type="submit"
            className="rounded-full bg-charcoal-950 px-3 py-1.5 text-xs font-semibold text-white hover:bg-charcoal-800"
          >
            Save
          </button>
          <button
            type="button"
            onClick={() => setEditing(false)}
            className="rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-charcoal-700 ring-1 ring-charcoal-950/15 hover:bg-charcoal-50"
          >
            Cancel
          </button>
        </div>
      </form>
    );
  }

  return (
    <div
      className={`flex flex-col gap-3 rounded-2xl border p-5 sm:flex-row sm:items-start sm:justify-between ${
        review.approved ? "border-charcoal-950/10 bg-white" : "border-gold-500/30 bg-gold-50"
      }`}
    >
      <div>
        <div className="flex items-center gap-2">
          <span className="font-semibold text-charcoal-950">{review.authorName}</span>
          <span className="flex text-gold-500">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star key={i} size={14} fill={i < review.rating ? "currentColor" : "none"} />
            ))}
          </span>
        </div>
        <p className="mt-1 text-sm text-charcoal-700">{review.quote}</p>
        <p className="mt-1 text-xs text-charcoal-400">{review.createdAt.toLocaleDateString()}</p>
      </div>
      <div className="flex shrink-0 gap-2">
        {!review.approved ? (
          <form action={approveReview.bind(null, review.id)}>
            <button
              type="submit"
              className="inline-flex items-center gap-1 rounded-full bg-charcoal-950 px-3 py-1.5 text-xs font-semibold text-white hover:bg-charcoal-800"
            >
              <Check size={14} /> Approve
            </button>
          </form>
        ) : null}
        <button
          type="button"
          onClick={() => setEditing(true)}
          className="inline-flex items-center gap-1 rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-charcoal-700 ring-1 ring-charcoal-950/15 hover:bg-charcoal-50"
        >
          <Pencil size={14} /> Edit
        </button>
        <form action={deleteReview.bind(null, review.id)}>
          <button
            type="submit"
            className="inline-flex items-center gap-1 rounded-full bg-white px-3 py-1.5 text-xs font-semibold text-red-600 ring-1 ring-red-200 hover:bg-red-50"
          >
            <Trash2 size={14} /> {review.approved ? "Remove" : "Reject"}
          </button>
        </form>
      </div>
    </div>
  );
}