"use client";

import { useState } from "react";
import { MapPin, Star, Globe, Phone, RefreshCw, Sparkles, MessageSquare, Loader2, Tag } from "lucide-react";

export interface LocationDto {
  id: string; locationName: string; address: string | null; city: string | null; state: string | null;
  phone: string | null; category: string | null; avgRating: number; totalReviews: number;
  groupName: string | null; isActive: boolean; website: string | null;
  metricSummary: { views: number; websiteClicks: number; phoneClicks: number; directionClicks: number };
  reviewCount: number;
}

interface Props {
  loc: LocationDto;
  onSync: (id: string) => Promise<void>;
  onGeo: (id: string) => void;
  onReviews: (id: string) => void;
  onGroup: (id: string, group: string) => void;
}

export default function LocationCard({ loc, onSync, onGeo, onReviews, onGroup }: Props) {
  const [syncing, setSyncing] = useState(false);
  async function handleSync() { setSyncing(true); try { await onSync(loc.id); } finally { setSyncing(false); } }

  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <div className="px-5 py-4">
        <div className="flex items-start justify-between mb-2">
          <div>
            <h3 className="text-sm font-bold text-slate-900">{loc.locationName}</h3>
            <div className="flex items-center gap-2 mt-0.5 text-[11px] text-slate-500">
              {loc.city && <span className="flex items-center gap-0.5"><MapPin className="w-3 h-3" /> {loc.city}{loc.state ? `, ${loc.state}` : ""}</span>}
              {loc.category && <span>· {loc.category}</span>}
            </div>
          </div>
          <div className="flex items-center gap-1">
            <Star className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
            <span className="text-sm font-bold text-slate-900">{loc.avgRating.toFixed(1)}</span>
            <span className="text-[10px] text-slate-400">({loc.totalReviews})</span>
          </div>
        </div>

        {loc.groupName && (
          <span className="inline-flex items-center gap-1 text-[9px] font-bold uppercase tracking-wider text-brand-700 bg-brand-50 border border-brand-200 rounded-full px-2 py-0.5 mb-2">
            <Tag className="w-2.5 h-2.5" /> {loc.groupName}
          </span>
        )}

        <div className="grid grid-cols-4 gap-2 mt-3">
          <MetricBox label="Views" value={loc.metricSummary.views} />
          <MetricBox label="Clicks" value={loc.metricSummary.websiteClicks} />
          <MetricBox label="Calls" value={loc.metricSummary.phoneClicks} />
          <MetricBox label="Directions" value={loc.metricSummary.directionClicks} />
        </div>
      </div>

      <div className="flex items-center gap-1.5 border-t border-slate-100 px-5 py-2.5 bg-slate-50/60 flex-wrap">
        <button onClick={handleSync} disabled={syncing} className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-slate-200 text-[11px] font-semibold text-slate-600 hover:bg-white disabled:opacity-50">
          {syncing ? <Loader2 className="w-3 h-3 animate-spin" /> : <RefreshCw className="w-3 h-3" />} Sync
        </button>
        <button onClick={() => onReviews(loc.id)} className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-slate-200 text-[11px] font-semibold text-slate-600 hover:bg-white">
          <MessageSquare className="w-3 h-3" /> Reviews
        </button>
        <button onClick={() => onGeo(loc.id)} className="flex items-center gap-1 px-2.5 py-1.5 rounded-lg border border-brand-200 bg-brand-50 text-[11px] font-semibold text-brand-700 hover:bg-brand-100">
          <Sparkles className="w-3 h-3" /> GEO Score
        </button>
      </div>
    </div>
  );
}

function MetricBox({ label, value }: { label: string; value: number }) {
  return (
    <div className="text-center">
      <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">{label}</p>
      <p className="text-sm font-bold text-slate-900 tabular-nums">{value.toLocaleString()}</p>
    </div>
  );
}
