'use client';

import { KPIS } from '@/lib/mock-data';
import { motion } from 'framer-motion';

const DAYS_IN_MONTH = 30;
const DAYS_PASSED = 20;
const DAYS_LEFT = DAYS_IN_MONTH - DAYS_PASSED;

const BREAKDOWN = [
  { label: 'Génération', pct: 0.8, color: '#6366f1' },
  { label: 'Embedding', pct: 0.15, color: '#06b6d4' },
  { label: 'Analyse SERP', pct: 0.05, color: '#a855f7' },
];

export function TokensWidget() {
  const used = KPIS.tokensUsed;
  const quota = KPIS.tokensQuota;
  const pct = used / quota;
  const projection = Math.round((used / DAYS_PASSED) * DAYS_IN_MONTH);
  const projectionPct = Math.min(projection / quota, 1);

  // SVG circle gauge
  const radius = 54;
  const circumference = 2 * Math.PI * radius;
  const strokeDashoffset = circumference * (1 - pct);

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut', delay: 0.2 }}
      className="bg-bg-card border border-border rounded-2xl p-5 flex flex-col gap-5"
    >
      <h2 className="text-[14px] font-semibold tracking-tight">Consommation tokens</h2>

      {/* Gauge */}
      <div className="flex items-center justify-center">
        <div className="relative w-36 h-36">
          <svg
            width="144"
            height="144"
            viewBox="0 0 144 144"
            className="rotate-[-90deg]"
            aria-label="Jauge de consommation tokens"
            role="img"
          >
            <circle cx="72" cy="72" r={radius} fill="none" stroke="#1a1a2e" strokeWidth="12" />
            <motion.circle
              cx="72"
              cy="72"
              r={radius}
              fill="none"
              stroke="url(#gauge-gradient)"
              strokeWidth="12"
              strokeLinecap="round"
              strokeDasharray={circumference}
              initial={{ strokeDashoffset: circumference }}
              animate={{ strokeDashoffset }}
              transition={{ duration: 1.2, ease: 'easeOut' }}
            />
            <defs>
              <linearGradient id="gauge-gradient" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#6366f1" />
                <stop offset="100%" stopColor="#06b6d4" />
              </linearGradient>
            </defs>
          </svg>
          <div className="absolute inset-0 flex flex-col items-center justify-center">
            <span className="text-2xl font-semibold font-mono">{Math.round(pct * 100)}%</span>
            <span className="text-[10px] text-text-dim uppercase tracking-wider">utilisé</span>
          </div>
        </div>
      </div>

      {/* Chiffres */}
      <div className="space-y-1.5 text-[12px]">
        <div className="flex justify-between">
          <span className="text-text-dim">Utilisés</span>
          <span className="font-mono font-medium">{(used / 1_000_000).toFixed(2)} M</span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-dim">Quota mensuel</span>
          <span className="font-mono font-medium">{(quota / 1_000_000).toFixed(1)} M</span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-dim">Jours restants</span>
          <span className="font-mono font-medium">{DAYS_LEFT} j</span>
        </div>
        <div className="flex justify-between">
          <span className="text-text-dim">Projection fin de mois</span>
          <span
            className={`font-mono font-medium ${projectionPct > 0.9 ? 'text-amber-400' : 'text-emerald-400'}`}
          >
            {(projection / 1_000_000).toFixed(2)} M
          </span>
        </div>
      </div>

      {/* Breakdown */}
      <div className="space-y-2.5">
        {BREAKDOWN.map((b) => (
          <div key={b.label}>
            <div className="flex justify-between text-[11px] mb-1">
              <span className="text-text-dim">{b.label}</span>
              <span className="font-mono text-text-dimmer">{Math.round(b.pct * 100)}%</span>
            </div>
            <div className="h-1.5 bg-bg rounded-full overflow-hidden">
              <motion.div
                initial={{ width: 0 }}
                animate={{ width: `${b.pct * 100}%` }}
                transition={{ duration: 1, ease: 'easeOut', delay: 0.3 }}
                className="h-full rounded-full"
                style={{ background: b.color }}
              />
            </div>
          </div>
        ))}
      </div>

      <button
        type="button"
        className="w-full py-2 rounded-xl border border-border text-[12px] text-text-dim hover:text-text hover:border-border-bright transition-all"
      >
        Acheter des crédits
      </button>
    </motion.div>
  );
}