import { reviewLinks } from "@/content/site";
import {
  describeRating,
  formatCheckedOn,
  getReviewSummary,
  reviewNoun,
} from "@/lib/google-reviews";

export function GoogleMark({ size = 20 }: { size?: number }) {
  return (
    <svg
      viewBox="0 0 48 48"
      width={size}
      height={size}
      aria-hidden="true"
      focusable="false"
    >
      <path
        fill="#EA4335"
        d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
      />
      <path
        fill="#4285F4"
        d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
      />
      <path
        fill="#FBBC05"
        d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
      />
      <path
        fill="#34A853"
        d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
      />
    </svg>
  );
}

export function ReviewsAnchor({
  href = reviewLinks.read,
  className,
  label,
  title,
  children,
}: {
  href?: string;
  className?: string;
  label?: string;
  title?: string;
  children: React.ReactNode;
}) {
  return (
    <a
      className={className}
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      title={title}
      aria-label={label ? `${label} (opens in a new tab)` : undefined}
    >
      {children}
      {!label && <span className="sr-only"> (opens in a new tab)</span>}
    </a>
  );
}

function Stars({ rating }: { rating: number }) {
  const fill = `${Math.round((rating / 5) * 1000) / 10}%`;
  return (
    <span className="rating-stars" aria-hidden="true">
      <span className="rating-stars-fill" style={{ width: fill }}>
        ★★★★★
      </span>
      <span className="rating-stars-track">★★★★★</span>
    </span>
  );
}

export async function GoogleRating({
  variant = "card",
}: {
  variant?: "card" | "compact";
}) {
  const summary = await getReviewSummary();
  return (
    <ReviewsAnchor
      className={`google-rating google-rating-${variant}`}
      label={describeRating(summary)}
      title={
        variant === "compact"
          ? `Google rating as at ${formatCheckedOn(summary.checkedOn)}`
          : undefined
      }
    >
      <GoogleMark size={variant === "card" ? 30 : 20} />
      <span className="google-rating-figures">
        <span className="google-rating-score">{summary.rating.toFixed(1)}</span>
        <Stars rating={summary.rating} />
      </span>
      <span className="google-rating-count">
        {summary.count} Google {reviewNoun(summary.count)}
      </span>
    </ReviewsAnchor>
  );
}

export async function GoogleReviews() {
  const summary = await getReviewSummary();
  return (
    <div className="google-reviews">
      <GoogleRating />
      <p className="google-reviews-actions">
        <ReviewsAnchor className="google-reviews-read">
          Read all reviews <span aria-hidden="true">↗</span>
        </ReviewsAnchor>
        {reviewLinks.write && (
          <ReviewsAnchor
            className="google-reviews-write"
            href={reviewLinks.write}
          >
            Write a review <span aria-hidden="true">↗</span>
          </ReviewsAnchor>
        )}
      </p>
      <p className="google-reviews-date">
        Google rating as at {formatCheckedOn(summary.checkedOn)}
      </p>
    </div>
  );
}