'use client';

import { useState, useRef } from 'react';
import { useAuth } from '@/lib/auth-context';
import {
  getProductReviews,
  submitProductReview,
  ProductReview,
} from '@/lib/shopware-api';
import Captcha, { type CaptchaHandle } from '@/components/ui/Captcha';
import { runCaptchaGate } from '@/lib/captcha-client';

interface ProductReviewsProps {
  productId: string;
  initialReviews: ProductReview[];
  initialTotal: number;
  ratingAverage: number | null;
}

function StarRating({
  value,
  max = 5,
  size = 'md',
  interactive = false,
  onChange,
}: {
  value: number;
  max?: number;
  size?: 'sm' | 'md' | 'lg';
  interactive?: boolean;
  onChange?: (v: number) => void;
}) {
  const [hover, setHover] = useState(0);
  const sizeClass = size === 'sm' ? 'w-4 h-4' : size === 'lg' ? 'w-7 h-7' : 'w-5 h-5';

  return (
    <div className="flex">
      {Array.from({ length: max }, (_, i) => i + 1).map((star) => {
        const filled = interactive ? star <= (hover || value) : star <= Math.round(value);
        return (
          <button
            key={star}
            type="button"
            disabled={!interactive}
            className={`${sizeClass} ${interactive ? 'cursor-pointer' : 'cursor-default'} transition-colors`}
            onMouseEnter={() => interactive && setHover(star)}
            onMouseLeave={() => interactive && setHover(0)}
            onClick={() => interactive && onChange?.(star)}
          >
            <svg
              className={`${sizeClass} ${filled ? 'text-yellow-400' : 'text-surface-200'}`}
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
            </svg>
          </button>
        );
      })}
    </div>
  );
}

function ReviewCard({ review }: { review: ProductReview }) {
  const name =
    review.customer
      ? `${review.customer.firstName} ${review.customer.lastName}`
      : review.externalUser || 'Anonymous';

  const date = new Date(review.createdAt).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  });

  return (
    <div className="py-6 first:pt-0 border-b border-surface-100 last:border-b-0">
      <div className="flex items-start justify-between gap-4 mb-2">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <StarRating value={review.points} size="sm" />
            <span className="text-sm font-semibold text-surface-900">{review.title}</span>
          </div>
          <p className="text-xs text-surface-400">
            {name} &middot; {date}
          </p>
        </div>
      </div>
      {review.content && (
        <p className="text-sm text-surface-600 leading-relaxed mt-2">{review.content}</p>
      )}
    </div>
  );
}

