import { useState } from 'react';
import { Link } from '@tanstack/react-router';
import { X, MessageSquareQuote } from 'lucide-react';
import StarRating from '@/components/StarRating';
import { useReviewStats } from '@/hooks/useReviewStats';
import { useT } from '@/lib/i18n';

const ReviewsWidget = () => {
  const t = useT();
  const [open, setOpen] = useState(false);
  const { data, isLoading, isError } = useReviewStats();

  if (isLoading || isError || !data || data.total === 0) return null;

  const { average, total } = data;
  const scoreLabel = `${average.toFixed(1)}/5`;
  const reviewsLabel = `${total} ${total === 1 ? t('review', 'review') : t('reviews', 'reviews')}`;
  const ariaLabel = t(`Klantbeoordeling: ${scoreLabel} op basis van ${reviewsLabel}. Bekijk alle reviews.`, `Customer rating: ${scoreLabel} based on ${reviewsLabel}. View all reviews.`);

  return (
    <div className="fixed bottom-6 left-6 z-50">
      {open ? (
        <div
          role="dialog"
          aria-label={t("Klantbeoordelingen samenvatting", "Customer ratings summary")}
          className="w-[260px] bg-card border border-border/60 rounded-2xl shadow-xl p-4 animate-in fade-in slide-in-from-bottom-2"
        >
          <div className="flex items-start justify-between gap-2 mb-3">
            <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
              <MessageSquareQuote className="w-3.5 h-3.5" /> {t("Klantbeoordelingen", "Customer reviews")}
            </div>
            <button
              type="button"
              onClick={() => setOpen(false)}
              aria-label={t("Sluiten", "Close")}
              className="text-muted-foreground hover:text-foreground transition-colors"
            >
              <X className="w-4 h-4" />
            </button>
          </div>

          <div className="flex items-baseline gap-2 mb-1">
            <span className="text-3xl font-black text-foreground leading-none">{average.toFixed(1)}</span>
            <span className="text-sm text-muted-foreground">/ 5</span>
          </div>
          <StarRating rating={average} sizeClass="w-4 h-4" className="mb-2" />
          <p className="text-xs text-muted-foreground mb-3">
            {t('Op basis van', 'Based on')} <span className="font-semibold text-foreground">{total}</span>{' '}
            {total === 1 ? t('beoordeling', 'review') : t('beoordelingen', 'reviews')}
          </p>

          <Link
            to="/reviews"
            onClick={() => setOpen(false)}
            className="block w-full text-center text-xs font-bold uppercase tracking-wider bg-primary text-primary-foreground rounded-lg py-2.5 hover:bg-primary/90 transition-colors"
          >
            {t("Alle reviews bekijken", "View all reviews")}
          </Link>
        </div>
      ) : (
        <button
          type="button"
          onClick={() => setOpen(true)}
          aria-label={ariaLabel}
          className="group inline-flex items-center gap-2 bg-card border border-border/60 rounded-full pl-3 pr-4 py-2 shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all"
        >
          <StarRating rating={average} sizeClass="w-3.5 h-3.5" />
          <span className="text-xs font-bold text-foreground">{scoreLabel}</span>
          <span className="text-xs text-muted-foreground hidden sm:inline">({total})</span>
        </button>
      )}
    </div>
  );
};

export default ReviewsWidget;