'use client';

import { SUGGESTED_TOPICS, formatNumber } from '@/lib/mock-data';
import { motion } from 'framer-motion';
import { Sparkles, Target, TrendingUp, Zap } from 'lucide-react';
import Link from 'next/link';

function DifficultyBar({ value }: { value: number }) {
  const color = value < 35 ? '#34d399' : value < 55 ? '#fbbf24' : '#f87171';
  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 h-1 bg-bg rounded-full overflow-hidden">
        <div className="h-full rounded-full" style={{ width: `${value}%`, background: color }} />
      </div>
      <span className="text-[11px] font-mono" style={{ color }}>
        {value}
      </span>
    </div>
  );
}

const INTENT_LABELS: Record<string, string> = {
  informational: 'Info',
  commercial: 'Commercial',
  transactional: 'Transac.',
};

const INTENT_COLORS: Record<string, string> = {
  informational: 'text-sky-400 bg-sky-500/10 border-sky-500/25',
  commercial: 'text-purple-400 bg-purple-500/10 border-purple-500/25',
  transactional: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/25',
};

export function SuggestedTopics() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.35 }}
    >
      <div className="mb-4">
        <h2 className="text-[14px] font-semibold tracking-tight">Sujets suggérés par l'IA</h2>
        <p className="text-[12px] text-text-dim mt-0.5">
          Basé sur ton historique et les opportunités SEO détectées
        </p>
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        {SUGGESTED_TOPICS.map((topic, i) => (
          <motion.div
            key={topic.title}
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.35, ease: 'easeOut', delay: 0.35 + i * 0.05 }}
            whileHover={{ scale: 1.015 }}
            className="group bg-bg-card border border-border hover:border-border-bright rounded-2xl p-4 flex flex-col gap-3 transition-colors cursor-pointer"
          >
            <div className="flex items-start justify-between gap-2">
              <p className="text-[13px] font-medium leading-snug flex-1">{topic.title}</p>
              <span
                className={`px-2 py-0.5 rounded-full text-[10px] font-medium border flex-shrink-0 ${INTENT_COLORS[topic.intent]}`}
              >
                {INTENT_LABELS[topic.intent]}
              </span>
            </div>

            <div className="space-y-2">
              <div className="flex items-center gap-2 text-[11px] text-text-dim">
                <TrendingUp className="w-3.5 h-3.5 text-text-dimmer flex-shrink-0" />
                <span>Volume</span>
                <span className="ml-auto font-mono font-medium text-text">
                  {formatNumber(topic.volume)} / mois
                </span>
              </div>
              <div className="flex items-center gap-2 text-[11px] text-text-dim">
                <Target className="w-3.5 h-3.5 text-text-dimmer flex-shrink-0" />
                <span>Difficulté</span>
                <div className="ml-auto w-24">
                  <DifficultyBar value={topic.difficulty} />
                </div>
              </div>
              <div className="flex items-center gap-2 text-[11px] text-text-dim">
                <Zap className="w-3.5 h-3.5 text-text-dimmer flex-shrink-0" />
                <span>Intention</span>
                <span className="ml-auto font-medium text-text">{INTENT_LABELS[topic.intent]}</span>
              </div>
            </div>

            <Link
              href={`/atelier?topic=${encodeURIComponent(topic.title)}`}
              className="mt-auto flex items-center justify-center gap-1.5 px-3 py-2 rounded-xl text-[12px] font-medium border border-border group-hover:border-accent/40 group-hover:bg-accent/10 group-hover:text-accent-light transition-all"
            >
              <Sparkles className="w-3.5 h-3.5" />
              Générer ce contenu
            </Link>
          </motion.div>
        ))}
      </div>
    </motion.div>
  );
}