"use client";

import { Sparkles, BarChart3, Layers, Zap } from "lucide-react";

interface Props {
  summary: string;
  keywordCount: number;
  clusterCount: number;
  quickWinCount: number;
  source: string;
  cached: boolean;
  onRefresh?: () => void;
}

export default function StrategySummary({ summary, keywordCount, clusterCount, quickWinCount, source, cached, onRefresh }: Props) {
  return (
    <div className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl overflow-hidden">
      <div className="px-6 py-6">
        <div className="flex items-center gap-2 mb-3">
          <div className="w-8 h-8 rounded-lg bg-white/10 flex items-center justify-center"><Sparkles className="w-4 h-4 text-violet-300" /></div>
          <div>
            <h2 className="text-sm font-bold text-white">AI Strategy Summary</h2>
            <div className="flex items-center gap-2 mt-0.5">
              {source === "live" ? (
                <span className="text-[9px] font-bold uppercase tracking-wider text-blue-300 bg-blue-500/20 rounded-full px-2 py-0.5">Live SERP Data</span>
              ) : (
                <span className="text-[9px] font-bold uppercase tracking-wider text-violet-300 bg-violet-500/20 rounded-full px-2 py-0.5">AI Estimated</span>
              )}
              {cached && (
                <>
                  <span className="text-[9px] text-slate-400">Cached</span>
                  {onRefresh && <button onClick={onRefresh} className="text-[9px] text-brand-400 hover:text-brand-300 font-semibold">Refresh</button>}
                </>
              )}
            </div>
          </div>
        </div>
        <p className="text-sm text-slate-300 leading-relaxed mb-5">{summary}</p>
        <div className="grid grid-cols-3 gap-3">
          <Stat icon={BarChart3} label="Keywords" value={keywordCount} color="text-emerald-400" />
          <Stat icon={Layers} label="Topic Clusters" value={clusterCount} color="text-violet-400" />
          <Stat icon={Zap} label="Quick Wins" value={quickWinCount} color="text-amber-400" />
        </div>
      </div>
    </div>
  );
}

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