'use client';

import { observer } from 'mobx-react-lite';
import Image from 'next/image';
import React, { useCallback, useEffect, useState } from 'react';

import { ModalTypes } from '@/components/modal/constants/ModalTypes';
import { useModalContext } from '@/context/ModalContext';
import { useApiClient } from '@/lib/apiClient';

import MarketplaceAlert from '../shared/MarketplaceAlert';

type Review = {
  id: string;
  reviewed_user_id: number;
  reviewed_user_role: string;
  reviewer_user_id: number;
  reviewer_user_role: string;
  project_id?: string;
  project_title?: string;
  rating: number;
  feedback: string;
  created_at: string;
};

type ReviewsResponse = {
  user_id: number;
  average_rating: number;
  total_reviews: number;
  reviews: Review[];
};

const ParticipantReviewsModal: React.FC = observer(() => {
  const { closeModal, getModalData } = useModalContext();
  const apiClient = useApiClient();
  const modalData = getModalData(ModalTypes.MARKETPLACE_PARTICIPANT_REVIEWS);

  // If no modal data, return null
  if (!modalData) {
    return null;
  }

  const {
    userId,
    userName,
    userRole,
    userAvatarUrl,
    userHandle,
    projectId,
    projectStatus,
    canLeaveReview,
    onReviewSubmitted,
  } = modalData;
  const [reviewsData, setReviewsData] = useState<ReviewsResponse | null>(null);
  const [isLoadingReviews, setIsLoadingReviews] = useState(true);
  const [rating, setRating] = useState(0);
  const [feedback, setFeedback] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);
  const [submitSuccess, setSubmitSuccess] = useState(false);

  const fetchReviews = useCallback(async () => {
    try {
      setIsLoadingReviews(true);
      const response: any = await apiClient.GET(
        '/api/marketplace/users/{user_id}/reviews/',
        {
          params: {
            path: {
              user_id: userId,
            },
          },
        } as any
      );

      if (response.data) {
        setReviewsData(response.data as ReviewsResponse);
      }
    } catch (error) {
      console.error('Failed to fetch reviews:', error);
    } finally {
      setIsLoadingReviews(false);
    }
  }, [apiClient, userId]);

  useEffect(() => {
    fetchReviews();
  }, [fetchReviews]);

  const handleSubmitReview = async () => {
    if (rating === 0) {
      setSubmitError('Please select a rating');
      return;
    }

    try {
      setIsSubmitting(true);
      setSubmitError(null);

      const response: any = await apiClient.POST(
        '/api/marketplace/projects/{project_id}/reviews/',
        {
          params: {
            path: {
              project_id: projectId,
            },
            query: {
              rating,
              feedback,
            },
          },
        } as any
      );

      if (response.error) {
        throw new Error(
          (response.error as any)?.detail || 'Failed to submit review'
        );
      }

      setSubmitSuccess(true);
      setRating(0);
      setFeedback('');

      // Refresh reviews
      await fetchReviews();

      if (onReviewSubmitted) {
        onReviewSubmitted();
      }

      // Auto-close modal after successful submission
      setTimeout(() => {
        closeModal(ModalTypes.MARKETPLACE_PARTICIPANT_REVIEWS);
      }, 1000);
    } catch (error: any) {
      console.error('Failed to submit review:', error);
      setSubmitError(
        error?.message || 'Failed to submit review. Please try again.'
      );
    } finally {
      setIsSubmitting(false);
    }
  };

  const renderStars = (ratingValue: number, interactive = false) => {
    return (
      <div className='flex gap-1.5'>
        {[1, 2, 3, 4, 5].map((star) => (
          <button
            key={star}
            type='button'
            onClick={() => interactive && setRating(star)}
            disabled={!interactive}
            className={`transition-all ${
              interactive ? 'cursor-pointer hover:scale-110' : 'cursor-default'
            }`}
          >
            <svg
              className={`h-7 w-7 ${
                star <= ratingValue
                  ? 'fill-yellow-400 text-yellow-400'
                  : 'fill-none text-gray-600'
              }`}
              stroke='currentColor'
              strokeWidth={1.5}
              viewBox='0 0 24 24'
            >
              <path
                strokeLinecap='round'
                strokeLinejoin='round'
                d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'
              />
            </svg>
          </button>
        ))}
      </div>
    );
  };

  return (
    <div className='fixed inset-0 z-50 flex items-center justify-center p-4'>
      {/* Backdrop */}
      <button
        type='button'
        className='absolute inset-0 h-full w-full cursor-default bg-black/60 backdrop-blur-sm'
        onClick={() => closeModal(ModalTypes.MARKETPLACE_PARTICIPANT_REVIEWS)}
        aria-label='Close modal'
        tabIndex={-1}
      />

      {/* Modal */}
      <div
        className='relative z-10 max-h-[90vh] w-full max-w-2xl overflow-y-auto rounded-xl border border-border-primary bg-background-primary shadow-xl'
        role='dialog'
        aria-modal='true'
        aria-labelledby='review-modal-title'
      >
        {/* Header */}
        <div className='border-b border-border-primary bg-background-primary p-6'>
          <div className='mb-6 flex items-center justify-between'>
            <div className='flex items-center gap-3'>
              <h2
                id='review-modal-title'
                className='text-2xl font-bold text-foreground-primary'
              >
                Project Reviews
              </h2>
              <span className='flex h-6 w-6 items-center justify-center rounded-full bg-background-secondary text-xs font-medium text-foreground-tertiary'>
                {reviewsData?.total_reviews || 0}
              </span>
            </div>
            <button
              onClick={() =>
                closeModal(ModalTypes.MARKETPLACE_PARTICIPANT_REVIEWS)
              }
              className='text-foreground-secondary transition-colors hover:text-foreground-primary'
            >
              <svg
                className='h-6 w-6'
                fill='none'
                stroke='currentColor'
                viewBox='0 0 24 24'
              >
                <path
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth={2}
                  d='M6 18L18 6M6 6l12 12'
                />
              </svg>
            </button>
          </div>

          {/* User Info */}
          <div className='mb-6 flex items-center gap-3'>
            <div className='flex h-12 w-12 items-center justify-center rounded-full bg-accent-brand text-sm font-medium text-white'>
              {userAvatarUrl ? (
                <Image
                  src={userAvatarUrl}
                  alt={userName}
                  width={48}
                  height={48}
                  className='h-12 w-12 rounded-full object-cover'
                />
              ) : (
                userName.charAt(0).toUpperCase()
              )}
            </div>
            <div className='flex-1'>
              <div className='flex items-center gap-2'>
                <h3 className='text-base font-semibold text-foreground-primary'>
                  {canLeaveReview
                    ? `Rate your experience with ${userName}`
                    : `Reviews for ${userName}`}
                </h3>
                {userHandle && (
                  <a
                    href={`/@${userHandle}`}
                    target='_blank'
                    rel='noopener noreferrer'
                    className='group flex items-center gap-1 text-xs text-accent-brand transition-colors hover:text-accent-brand/80'
                    title='View profile'
                  >
                    <svg
                      className='h-4 w-4'
                      fill='none'
                      stroke='currentColor'
                      viewBox='0 0 24 24'
                    >
                      <path
                        strokeLinecap='round'
                        strokeLinejoin='round'
                        strokeWidth={2}
                        d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14'
                      />
                    </svg>
                  </a>
                )}
              </div>
              <p className='text-sm text-foreground-tertiary capitalize'>
                {userRole}
              </p>
            </div>
          </div>

          {/* Leave a Review Form or Project Not Complete Message */}
          {canLeaveReview ? (
            projectStatus === 'COMPLETED' ? (
              <>
                {submitSuccess && (
                  <MarketplaceAlert
                    variant='success'
                    title='Review submitted successfully!'
                  />
                )}

                {submitError && (
                  <MarketplaceAlert
                    variant='error'
                    title='Error'
                    text={submitError}
                  />
                )}

                <div className='space-y-4'>
                  <div>
                    <label
                      htmlFor='review-rating'
                      className='mb-2 block text-base font-medium text-foreground-secondary'
                    >
                      Rating:
                    </label>
                    <div id='review-rating' className='flex items-center gap-3'>
                      {renderStars(rating, true)}
                      {rating > 0 && (
                        <span className='text-sm text-foreground-tertiary'>
                          ({rating}/5)
                        </span>
                      )}
                    </div>
                  </div>

                  <div>
                    <label
                      htmlFor='review-feedback'
                      className='mb-2 block text-base font-medium text-foreground-secondary'
                    >
                      Feedback (optional):
                    </label>
                    <textarea
                      id='review-feedback'
                      value={feedback}
                      onChange={(e) => setFeedback(e.target.value)}
                      placeholder='Share your experience working on this project...'
                      className='w-full resize-none rounded-lg border border-border-primary bg-background-secondary p-4 text-sm text-foreground-primary placeholder-foreground-tertiary focus:border-accent-brand focus:outline-none'
                      rows={5}
                    />
                  </div>

                  <div className='flex items-center gap-3'>
                    <button
                      onClick={handleSubmitReview}
                      disabled={isSubmitting || rating === 0}
                      className='rounded-lg bg-accent-brand px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-accent-brand/90 disabled:cursor-not-allowed disabled:opacity-50'
                    >
                      {isSubmitting ? 'Submitting...' : 'Submit Review'}
                    </button>
                    <button
                      onClick={() => {
                        setRating(0);
                        setFeedback('');
                        setSubmitError(null);
                      }}
                      disabled={isSubmitting}
                      className='rounded-lg bg-background-secondary px-6 py-2.5 text-sm font-medium text-foreground-secondary transition-colors hover:bg-background-tertiary disabled:opacity-50'
                    >
                      Reset
                    </button>
                  </div>
                </div>
              </>
            ) : (
              <MarketplaceAlert
                variant='warning'
                title='Project not yet complete'
                text='You can leave a review once the project is completed.'
              />
            )
          ) : null}
        </div>

        {/* Reviews List Section */}
        <div className='border-t border-border-primary p-6'>
          {isLoadingReviews ? (
            <div className='space-y-4'>
              {[1, 2, 3].map((i) => (
                <div
                  key={i}
                  className='animate-pulse space-y-2 rounded-lg border border-border-primary bg-background-secondary p-4'
                >
                  <div className='h-4 w-24 rounded bg-background-primary' />
                  <div className='h-3 w-full rounded bg-background-primary' />
                  <div className='h-3 w-3/4 rounded bg-background-primary' />
                </div>
              ))}
            </div>
          ) : reviewsData && reviewsData.reviews.length > 0 ? (
            <div className='space-y-4'>
              {reviewsData.reviews.map((review) => (
                <div
                  key={review.id}
                  className='space-y-2 rounded-lg border border-border-primary bg-background-secondary p-4'
                >
                  <div className='flex items-center justify-between'>
                    {renderStars(review.rating)}
                    <span className='text-xs text-foreground-tertiary'>
                      {new Date(review.created_at).toLocaleDateString()}
                    </span>
                  </div>
                  {review.feedback && (
                    <p className='text-sm text-foreground-primary'>
                      {review.feedback}
                    </p>
                  )}
                  {review.project_title && (
                    <p className='text-xs text-foreground-tertiary'>
                      Project: {review.project_title}
                    </p>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className='py-8 text-center text-sm text-foreground-tertiary italic'>
              No reviews yet. Be the first to share your experience!
            </p>
          )}
        </div>
      </div>
    </div>
  );
});

export default ParticipantReviewsModal;