'use client';

import { useEffect, useMemo, useState } from 'react';
import { MessageSquare, Star } from 'lucide-react';
import { UserAvatar } from '@/components/ui/UserAvatar';
import { RatingBar, StarRating } from '@/components/reviews/StarRating';
import { api } from '@/lib/api';
import { cn, formatDate } from '@/lib/utils';

export interface WorkerReview {
  id: string;
  qualityRating: number;
  communicationRating: number;
  punctualityRating: number;
  overallRating: number;
  comment?: string | null;
  createdAt: string;
  customer: {
    firstName: string;
    lastName: string;
    avatarUrl?: string | null;
  };
  job: {
    title: string;
  } | null;
  hireInvitation?: { id: string } | null;
}

interface WorkerReviewsSectionProps {
  workerId: string;
  averageRating: number;
  totalReviews: number;
}

function average(values: number[]) {
  if (values.length === 0) return 0;
  return values.reduce((sum, v) => sum + v, 0) / values.length;
}

function ReviewCard({ review }: { review: WorkerReview }) {
  const customer = review.customer;

  return (
    <article className="border border-[#e2ddd2] bg-white p-4">
      <div className="flex items-start gap-3">
        <UserAvatar
          firstName={customer.firstName}
          lastName={customer.lastName}
          avatarUrl={customer.avatarUrl}
          size="xs"
          rounded="none"
        />
        <div className="min-w-0 flex-1">
          <div className="flex flex-col gap-1.5 sm:flex-row sm:items-start sm:justify-between">
            <div className="min-w-0">
              <p className="font-semibold text-slate-900 text-sm">
                {customer.firstName} {customer.lastName}
              </p>
              <p className="text-xs text-muted mt-0.5 truncate">
                {review.job?.title ?? 'Direct hire'}
              </p>
            </div>
            <div className="shrink-0 sm:text-right">
              <StarRating rating={review.overallRating} showValue size="sm" />
              <p className="text-[11px] text-muted mt-0.5">{formatDate(review.createdAt)}</p>
            </div>
          </div>

          <div className="mt-3 grid grid-cols-3 gap-1.5">
            {[
              { label: 'Quality', value: review.qualityRating },
              { label: 'Comm.', value: review.communicationRating },
              { label: 'On time', value: review.punctualityRating },
            ].map((item) => (
              <div
                key={item.label}
                className="bg-[var(--home-sand)] px-2 py-2 text-center"
              >
                <p className="text-[9px] font-semibold uppercase tracking-wide text-muted sm:text-[10px]">
                  {item.label}
                </p>
                <p className="mt-0.5 text-xs font-bold tabular-nums text-slate-900">
                  {item.value}/5
                </p>
              </div>
            ))}
          </div>

          {review.comment && (
            <p className="mt-3 text-sm text-slate-600 leading-relaxed border-l-2 border-[var(--home-amber)] pl-3">
              {review.comment}
            </p>
          )}
        </div>
      </div>
    </article>
  );
}

