import { BadgeCheck, MapPin, Store, Star } from "lucide-react";
import Link from "next/link";

import { RatingBadge } from "@/components/reviews/rating-badge";
import { cn } from "@/lib/utils";
import type { ItemStoreRatingBreakdown } from "@alqove/types";

export interface SellerTrustCardProps {
  storeId: string;
  storeName: string;
  city?: string | null;
  state?: string | null;
  isVerified?: boolean | null;
  averageRating?: number | null;
  reviewCount?: number | null;
  ratingBreakdown?: ItemStoreRatingBreakdown | null;
  className?: string;
}

const BREAKDOWN_LABELS: Array<[keyof ItemStoreRatingBreakdown, string]> = [
  ["item_as_described", "As described"],
  ["shipping_speed", "Shipping speed"],
  ["communication", "Communication"],
  ["packaging", "Packaging"],
];

function formatLocation(city?: string | null, state?: string | null): string | null {
  const parts = [city, state].map((part) => part?.trim()).filter(Boolean);
  return parts.length > 0 ? parts.join(", ") : null;
}

function hasBreakdownValue(ratingBreakdown?: ItemStoreRatingBreakdown | null): boolean {
  return BREAKDOWN_LABELS.some(([key]) => ratingBreakdown?.[key] != null);
}

function formatDimension(value: number | null | undefined): string {
  return value == null ? "Not rated" : value.toFixed(1);
}

export function SellerTrustCard({
  storeId,
  storeName,
  city,
  state,
  isVerified,
  averageRating,
  reviewCount,
  ratingBreakdown,
  className,
}: SellerTrustCardProps) {
  const location = formatLocation(city, state);
  const normalizedReviewCount = reviewCount ?? 0;
  const showRating = normalizedReviewCount > 0 && averageRating != null;
  const showBreakdown = showRating && hasBreakdownValue(ratingBreakdown);

  return (
    <section
      aria-labelledby="seller-trust-heading"
      className={cn("rounded-lg border border-slate-200 bg-white p-5", className)}
    >
      <div className="flex items-start gap-3">
        <div className="flex size-11 shrink-0 items-center justify-center rounded bg-forest-600 text-base font-bold text-white">
          {storeName.charAt(0).toUpperCase()}
        </div>
        <div className="min-w-0 flex-1">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <h2 id="seller-trust-heading" className="text-base font-semibold text-slate-900">
              {storeName}
            </h2>
            {isVerified ? (
              <span className="inline-flex items-center gap-1 rounded-full bg-forest-50 px-2 py-0.5 text-xs font-medium text-forest-700">
                <BadgeCheck aria-hidden="true" className="size-3.5" />
                Verified
              </span>
            ) : null}
          </div>
          {location ? (
            <p className="mt-1 inline-flex items-center gap-1.5 text-sm text-slate-500">
              <MapPin aria-hidden="true" className="size-3.5" />
              {location}
            </p>
          ) : null}
        </div>
      </div>

      <div className="mt-4 rounded-md border border-slate-100 bg-slate-50 px-3 py-3">
        {showRating ? (
          <RatingBadge
            averageRating={averageRating}
            reviewCount={normalizedReviewCount}
            size="sm"
          />
        ) : (
          <div className="inline-flex items-center gap-1.5 text-sm text-slate-600">
            <Star aria-hidden="true" className="size-4 text-slate-300" />
            No reviews yet
          </div>
        )}
      </div>

      {showBreakdown ? (
        <dl className="mt-4 grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
          {BREAKDOWN_LABELS.map(([key, label]) => (
            <div key={key}>
              <dt className="text-xs font-medium uppercase tracking-wide text-slate-500">
                {label}
              </dt>
              <dd className="mt-0.5 font-semibold text-slate-900">
                {formatDimension(ratingBreakdown?.[key])}
              </dd>
            </div>
          ))}
        </dl>
      ) : null}

      <Link
        href={`/stores/${storeId}`}
        className="mt-5 inline-flex items-center gap-2 text-sm font-semibold text-forest-700 hover:text-forest-800"
      >
        <Store aria-hidden="true" className="size-4" />
        View Store
      </Link>
    </section>
  );
}