"use client";

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

interface Props {
  dimensionScores?: DimensionScores | null;
  scoringBreakdown?: Record<string, number>;
}

const DIMENSIONS: Array<{
  key: keyof DimensionScores;
  label: string;
  desc: string;
}> = [
  { key: "technicalSeo", label: "Technical SEO", desc: "Crawlability, schema, mobile-friendliness" },
  { key: "contentMetadata", label: "Content & Metadata", desc: "Titles, descriptions, H1 coverage" },
  { key: "aiVisibility", label: "AI Visibility", desc: "AI surface presence and citation readiness" },
  { key: "conversionOptimization", label: "Conversion", desc: "Conversion architecture and pathway quality" },
  { key: "userEngagement", label: "Engagement", desc: "Page experience and content depth" },
];

function barColor(score: number) {
  return score >= 70 ? "bg-green-500" : score >= 40 ? "bg-amber-500" : "bg-red-500";
}

function textColor(score: number) {
  return score >= 70 ? "text-green-700" : score >= 40 ? "text-amber-700" : "text-red-600";
}

function DimensionBar({ label, desc, score }: { label: string; desc: string; score: number }) {
  return (
    <div className="flex items-center gap-4">
      <div className="w-40 shrink-0">
        <div className="text-sm font-medium text-slate-800 leading-tight">{label}</div>
        <div className="text-[11px] text-slate-400 mt-0.5">{desc}</div>
      </div>
      <div className="flex-1 flex items-center gap-3">
        <div className="flex-1 h-2 bg-slate-100 rounded-full overflow-hidden">
          <div
            className={`h-full rounded-full transition-all duration-700 ${barColor(score)}`}
            style={{ width: `${score}%` }}
          />
        </div>
        <span className={`text-sm font-bold tabular-nums w-8 text-right ${textColor(score)}`}>
          {score}
        </span>
      </div>
    </div>
  );
}

function LegacyCell({ label, val }: { label: string; val: number }) {
  const color = val >= 80 ? "text-green-600" : val >= 60 ? "text-amber-600" : "text-red-600";
  const bg = val >= 80 ? "bg-green-50" : val >= 60 ? "bg-amber-50" : "bg-red-50";
  return (
    <div className={`rounded-xl p-4 text-center ${bg}`}>
      <div className={`text-2xl font-black tabular-nums leading-none ${color}`}>{val}</div>
      <div className="text-[11px] text-slate-500 capitalize mt-1.5 font-medium">{label}</div>
    </div>
  );
}

export function ScoreBreakdown({ dimensionScores, scoringBreakdown }: Props) {
  return (
    <div id="audit-score-breakdown" className="bg-white rounded-2xl border border-slate-200 p-6 sm:p-8">
      <h2 className="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-5">
        Score Breakdown
      </h2>

      {dimensionScores ? (
        <div className="space-y-4">
          {DIMENSIONS.map(({ key, label, desc }) => {
            const score = dimensionScores[key];
            if (score == null) return null;
            return (
              <DimensionBar key={key} label={label} desc={desc} score={score} />
            );
          })}
        </div>
      ) : scoringBreakdown ? (
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
          {Object.entries(scoringBreakdown).map(([key, val]) => (
            <LegacyCell key={key} label={key} val={val} />
          ))}
        </div>
      ) : null}
    </div>
  );
}