export function WorkerReviewsSection({
  workerId,
  averageRating,
  totalReviews,
}: WorkerReviewsSectionProps) {
  const [reviews, setReviews] = useState<WorkerReview[]>([]);
  const [loading, setLoading] = useState(totalReviews > 0);

  useEffect(() => {
    if (totalReviews === 0) {
      setReviews([]);
      setLoading(false);
      return;
    }

    let cancelled = false;
    setLoading(true);

    api<{ data: WorkerReview[] }>(`/reviews/worker/${workerId}`)
      .then((res) => {
        if (!cancelled) setReviews(res.data);
      })
      .catch(console.error)
      .finally(() => {
        if (!cancelled) setLoading(false);
      });

    return () => {
      cancelled = true;
    };
  }, [workerId, totalReviews]);

  const breakdown = useMemo(() => {
    if (reviews.length === 0) {
      return { quality: 0, communication: 0, punctuality: 0 };
    }
    return {
      quality: average(reviews.map((r) => r.qualityRating)),
      communication: average(reviews.map((r) => r.communicationRating)),
      punctuality: average(reviews.map((r) => r.punctualityRating)),
    };
  }, [reviews]);

  const displayCount = !loading ? reviews.length : totalReviews;
  const displayAverage =
    !loading && reviews.length > 0
      ? average(reviews.map((r) => r.overallRating))
      : averageRating;

  const distribution = useMemo(() => {
    const counts = [0, 0, 0, 0, 0];
    for (const review of reviews) {
      const bucket = Math.min(5, Math.max(1, Math.round(review.overallRating))) - 1;
      counts[bucket] += 1;
    }
    return counts;
  }, [reviews]);

  return (
    <section id="reviews" className="worker-profile-section scroll-mt-[7.5rem] sm:scroll-mt-28">
      <h2 className="worker-profile-section-title">Ratings &amp; reviews</h2>

      {totalReviews === 0 && !loading ? (
        <div className="flex flex-col items-center border border-dashed border-[#d6d0c4] bg-[var(--home-sand)]/50 px-4 py-10 text-center">
          <MessageSquare className="mb-2 h-8 w-8 text-slate-300" />
          <p className="text-sm font-medium text-slate-700">No reviews yet</p>
          <p className="mt-1 text-xs text-muted">Be the first to hire and review this worker.</p>
        </div>
      ) : (
        <div className="space-y-3">
          <div className="border border-[#e2ddd2] bg-white p-4 sm:p-5">
            <div className="grid gap-5 sm:grid-cols-[auto_1fr] sm:items-center sm:gap-6">
              <div className="text-center sm:border-r sm:border-[#e2ddd2] sm:pr-6 sm:text-left">
                <p className="home-display text-4xl font-bold tabular-nums text-slate-900">
                  {displayAverage.toFixed(1)}
                </p>
                <StarRating
                  rating={displayAverage}
                  size="lg"
                  className="mt-2 justify-center sm:justify-start"
                />
                <p className="mt-1.5 text-sm text-muted">
                  {displayCount} review{displayCount !== 1 ? 's' : ''}
                </p>
              </div>

              <div className="space-y-2.5">
                <RatingBar label="Quality" value={breakdown.quality} />
                <RatingBar label="Communication" value={breakdown.communication} />
                <RatingBar label="Punctuality" value={breakdown.punctuality} />
              </div>
            </div>

            {reviews.length > 0 && (
              <div className="mt-5 space-y-2 border-t border-[#e2ddd2] pt-5">
                <p className="mb-2 text-[10px] font-semibold uppercase tracking-wide text-muted">
                  Rating distribution
                </p>
                {[5, 4, 3, 2, 1].map((stars) => {
                  const count = distribution[stars - 1];
                  const pct = reviews.length ? (count / reviews.length) * 100 : 0;
                  return (
                    <div key={stars} className="flex items-center gap-2 text-xs">
                      <span className="w-3 tabular-nums text-muted">{stars}</span>
                      <Star className="h-3 w-3 shrink-0 fill-[var(--home-amber)] text-[var(--home-amber)]" />
                      <div className="h-1.5 flex-1 overflow-hidden bg-slate-100">
                        <div
                          className={cn('h-full bg-[var(--home-amber)]')}
                          style={{ width: `${pct}%` }}
                        />
                      </div>
                      <span className="w-6 text-right tabular-nums text-muted">{count}</span>
                    </div>
                  );
                })}
              </div>
            )}
          </div>

          {loading ? (
            <p className="py-6 text-center text-sm text-muted">Loading reviews...</p>
          ) : reviews.length === 0 ? (
            <p className="border border-dashed border-[#d6d0c4] px-4 py-6 text-center text-sm text-muted">
              No written reviews yet.
            </p>
          ) : (
            <div className="space-y-2.5">
              {reviews.map((review) => (
                <ReviewCard key={review.id} review={review} />
              ))}
            </div>
          )}
        </div>
      )}
    </section>
  );
}