"use client";

import { ArrowRight } from "lucide-react";
import type { SeoAction } from "@/lib/audit/types";
import { getMaxPossibleScore } from "@/lib/audit/scoring";

interface Props {
  score: number;
  actions: SeoAction[];
  auditType?: "1st" | "3rd";
}

function scoreColor(s: number) {
  return s >= 80 ? "text-green-600" : s >= 60 ? "text-amber-600" : "text-red-600";
}

export function ScoreProjection({ score, actions, auditType = "1st" }: Props) {
  const highImpact = actions.filter((a) => a.impact === "high").length;
  const medium = actions.filter((a) => a.impact === "medium").length;
  const maxPossible = getMaxPossibleScore(auditType);
  const projected = Math.min(maxPossible, score + highImpact * 9 + medium * 4);
  const lift = projected - score;
  const isThirdParty = auditType === "3rd";

  return (
    <div id="audit-projection" className="rounded-2xl border border-slate-200 bg-gradient-to-br from-slate-50 to-slate-100 p-6 sm:p-8">
      <h2 className="text-[11px] font-semibold uppercase tracking-widest text-slate-400 mb-5">
        Score Projection
      </h2>
      <div className="flex items-center gap-6">
        <div className="text-center">
          <div className={`text-4xl font-black tabular-nums leading-none ${scoreColor(score)}`}>
            {score}
          </div>
          <div className="text-[11px] text-slate-400 mt-1.5 font-medium">Current</div>
        </div>

        <div className="flex flex-col items-center gap-1 flex-1">
          <ArrowRight className="w-6 h-6 text-slate-300" />
          {lift > 0 && (
            <span className="text-[11px] font-semibold text-green-600">+{lift} pts</span>
          )}
        </div>

        <div className="text-center">
          <div className={`text-4xl font-black tabular-nums leading-none ${projected > score ? "text-green-600" : scoreColor(projected)}`}>
            {projected}
          </div>
          <div className="text-[11px] text-slate-400 mt-1.5 font-medium">Projected</div>
        </div>
      </div>

      <p className="text-xs text-slate-400 mt-5 leading-relaxed">
        Indicative estimate based on resolving {highImpact} high-impact and {medium} medium-impact
        finding{highImpact + medium !== 1 ? "s" : ""}. Actual improvement varies by site.
      </p>

      {isThirdParty && (
        <p className="text-xs text-slate-400 mt-2 leading-relaxed">
          Maximum possible score is {maxPossible} for third-party audits. Install the Site Tag to unlock the full 90-point ceiling.
        </p>
      )}
    </div>
  );
}
