import { ExternalLink, Star } from 'lucide-react';

type ReviewSource = 'trustpilot' | 'dealmirror' | 'learnitive';

type LearnitiveReview = {
  id: string;
  title: string;
  quote: string;
  name: string;
  role: string;
  initials: string;
  source: ReviewSource;
  sourceLabel: string;
  sourceUrl?: string;
  rating?: number;
  publishedAt?: string;
};

const REVIEWS: readonly LearnitiveReview[] = [
  {
    id: 'han-lee-trustpilot',
    title: 'A brilliant educational tool',
    quote: "It's been a real timesaver. I am impressed by the quality of the product.",
    name: 'Han Lee',
    role: 'Trustpilot reviewer',
    initials: 'HL',
    source: 'trustpilot',
    sourceLabel: 'Trustpilot',
    sourceUrl: 'https://www.trustpilot.com/review/learnitive.com',
    rating: 5,
    publishedAt: 'May 24, 2023',
  },
  {
    id: 'amit-jaiswal-dealmirror',
    title: 'A real timesaver',
    quote: 'Its “Expert AI Mode” generated sophisticated, human-like content for my projects.',
    name: 'Amit Jaiswal',
    role: 'DealMirror reviewer',
    initials: 'AJ',
    source: 'dealmirror',
    sourceLabel: 'DealMirror',
    sourceUrl: 'https://dealmirror.com/product/learnitive/',
    rating: 5,
    publishedAt: 'February 7, 2024',
  },
  {
    id: 'ryan-b',
    title: 'Built for research writing',
    quote: "I've used Learnitive for research writing. Thanks for the great platform for planning, writing and learning.",
    name: 'Ryan B.',
    role: 'PhD Student',
    initials: 'RB',
    source: 'learnitive',
    sourceLabel: 'Learnitive customer',
  },
  {
    id: 'leila-h',
    title: 'An interactive AI tool',
    quote: 'Loving it! Learnitive is an interactive AI tool. I will continue to use and explore its new features and functions.',
    name: 'Leila H.',
    role: 'Researcher',
    initials: 'LH',
    source: 'learnitive',
    sourceLabel: 'Learnitive customer',
  },
  {
    id: 'natasha-r',
    title: 'A fit for learning',
    quote: "I am really satisfied with Learnitive. It's the perfect solution for my learning needs.",
    name: 'Natasha R.',
    role: 'College Student',
    initials: 'NR',
    source: 'learnitive',
    sourceLabel: 'Learnitive customer',
  },
  {
    id: 'mehmet-t',
    title: 'Pleased with the workspace',
    quote: "I am so pleased with Learnitive I couldn't have asked for more than this.",
    name: 'Mehmet T.',
    role: 'Computer Science Student',
    initials: 'MT',
    source: 'learnitive',
    sourceLabel: 'Learnitive customer',
  },
  {
    id: 'shane-p',
    title: 'Useful for writing',
    quote: 'Learnitive impressed me on multiple levels. A convenient application for writer and blogger like me.',
    name: 'Shane P.',
    role: 'Student',
    initials: 'SP',
    source: 'learnitive',
    sourceLabel: 'Learnitive customer',
  },
] as const;

function ReviewStars({ rating }: { rating: number }) {
  return (
    <div className="interactive-home-review-stars" role="img" aria-label={`Rated ${rating} out of 5`}>
      {Array.from({ length: 5 }, (_, index) => (
        <Star key={index} className="size-4" fill={index < rating ? 'currentColor' : 'none'} aria-hidden="true" />
      ))}
    </div>
  );
}

function ReviewCard({ review, duplicate = false }: { review: LearnitiveReview; duplicate?: boolean }) {
  const cardProps = duplicate ? { 'aria-hidden': true as const } : {};
  return (
    <article className="interactive-home-review-card" {...cardProps}>
      <div className="interactive-home-review-rating-row">
        {review.rating ? <ReviewStars rating={review.rating} /> : <span className="interactive-home-review-customer-label">Customer testimonial</span>}
        {review.publishedAt ? <span className="interactive-home-review-date">{review.publishedAt}</span> : null}
      </div>
      <div className="interactive-home-review-body">
        <h3>{review.title}</h3>
        <p>“{review.quote}”</p>
      </div>
      <div className="interactive-home-review-who">
        <span className="interactive-home-review-avatar" aria-hidden="true">{review.initials}</span>
        <div className="interactive-home-review-identity">
          <strong>{review.name}</strong>
          <span>{review.role}</span>
        </div>
        {review.sourceUrl ? (
          <a
            className={`interactive-home-review-source is-${review.source}`}
            href={review.sourceUrl}
            target="_blank"
            rel="noopener noreferrer"
            tabIndex={duplicate ? -1 : undefined}
            aria-label={`Read ${review.name}'s review on ${review.sourceLabel}`}
          >
            <span>{review.sourceLabel}</span>
            <ExternalLink className="size-3" aria-hidden="true" />
          </a>
        ) : (
          <span className="interactive-home-review-source is-learnitive">
            <img src="/favicon.svg" alt="" aria-hidden="true" />
            <span>{review.sourceLabel}</span>
          </span>
        )}
      </div>
    </article>
  );
}

function MarqueeRow({ reviews, reverse = false }: { reviews: readonly LearnitiveReview[]; reverse?: boolean }) {
  return (
    <div className={`interactive-home-review-marquee-row${reverse ? ' is-reverse' : ''}`}>
      <div className="interactive-home-review-marquee-track">
        <div className="interactive-home-review-marquee-set">
          {reviews.map((review) => <ReviewCard key={review.id} review={review} />)}
        </div>
        <div className="interactive-home-review-marquee-set" aria-hidden="true">
          {reviews.map((review) => <ReviewCard key={`${review.id}-duplicate`} review={review} duplicate />)}
        </div>
      </div>
    </div>
  );
}

export function HomeCommunityReviews() {
  const firstRow = REVIEWS.slice(0, 4);
  const secondRow = REVIEWS.slice(4);

  return (
    <section className="interactive-home-reviews" aria-labelledby="interactive-home-reviews-title" data-home-section="customer-reviews">
      <div className="interactive-page-container interactive-home-reviews-head">
        <span className="interactive-eyebrow">Customer reviews</span>
        <h2 id="interactive-home-reviews-title">What people are saying about Learnitive.</h2>
        <p>Feedback shared by Learnitive customers on Trustpilot, DealMirror and Learnitive.</p>
      </div>

      <div className="interactive-home-review-marquee" aria-label="Learnitive customer reviews">
        <MarqueeRow reviews={firstRow} />
        <MarqueeRow reviews={secondRow} reverse />
      </div>

      <div className="interactive-page-container interactive-home-reviews-mobile" aria-label="Learnitive customer reviews">
        {REVIEWS.map((review) => <ReviewCard key={`mobile-${review.id}`} review={review} />)}
      </div>

      <div className="interactive-page-container interactive-home-reviews-more" aria-label="External review sources">
        <a href="https://www.trustpilot.com/review/learnitive.com" target="_blank" rel="noopener noreferrer">Read on Trustpilot <span aria-hidden="true">→</span></a>
      </div>
    </section>
  );
}