export default function ProductReviews({
  productId,
  initialReviews,
  initialTotal,
  ratingAverage,
}: ProductReviewsProps) {
  const { isLoggedIn } = useAuth();

  const [reviews, setReviews] = useState<ProductReview[]>(initialReviews);
  const [total, setTotal] = useState(initialTotal);
  const [page, setPage] = useState(1);
  const [loadingMore, setLoadingMore] = useState(false);

  // Review form state
  const [showForm, setShowForm] = useState(false);
  const [formTitle, setFormTitle] = useState('');
  const [formContent, setFormContent] = useState('');
  const [formPoints, setFormPoints] = useState(0);
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState('');
  const [submitSuccess, setSubmitSuccess] = useState(false);
  const captchaRef = useRef<CaptchaHandle>(null);

  const LIMIT = 10;
  const hasMore = reviews.length < total;

  const handleLoadMore = async () => {
    setLoadingMore(true);
    try {
      const nextPage = page + 1;
      const data = await getProductReviews(productId, { limit: LIMIT, page: nextPage });
      setReviews((prev) => [...prev, ...(data.elements || [])]);
      setTotal(data.total);
      setPage(nextPage);
    } catch {
      // silently fail
    } finally {
      setLoadingMore(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (formPoints === 0) {
      setSubmitError('Please select a star rating.');
      return;
    }
    setSubmitting(true);
    setSubmitError('');
    try {
      const captchaPayload = (await captchaRef.current?.getPayload()) ?? {};
      await runCaptchaGate(captchaPayload);
      await submitProductReview(productId, {
        title: formTitle,
        content: formContent,
        points: formPoints,
      });
      setSubmitSuccess(true);
      setShowForm(false);
      setFormTitle('');
      setFormContent('');
      setFormPoints(0);

      // Refresh the review list
      const data = await getProductReviews(productId, { limit: LIMIT, page: 1 });
      setReviews(data.elements || []);
      setTotal(data.total);
      setPage(1);
    } catch (err: any) {
      setSubmitError(err.message || 'Failed to submit review. Please try again.');
      captchaRef.current?.reset();
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div>
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <h2 className="text-lg font-semibold text-surface-900">Customer Reviews</h2>
          {total > 0 && (
            <span className="text-sm text-surface-400">({total})</span>
          )}
        </div>
        {isLoggedIn && !showForm && !submitSuccess && (
          <button
            onClick={() => setShowForm(true)}
            className="px-4 py-2 text-sm font-medium bg-brand-500 hover:bg-brand-600 text-white rounded-lg transition-colors"
          >
            Write a Review
          </button>
        )}
      </div>

      {/* Rating Summary */}
      {ratingAverage != null && total > 0 && (
        <div className="flex items-center gap-4 mb-6 p-4 bg-surface-50 rounded-xl">
          <div className="text-center">
            <p className="text-3xl font-bold text-surface-900">{ratingAverage.toFixed(1)}</p>
            <p className="text-xs text-surface-400">out of 5</p>
          </div>
          <div>
            <StarRating value={ratingAverage} size="md" />
            <p className="text-sm text-surface-500 mt-1">
              Based on {total} review{total !== 1 ? 's' : ''}
            </p>
          </div>
        </div>
      )}

      {/* Success message */}
      {submitSuccess && (
        <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-sm text-green-700">
          Thank you! Your review has been submitted and will appear after approval.
        </div>
      )}

      {/* Review Form */}
      {showForm && (
        <form onSubmit={handleSubmit} className="mb-8 p-6 bg-surface-50 rounded-xl border border-surface-200">
          <h3 className="text-base font-semibold text-surface-900 mb-4">Write Your Review</h3>

          {submitError && (
            <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
              {submitError}
            </div>
          )}

          {/* Star rating */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-surface-700 mb-2">Your Rating</label>
            <StarRating value={formPoints} size="lg" interactive onChange={setFormPoints} />
          </div>

          {/* Title */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-surface-700 mb-1">Review Title</label>
            <input
              type="text"
              required
              value={formTitle}
              onChange={(e) => setFormTitle(e.target.value)}
              className="w-full border border-surface-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
              placeholder="Summarize your experience"
            />
          </div>

          {/* Content */}
          <div className="mb-4">
            <label className="block text-sm font-medium text-surface-700 mb-1">Your Review</label>
            <textarea
              required
              rows={4}
              value={formContent}
              onChange={(e) => setFormContent(e.target.value)}
              className="w-full border border-surface-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400 resize-y"
              placeholder="What did you like or dislike about this product?"
            />
          </div>

          {/* Captcha — renders whatever is active in Shopware admin */}
          <div className="mb-4">
            <Captcha ref={captchaRef} action="review" />
          </div>

          {/* Buttons */}
          <div className="flex items-center gap-3">
            <button
              type="submit"
              disabled={submitting}
              className="px-6 py-2.5 bg-brand-500 hover:bg-brand-600 disabled:bg-brand-300 text-white text-sm font-semibold rounded-lg transition-colors"
            >
              {submitting ? 'Submitting...' : 'Submit Review'}
            </button>
            <button
              type="button"
              onClick={() => {
                setShowForm(false);
                setSubmitError('');
              }}
              className="px-6 py-2.5 border border-surface-300 hover:border-surface-400 text-surface-600 text-sm font-medium rounded-lg transition-colors"
            >
              Cancel
            </button>
          </div>
        </form>
      )}

      {/* Login prompt for non-logged-in users */}
      {!isLoggedIn && !submitSuccess && (
        <div className="mb-6 p-4 bg-surface-50 rounded-xl border border-surface-200 text-sm text-surface-600">
          <a href="/account/login" className="text-brand-500 hover:underline font-medium">
            Sign in
          </a>{' '}
          to write a review.
        </div>
      )}

      {/* Review List */}
      {reviews.length > 0 ? (
        <div className="divide-y divide-surface-100">
          {reviews.map((review) => (
            <ReviewCard key={review.id} review={review} />
          ))}
        </div>
      ) : (
        !submitSuccess && (
          <p className="text-sm text-surface-400 py-6">
            No reviews yet. Be the first to review this product!
          </p>
        )
      )}

      {/* Load More */}
      {hasMore && (
        <div className="mt-6 text-center">
          <button
            onClick={handleLoadMore}
            disabled={loadingMore}
            className="px-6 py-2.5 border border-surface-300 hover:border-surface-400 text-surface-600 text-sm font-medium rounded-lg transition-colors disabled:opacity-50"
          >
            {loadingMore ? 'Loading...' : 'Load More Reviews'}
          </button>
        </div>
      )}
    </div>
  );
}