'use client';

import { CURRENT_CLIENT } from '@/lib/mock-data';
import { motion, useAnimation } from 'framer-motion';
import { Check, ExternalLink } from 'lucide-react';
import { useEffect, useRef } from 'react';

const FEATURES = [
  "Jusqu'à 60 contenus longs formats / mois",
  '2,5 millions de tokens IA inclus',
  'Mémoire éditoriale illimitée',
  'Planning automatique hebdo',
  'Dashboard et analytics',
];

const RADIUS = 54;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS;

export function CurrentPlanCard() {
  const pct = CURRENT_CLIENT.tokensUsed / CURRENT_CLIENT.tokensQuota;
  const offset = CIRCUMFERENCE * (1 - pct);
  const controls = useAnimation();
  const hasAnimated = useRef(false);

  useEffect(() => {
    if (hasAnimated.current) return;
    hasAnimated.current = true;
    controls.start({ strokeDashoffset: offset, transition: { duration: 1.4, ease: 'easeOut' } });
  }, [controls, offset]);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.45, ease: 'easeOut' }}
      className="relative bg-bg-card border border-border rounded-2xl p-6 overflow-hidden"
    >
      {/* Glow accent */}
      <div className="pointer-events-none absolute -top-20 -right-20 w-64 h-64 rounded-full bg-accent/10 blur-3xl" />

      <div className="flex flex-col lg:flex-row lg:items-start gap-8">
        {/* Left — infos plan */}
        <div className="flex-1 min-w-0">
          <p className="text-[11px] text-text-dim uppercase tracking-widest mb-2">Plan actuel</p>
          <div className="flex items-center gap-3 mb-4">
            <span className="text-3xl font-bold font-mono">
              99 € <span className="text-lg font-normal text-text-dim">/ mois</span>
            </span>
            <span className="px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-gradient-to-r from-indigo-500 to-purple-500 text-white tracking-wide">
              Pro
            </span>
          </div>

          <ul className="space-y-2.5">
            {FEATURES.map((f) => (
              <li key={f} className="flex items-start gap-2.5 text-[13px] text-text-dim">
                <Check
                  className="w-4 h-4 text-emerald-400 flex-shrink-0 mt-0.5"
                  strokeWidth={2.5}
                />
                <span>{f}</span>
              </li>
            ))}
          </ul>

          <div className="flex flex-wrap items-center gap-4 mt-6">
            <button
              type="button"
              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-border-bright text-[13px] font-medium text-accent-light hover:bg-accent/10 transition-colors"
            >
              <ExternalLink className="w-3.5 h-3.5" />
              Gérer via portail Stripe
            </button>
            <button
              type="button"
              className="text-[12px] text-text-dimmer hover:text-red-400 transition-colors"
            >
              Résilier
            </button>
          </div>
        </div>

        {/* Right — progress ring */}
        <div className="flex flex-col items-center gap-3 flex-shrink-0">
          <div className="relative w-36 h-36">
            <svg className="w-full h-full -rotate-90" viewBox="0 0 128 128" aria-hidden="true">
              {/* Track */}
              <circle
                cx="64"
                cy="64"
                r={RADIUS}
                fill="none"
                stroke="rgba(99,102,241,0.12)"
                strokeWidth="10"
              />
              {/* Progress */}
              <motion.circle
                cx="64"
                cy="64"
                r={RADIUS}
                fill="none"
                stroke="url(#ring-grad)"
                strokeWidth="10"
                strokeLinecap="round"
                strokeDasharray={CIRCUMFERENCE}
                initial={{ strokeDashoffset: CIRCUMFERENCE }}
                animate={controls}
              />
              <defs>
                <linearGradient id="ring-grad" x1="0%" y1="0%" x2="100%" 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-bold font-mono">{Math.round(pct * 100)}%</span>
              <span className="text-[10px] text-text-dim uppercase tracking-wider mt-0.5">
                tokens
              </span>
            </div>
          </div>
          <div className="text-center">
            <p className="text-[12px] text-text-dim font-mono">
              {(CURRENT_CLIENT.tokensUsed / 1_000_000).toFixed(2)} M
            </p>
            <p className="text-[11px] text-text-dimmer">
              sur {(CURRENT_CLIENT.tokensQuota / 1_000_000).toFixed(1)} M
            </p>
          </div>
        </div>
      </div>
    </motion.div>
  );
}