import { Star } from "lucide-react";
import { Icon } from "@/components/icon";
import type { SiteSettingsRow, TrustItem } from "@/lib/types";

const DEFAULT: TrustItem[] = [
  { icon: "Star", value: "4.9", label: "Google yıldızı" },
  { icon: "Briefcase", value: "50+", label: "Tamamlanan proje" },
  { icon: "Clock", value: "24 saat", label: "İçinde dönüş" },
  { icon: "Shield", value: "100%", label: "Memnuniyet garantisi" },
];

function parse(items?: string[] | null): TrustItem[] {
  if (!items || items.length === 0) return DEFAULT;
  const out: TrustItem[] = [];
  for (const raw of items) {
    try {
      const obj = JSON.parse(raw) as Partial<TrustItem>;
      if (obj.value && obj.label)
        out.push({
          icon: obj.icon ?? "Sparkles",
          value: obj.value,
          label: obj.label,
        });
    } catch {
      /* ignore */
    }
  }
  return out.length > 0 ? out : DEFAULT;
}

export function TrustBand({ settings }: { settings?: SiteSettingsRow | null }) {
  const items = parse(settings?.trust_items);
  const rating = settings?.google_rating;
  const reviewCount = settings?.google_review_count;
  const reviewUrl = settings?.google_review_url;

  return (
    <section className="border-y border-[var(--border)] bg-white">
      <div className="mx-auto grid max-w-7xl grid-cols-2 gap-6 px-6 py-8 md:grid-cols-4">
        {items.map((it, i) => (
          <div key={i} className="flex items-center gap-3">
            <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-[var(--sky-50)] text-[var(--sky-600)]">
              <Icon name={it.icon} className="size-5" />
            </div>
            <div>
              <p className="text-lg font-bold leading-tight text-[var(--navy)]">
                {it.value}
              </p>
              <p className="text-xs text-[var(--muted)]">{it.label}</p>
            </div>
          </div>
        ))}
      </div>

      {rating && reviewCount && (
        <div className="border-t border-[var(--border)]">
          <a
            href={reviewUrl ?? "#"}
            target={reviewUrl ? "_blank" : undefined}
            rel="noopener noreferrer"
            className="mx-auto flex max-w-7xl items-center justify-center gap-2 px-6 py-3 text-xs text-[var(--muted)] hover:text-[var(--navy)]"
          >
            <span className="flex items-center gap-0.5 text-amber-500">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star
                  key={i}
                  className={`size-3.5 ${
                    i < Math.round(rating) ? "fill-current" : ""
                  }`}
                />
              ))}
            </span>
            <span className="font-medium">{rating.toFixed(1)}</span>
            <span>•</span>
            <span>{reviewCount} Google yorumu</span>
          </a>
        </div>
      )}
    </section>
  );
}