"use client";

import type { SeoSection } from "@/lib/audit/types";

interface Props {
  competitiveLandscape: NonNullable<SeoSection["competitiveLandscape"]>;
  publicAiVisibility?: SeoSection["publicAiVisibility"];
}

export function CompetitiveLandscapeSection({ competitiveLandscape: cl, publicAiVisibility: pav }: Props) {
  const aiTotal = pav?.totalQueriesChecked ?? 0;
  const aiWith = pav?.queriesWithAiOverview ?? 0;

  return (
    <div className="rounded-2xl bg-slate-900/60 border border-white/10 overflow-hidden">
      <div className="px-6 py-5 border-b border-white/10">
        <h3 className="text-sm font-semibold text-slate-100">Competitive Landscape</h3>
        <p className="text-xs text-slate-400 mt-0.5">SERP share-of-voice and AI Overview coverage across industry queries</p>
      </div>

      <div className="grid sm:grid-cols-3 divide-y sm:divide-y-0 sm:divide-x divide-white/10">
        {/* AI Overview coverage */}
        <div className="px-6 py-5">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">
            AI Overview coverage
          </p>
          <div className="text-4xl font-black tabular-nums text-white leading-none">
            {cl.aiOverviewCoveragePercent}%
          </div>
          {aiTotal > 0 && (
            <p className="text-xs text-slate-500 mt-1">
              {aiWith} of {aiTotal} queries trigger an AI Overview
            </p>
          )}
        </div>

        {/* Brand citation rate */}
        <div className="px-6 py-5">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">
            Brand citation rate
          </p>
          <div className="text-4xl font-black tabular-nums text-white leading-none">
            {cl.aiOverviewBrandCitationRate}%
          </div>
          <p className="text-xs text-slate-500 mt-1">
            {cl.aiOverviewBrandCitationRate > 0
              ? "Brand mentioned in AI Overviews"
              : "Not yet cited in AI Overviews"}
          </p>
        </div>

        {/* Top competitors */}
        <div className="px-6 py-5">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-2">
            Top competing domains
          </p>
          {cl.topCompetitors.length === 0 ? (
            <p className="text-xs text-slate-500">No competitors detected</p>
          ) : (
            <ul className="space-y-1.5">
              {cl.topCompetitors.map((domain) => (
                <li key={domain} className="text-sm text-slate-300 font-mono truncate">
                  {domain}
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>

      {/* Per-query AI Overview details */}
      {pav && pav.aiOverviewDetails.some((d) => d.snippet) && (
        <div className="border-t border-white/10 px-6 py-5">
          <p className="text-[10px] font-semibold uppercase tracking-widest text-slate-400 mb-3">
            AI Overview snippets
          </p>
          <div className="space-y-3">
            {pav.aiOverviewDetails
              .filter((d) => d.snippet)
              .slice(0, 4)
              .map((d) => (
                <div key={d.query} className="text-xs">
                  <span className="font-mono text-slate-400">&ldquo;{d.query}&rdquo;</span>
                  {d.brandMentioned && (
                    <span className="ml-2 text-[10px] bg-emerald-900/40 text-emerald-400 border border-emerald-500/30 px-1.5 py-0.5 rounded-full">
                      Brand cited
                    </span>
                  )}
                  <p className="text-slate-400 mt-1 leading-relaxed line-clamp-2">{d.snippet}</p>
                </div>
              ))}
          </div>
        </div>
      )}
    </div>
  );
}
