import type { DepartmentScoreBreakdown } from "@/lib/marketing";

type HealthScoreCardProps = {
  score: DepartmentScoreBreakdown;
  trendDelta: number;
};

function getTrendLabel(delta: number): string {
  if (delta > 0) {
    return `+${delta.toFixed(1)} vs periodo previo`;
  }

  if (delta < 0) {
    return `${delta.toFixed(1)} vs periodo previo`;
  }

  return "Sin cambios vs periodo previo";
}

export default function HealthScoreCard({ score, trendDelta }: HealthScoreCardProps) {
  const trendClass = trendDelta > 0 ? "text-benell-green" : trendDelta < 0 ? "text-benell-red" : "text-benell-text-soft";

  return (
    <section className="rounded-benell border border-benell-stroke bg-benell-surface p-5 shadow-benell">
      <div className="flex flex-wrap items-end justify-between gap-3">
        <div>
          <h2 className="text-h2 font-semibold">Marketing Health Score</h2>
          <p className={`text-label mt-1 font-semibold ${trendClass}`}>{getTrendLabel(trendDelta)}</p>
        </div>
        <p className="text-kpi font-semibold text-tabular">{score.total.toFixed(1)}</p>
      </div>

      <div className="mt-4 grid gap-3 sm:grid-cols-3">
        <article className="rounded-xl border border-benell-stroke bg-white p-3">
          <p className="text-label font-semibold text-benell-text-soft">Initiative Performance (50%)</p>
          <p className="text-h2 mt-1 font-semibold text-tabular">{score.initiatives.toFixed(1)}</p>
        </article>
        <article className="rounded-xl border border-benell-stroke bg-white p-3">
          <p className="text-label font-semibold text-benell-text-soft">Social Growth (30%)</p>
          <p className="text-h2 mt-1 font-semibold text-tabular">{score.social.toFixed(1)}</p>
        </article>
        <article className="rounded-xl border border-benell-stroke bg-white p-3">
          <p className="text-label font-semibold text-benell-text-soft">Brand Pulse (20%)</p>
          <p className="text-h2 mt-1 font-semibold text-tabular">{score.brand.toFixed(1)}</p>
        </article>
      </div>
    </section>
  );
}
