"use client";

import { Eye, MousePointerClick, Phone, Navigation, Star, MessageSquare, AlertTriangle } from "lucide-react";

interface Props {
  locationCount: number; totalViews: number; totalWebsiteClicks: number;
  totalPhoneClicks: number; totalDirectionClicks: number; avgRating: number;
  totalReviews: number; unrepliedReviews: number;
  bestLocation: { name: string; rating: number } | null;
  worstLocation: { name: string; rating: number } | null;
}

export default function GbpOverview(p: Props) {
  return (
    <div className="rounded-2xl overflow-hidden" style={{ background: "linear-gradient(135deg, #0B1120, #1E293B)" }}>
      <div className="px-6 py-5">
        <h2 className="text-sm font-bold text-white mb-4">{p.locationCount} Location{p.locationCount !== 1 ? "s" : ""} · GBP Overview</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
          <Stat icon={Eye} label="Total Views" value={p.totalViews} color="text-emerald-400" />
          <Stat icon={MousePointerClick} label="Website Clicks" value={p.totalWebsiteClicks} color="text-blue-400" />
          <Stat icon={Phone} label="Phone Clicks" value={p.totalPhoneClicks} color="text-violet-400" />
          <Stat icon={Navigation} label="Directions" value={p.totalDirectionClicks} color="text-amber-400" />
        </div>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          <div className="bg-white/5 rounded-xl px-4 py-3"><Star className="w-3.5 h-3.5 text-amber-400 mb-1" /><p className="text-xl font-bold text-white">{p.avgRating.toFixed(1)}</p><p className="text-[10px] text-slate-400 uppercase tracking-widest">Avg Rating</p></div>
          <div className="bg-white/5 rounded-xl px-4 py-3"><MessageSquare className="w-3.5 h-3.5 text-blue-400 mb-1" /><p className="text-xl font-bold text-white">{p.totalReviews.toLocaleString()}</p><p className="text-[10px] text-slate-400 uppercase tracking-widest">Total Reviews</p></div>
          {p.unrepliedReviews > 0 && <div className="bg-white/5 rounded-xl px-4 py-3 border border-amber-500/30"><AlertTriangle className="w-3.5 h-3.5 text-amber-400 mb-1" /><p className="text-xl font-bold text-amber-400">{p.unrepliedReviews}</p><p className="text-[10px] text-slate-400 uppercase tracking-widest">Unreplied</p></div>}
          {p.bestLocation && <div className="bg-white/5 rounded-xl px-4 py-3"><Star className="w-3.5 h-3.5 text-green-400 mb-1" /><p className="text-sm font-bold text-white truncate">{p.bestLocation.name}</p><p className="text-[10px] text-green-400">{p.bestLocation.rating.toFixed(1)}★ — Best rated</p></div>}
        </div>
      </div>
    </div>
  );
}

function Stat({ icon: Icon, label, value, color }: { icon: typeof Eye; label: string; value: number; color: string }) {
  return (
    <div className="bg-white/5 rounded-xl px-4 py-3"><Icon className={`w-3.5 h-3.5 ${color} mb-1`} /><p className="text-xl font-bold text-white tabular-nums">{value.toLocaleString()}</p><p className="text-[10px] text-slate-400 uppercase tracking-widest">{label}</p></div>
  );
}
