"use client";

/**
 * SEO Score Gauge — displays a circular score indicator for the
 * current page, with expandable recommendations.
 */

import { useState } from "react";
import { ChevronDown, ChevronUp, CheckCircle2, XCircle, Target } from "lucide-react";
import type { SeoScoreResult } from "@/lib/services/page-seo-score";

interface Props {
  result: SeoScoreResult;
}

const GRADE_COLORS: Record<string, { ring: string; text: string; bg: string }> = {
  A: { ring: "stroke-green-500", text: "text-green-600", bg: "bg-green-50" },
  B: { ring: "stroke-teal-500", text: "text-teal-600", bg: "bg-teal-50" },
  C: { ring: "stroke-amber-500", text: "text-amber-600", bg: "bg-amber-50" },
  D: { ring: "stroke-orange-500", text: "text-orange-600", bg: "bg-orange-50" },
  F: { ring: "stroke-red-500", text: "text-red-600", bg: "bg-red-50" },
};

export default function SeoScoreGauge({ result }: Props) {
  const [expanded, setExpanded] = useState(false);
  const pct = result.maxScore > 0 ? (result.score / result.maxScore) * 100 : 0;
  const colors = GRADE_COLORS[result.grade] || GRADE_COLORS.F;

  // SVG ring
  const radius = 22;
  const circumference = 2 * Math.PI * radius;
  const dashoffset = circumference - (pct / 100) * circumference;

  const failedChecks = result.checks.filter((c) => !c.passed);
  const passedCount = result.checks.filter((c) => c.passed).length;

  return (
    <div className={`border border-slate-200 rounded-xl overflow-hidden ${colors.bg}`}>
      {/* Compact header */}
      <button onClick={() => setExpanded(!expanded)}
        className="w-full flex items-center gap-3 px-3 py-2.5 hover:bg-white/50 transition-colors">
        {/* Mini gauge */}
        <div className="relative w-12 h-12 shrink-0">
          <svg className="w-12 h-12 -rotate-90" viewBox="0 0 52 52">
            <circle cx="26" cy="26" r={radius} fill="none" strokeWidth="4" className="stroke-slate-200" />
            <circle cx="26" cy="26" r={radius} fill="none" strokeWidth="4"
              className={colors.ring}
              strokeLinecap="round"
              strokeDasharray={circumference}
              strokeDashoffset={dashoffset}
              style={{ transition: "stroke-dashoffset 0.6s ease" }}
            />
          </svg>
          <div className="absolute inset-0 flex items-center justify-center">
            <span className={`text-sm font-bold ${colors.text}`}>{result.score}</span>
          </div>
        </div>
        <div className="flex-1 text-left">
          <div className="flex items-center gap-1.5">
            <Target className="w-3 h-3 text-slate-500" />
            <span className="text-[11px] font-bold text-slate-700">SEO Score</span>
            <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded ${colors.text} ${colors.bg} border border-current/10`}>
              {result.grade}
            </span>
          </div>
          <p className="text-[10px] text-slate-500 mt-0.5">
            {passedCount}/{result.checks.length} checks passed
            {failedChecks.length > 0 && ` · ${failedChecks.length} to fix`}
          </p>
        </div>
        {expanded ? <ChevronUp className="w-3.5 h-3.5 text-slate-400" /> : <ChevronDown className="w-3.5 h-3.5 text-slate-400" />}
      </button>

      {/* Expanded checklist */}
      {expanded && (
        <div className="border-t border-slate-200 bg-white px-3 py-2 space-y-1.5">
          {result.checks.map((check, i) => (
            <div key={i} className="flex items-start gap-2">
              {check.passed
                ? <CheckCircle2 className="w-3.5 h-3.5 text-green-500 mt-0.5 shrink-0" />
                : <XCircle className="w-3.5 h-3.5 text-red-400 mt-0.5 shrink-0" />
              }
              <div className="flex-1 min-w-0">
                <p className={`text-[11px] font-semibold ${check.passed ? "text-slate-600" : "text-slate-800"}`}>
                  {check.name}
                  <span className="text-slate-400 font-normal ml-1">+{check.maxPoints}pts</span>
                </p>
                {check.recommendation && (
                  <p className="text-[10px] text-slate-500 leading-snug">{check.recommendation}</p>
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
