"use client";

import { BarChart3, FileText, AlertTriangle } from "lucide-react";

interface CompSummary { domain: string; pages: number; newPages: number }
interface Props {
  brandPages: number;
  competitors: CompSummary[];
  outrankedCount: number;
}

export default function LandscapeOverview({ brandPages, competitors, outrankedCount }: Props) {
  const maxPages = Math.max(brandPages, ...competitors.map((c) => c.pages), 1);
  const totalNewComp = competitors.reduce((s, c) => s + c.newPages, 0);
  // Total across brand + competitors so each bar shows its share of
  // the visible competitive set, not just its raw page count.
  const totalPagesAcrossSet = brandPages + competitors.slice(0, 4).reduce((s, c) => s + c.pages, 0);

  return (
    <div className="bg-gradient-to-br from-slate-900 to-slate-800 rounded-2xl overflow-hidden">
      <div className="px-6 py-5">
        <h2 className="text-sm font-bold text-white mb-4">Competitive Landscape</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {/* Page count comparison */}
          <div className="bg-white/5 rounded-xl p-4">
            <div className="flex items-center gap-1.5 mb-3"><BarChart3 className="w-3.5 h-3.5 text-emerald-400" /><span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">Page Count</span></div>
            <div className="space-y-2">
              <BarRow label="You" value={brandPages} max={maxPages} total={totalPagesAcrossSet} color="bg-emerald-500" />
              {competitors.slice(0, 4).map((c) => (
                <BarRow key={c.domain} label={c.domain.split(".")[0]} value={c.pages} max={maxPages} total={totalPagesAcrossSet} color="bg-slate-500" />
              ))}
            </div>
          </div>

          {/* New content */}
          <div className="bg-white/5 rounded-xl p-4">
            <div className="flex items-center gap-1.5 mb-3"><FileText className="w-3.5 h-3.5 text-violet-400" /><span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">New Content</span></div>
            <div className="text-center py-2">
              <p className="text-3xl font-bold text-white tabular-nums">{totalNewComp}</p>
              <p className="text-xs text-slate-400 mt-1">new competitor pages detected</p>
              {competitors.filter((c) => c.newPages > 0).slice(0, 3).map((c) => (
                <p key={c.domain} className="text-[11px] text-slate-300 mt-1">{c.domain}: <span className="text-green-400 font-semibold">+{c.newPages}</span></p>
              ))}
            </div>
          </div>

          {/* Outranked keywords */}
          <div className="bg-white/5 rounded-xl p-4">
            <div className="flex items-center gap-1.5 mb-3"><AlertTriangle className="w-3.5 h-3.5 text-amber-400" /><span className="text-[10px] font-bold uppercase tracking-widest text-slate-400">Keywords at Risk</span></div>
            <div className="text-center py-2">
              <p className={`text-3xl font-bold tabular-nums ${outrankedCount > 0 ? "text-amber-400" : "text-emerald-400"}`}>{outrankedCount}</p>
              <p className="text-xs text-slate-400 mt-1">keywords where competitors outrank you</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function BarRow({ label, value, max, color, total }: { label: string; value: number; max: number; color: string; total?: number }) {
  const pct = (value / max) * 100;
  // Share-of-set percentage shown alongside the raw count when a total
  // is provided. Helps the user read "281 = 36% of the visible set"
  // without having to do mental math.
  const sharePct = total && total > 0 ? Math.round((value / total) * 100) : null;
  return (
    <div className="flex items-center gap-2">
      <span className="text-[10px] text-slate-400 w-16 truncate">{label}</span>
      <div className="flex-1 h-2 bg-white/10 rounded-full overflow-hidden"><div className={`h-full rounded-full ${color}`} style={{ width: `${pct}%` }} /></div>
      <span className="text-[10px] text-slate-300 tabular-nums w-20 text-right">
        {value.toLocaleString()}
        {sharePct != null && <span className="text-slate-500"> ({sharePct}%)</span>}
      </span>
    </div>
  );
}
