"use client";

import { useRef } from "react";
import { motion } from "framer-motion";
import { AlertTriangle, Lightbulb, CheckCircle, TrendingUp, Tag } from "lucide-react";
import type { Content } from "@/lib/mock-data";
import { formatTokens } from "@/lib/mock-data";

function CircleScore({ score }: { score: number }) {
  const radius = 42;
  const circ = 2 * Math.PI * radius;
  const offset = circ - (score / 100) * circ;
  const color =
    score >= 90 ? "#34d399" : score >= 70 ? "#818cf8" : "#f59e0b";

  return (
    <div className="flex flex-col items-center gap-2">
      <div className="relative w-24 h-24">
        <svg className="w-full h-full -rotate-90" viewBox="0 0 96 96">
          <circle
            cx="48"
            cy="48"
            r={radius}
            fill="none"
            stroke="#1a1a2e"
            strokeWidth="8"
          />
          <motion.circle
            cx="48"
            cy="48"
            r={radius}
            fill="none"
            stroke={color}
            strokeWidth="8"
            strokeLinecap="round"
            strokeDasharray={circ}
            initial={{ strokeDashoffset: circ }}
            animate={{ strokeDashoffset: offset }}
            transition={{ duration: 1.2, ease: "easeOut" }}
          />
        </svg>
        <div className="absolute inset-0 flex flex-col items-center justify-center">
          <span className="text-[22px] font-bold text-text leading-none">{score}</span>
          <span className="text-[10px] text-text-dim uppercase tracking-wider mt-0.5">/ 100</span>
        </div>
      </div>
      <span className="text-[12px] font-medium text-text-dim">Score SEO</span>
    </div>
  );
}

const SUGGESTIONS = [
  { icon: AlertTriangle, color: "text-amber-400", text: "Ajoute 2 liens internes vers des pages produits" },
  { icon: Lightbulb, color: "text-accent-light", text: "Le 3e H2 pourrait contenir le mot-clé exact" },
  { icon: CheckCircle, color: "text-emerald-400", text: "Meta description à 155 caractères — optimal" },
  { icon: Lightbulb, color: "text-accent-light", text: "Densité mot-clé OK (1,8 %)" },
];

const VERSIONS = [
  { label: "v3", desc: "Validé par Adam", date: "21/04/2026" },
  { label: "v2", desc: "IA reformule", date: "20/04/2026" },
  { label: "v1", desc: "Première génération", date: "19/04/2026" },
];

export function SeoSidebar({ content }: { content: Content }) {
  const readMin = Math.ceil(content.wordCount / 200);
  const density = (Math.random() * 0.8 + 1.2).toFixed(1);

  const keywordDensity = useRef(density);

  return (
    <aside className="w-full flex flex-col gap-4">
      {/* Score circulaire */}
      <div className="bg-bg-card border border-border rounded-xl p-5 flex flex-col items-center gap-4">
        <CircleScore score={content.seoScore} />

        {/* Métriques */}
        <div className="w-full grid grid-cols-2 gap-2 pt-2 border-t border-border">
          {[
            { label: "Mots", value: content.wordCount.toLocaleString("fr-FR") },
            { label: "Lecture", value: `~${readMin} min` },
            { label: "Tokens", value: formatTokens(content.tokensUsed) },
            { label: "Densité kw", value: `${keywordDensity.current} %` },
          ].map((m) => (
            <div key={m.label} className="bg-bg rounded-lg px-3 py-2">
              <div className="text-[10px] text-text-dim uppercase tracking-wider">{m.label}</div>
              <div className="text-[13px] font-semibold text-text mt-0.5">{m.value}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Rankings */}
      {content.rankingKeywords !== undefined && (
        <div className="bg-bg-card border border-border rounded-xl p-4">
          <div className="flex items-center gap-2 mb-3">
            <TrendingUp className="w-3.5 h-3.5 text-emerald-400" />
            <span className="text-[12px] font-semibold text-text uppercase tracking-wide">Rankings</span>
          </div>
          <div className="space-y-2">
            <div className="flex items-center justify-between text-[13px]">
              <span className="text-text-dim">Mots-clés en top 10</span>
              <span className="font-semibold text-emerald-400">{content.rankingKeywords}</span>
            </div>
            {content.topPosition !== undefined && (
              <div className="flex items-center justify-between text-[13px]">
                <span className="text-text-dim">Meilleure position</span>
                <span className="font-semibold text-text">#{content.topPosition}</span>
              </div>
            )}
          </div>
        </div>
      )}

      {/* Suggestions IA */}
      <div className="bg-bg-card border border-border rounded-xl p-4">
        <div className="text-[12px] font-semibold text-text uppercase tracking-wide mb-3">
          Suggestions IA
        </div>
        <div className="space-y-2.5">
          {SUGGESTIONS.map((s) => (
            <div key={s.text} className="flex items-start gap-2.5 text-[12.5px]">
              <s.icon className={`w-3.5 h-3.5 mt-0.5 shrink-0 ${s.color}`} />
              <span className="text-text-dim leading-snug">{s.text}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Historique versions */}
      <div className="bg-bg-card border border-border rounded-xl p-4">
        <div className="text-[12px] font-semibold text-text uppercase tracking-wide mb-3">
          Historique
        </div>
        <div className="space-y-2">
          {VERSIONS.map((v) => (
            <div key={v.label} className="flex items-center justify-between text-[12px]">
              <div className="flex items-center gap-2">
                <span className="w-6 h-5 rounded bg-bg flex items-center justify-center text-[10px] font-mono text-text-dim">
                  {v.label}
                </span>
                <span className="text-text-dim">{v.desc}</span>
              </div>
              <span className="text-text-dimmer font-mono">{v.date}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Tags */}
      <div className="bg-bg-card border border-border rounded-xl p-4">
        <div className="flex items-center gap-2 mb-3">
          <Tag className="w-3.5 h-3.5 text-text-dim" />
          <span className="text-[12px] font-semibold text-text uppercase tracking-wide">Tags</span>
        </div>
        <div className="flex flex-wrap gap-1.5">
          {[content.keyword, content.tone, content.intent].map((tag) => (
            <span
              key={tag}
              className="px-2.5 py-1 rounded-full text-[11px] border border-border bg-bg text-text-dim"
            >
              {tag}
            </span>
          ))}
        </div>
      </div>
    </aside>
  );
}