'use client';

import { FORMATS } from '@/lib/mock-data';
import { motion } from 'framer-motion';
import { BookOpen, FileText, HelpCircle, Layers, ShoppingBag } from 'lucide-react';

const ICON_MAP: Record<
  string,
  React.ComponentType<{ className?: string; strokeWidth?: number }>
> = {
  FileText,
  ShoppingBag,
  HelpCircle,
  Layers,
  BookOpen,
};

interface FormatRadioProps {
  selected: string;
  onSelect: (id: string) => void;
  wordCount: number;
}

export function FormatRadio({ selected, onSelect, wordCount }: FormatRadioProps) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      {FORMATS.map((fmt) => {
        const Icon = ICON_MAP[fmt.icon];
        const isSelected = selected === fmt.id;
        const tokenEstimate = Math.round((wordCount / fmt.avgWords) * fmt.avgTokens);
        return (
          <motion.button
            key={fmt.id}
            type="button"
            onClick={() => onSelect(fmt.id)}
            whileTap={{ scale: 0.98 }}
            className={`relative text-left p-4 rounded-xl border transition-all ${
              isSelected
                ? 'bg-accent/10 border-accent/50 shadow-[0_0_12px_rgba(99,102,241,0.15)]'
                : 'bg-bg border-border hover:border-border-bright hover:bg-bg-card-hover'
            }`}
          >
            {isSelected && (
              <div
                className="absolute inset-0 rounded-xl bg-accent/5 border border-accent/40"
              />
            )}
            <div className="relative z-10">
              <div className="flex items-center gap-2.5 mb-2">
                {Icon && (
                  <div
                    className={`w-8 h-8 rounded-lg flex items-center justify-center ${
                      isSelected ? 'bg-accent/20' : 'bg-bg-card'
                    }`}
                  >
                    <Icon
                      className={`w-4 h-4 ${isSelected ? 'text-accent-light' : 'text-text-dim'}`}
                      strokeWidth={1.75}
                    />
                  </div>
                )}
                <span
                  className={`text-[13px] font-semibold ${isSelected ? 'text-text' : 'text-text-dim'}`}
                >
                  {fmt.label}
                </span>
              </div>
              <div className="flex items-center gap-3 text-[11px] text-text-dimmer font-mono">
                <span>~{fmt.avgWords.toLocaleString()} mots</span>
                <span className="text-text-dimmer">·</span>
                <span className={isSelected ? 'text-accent-light' : ''}>
                  ~{tokenEstimate.toLocaleString()} tokens
                </span>
              </div>
            </div>
          </motion.button>
        );
      })}
    </div>
  );
}