import { RadialChart } from "./RadialChart";
import { SectionMissingSerpData } from "../_lib/empty-states";
import type { HeroViewModel } from "../_lib/types";

interface Props {
  vm: HeroViewModel;
}

export function Hero({ vm }: Props) {
  return (
    <section className="relative bg-white border border-slate-200 rounded-2xl p-7 shadow-card overflow-hidden">
      <div
        className="pointer-events-none absolute top-0 right-0 w-72 h-72 opacity-60"
        style={{ background: "radial-gradient(circle at top right, rgba(239,68,68,0.04) 0%, transparent 70%)" }}
      />

      <div className="relative grid grid-cols-1 xl:grid-cols-[1.1fr_1.5fr_1.1fr] gap-8">

        {/* Left: Radial chart */}
        <div className="flex justify-center xl:justify-start">
          <RadialChart
            dimensions={vm.dimensions}
            score={vm.healthScore}
            delta={vm.healthDelta}
          />
        </div>

        {/* Center: AI Executive Summary */}
        <div className="flex flex-col justify-center gap-4">
          <span className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-red-600 uppercase tracking-widest">
            <span className="w-1.5 h-1.5 rounded-full bg-red-500 inline-block" />
            AI Executive Summary
          </span>

          <p className="text-[15px] leading-relaxed text-slate-700">
            {vm.narrative || "Run an audit to generate your executive summary."}
          </p>
        </div>

        {/* Right: Competitive Standing */}
        <div className="flex flex-col justify-center gap-3.5 xl:border-l xl:border-slate-200 xl:pl-8">
          <span className="text-[11px] font-semibold text-slate-500 uppercase tracking-widest">
            Competitive Standing
          </span>

          {vm.hasCompetitors ? (
            <div className="flex flex-col gap-2">
              {/* Brand row */}
              <div className="flex items-center gap-2.5 px-3 py-2 bg-red-50 border border-red-100 rounded-lg">
                <div className="w-4 h-4 rounded-[4px] bg-gradient-to-br from-red-600 to-red-900 shrink-0" />
                <span className="text-[12px] text-red-700 font-semibold flex-1 truncate">{vm.brandDomain}</span>
              </div>
              {/* Competitor rows */}
              {vm.topCompetitorDomains.slice(0, 3).map((domain) => (
                <div key={domain} className="flex items-center gap-2.5 px-3 py-2 bg-slate-50 border border-slate-100 rounded-lg">
                  <div className="w-4 h-4 rounded-[4px] bg-slate-200 shrink-0" />
                  <span className="text-[12px] text-slate-600 font-medium flex-1 truncate">{domain}</span>
                </div>
              ))}
            </div>
          ) : (
            <SectionMissingSerpData />
          )}
        </div>
      </div>
    </section>
  );
}
