import { submitReview } from "@/app/product/[slug]/reviewActions";
import ReviewStarsInput from "./reviewStarsInput";
import { getCurrentUser } from "@/lib/customerAuth";
import Link from "next/link";

export default async function ReviewForm({
  productId,
  productSlug,
}: {
  productId: string;
  productSlug: string;
}) {
  const user = await getCurrentUser();
  const submitWithSlug = submitReview.bind(null, productSlug);

  return (
    <div className="bg-white border border-gray-200 rounded-xl p-6 h-fit shadow-sm">
      <h3 className="font-semibold text-lg text-gray-800 mb-4">
        Write a Review
      </h3>

      {user ? (
        <form action={submitWithSlug} className="flex flex-col gap-4">
          <input type="hidden" name="productId" value={productId} />
          
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Your Rating
            </label>
            <ReviewStarsInput />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Review Title
            </label>
            <input
              name="title"
              placeholder="What's the best thing about this product?"
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
              Your Review
            </label>
            <textarea
              name="body"
              rows={4}
              placeholder="Share your experience with this product..."
              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors resize-none"
            />
          </div>

          <button
            type="submit"
            className="bg-blue-600 hover:bg-blue-700 active:scale-[0.98] transition-all text-white font-semibold text-sm py-2.5 rounded-lg shadow-sm"
          >
            Submit Review
          </button>
        </form>
      ) : (
        <div className="bg-gray-50 rounded-lg p-6 text-center">
          <p className="text-gray-600">
            <Link
              href={`/account/login?callbackUrl=/product/${productSlug}`}
              className="text-blue-600 font-semibold hover:underline"
            >
              Log in
            </Link>{" "}
            to write a review and share your experience with others.
          </p>
        </div>
      )}
    </div>
  );
}