'use client';
import { useState } from 'react';
import { Cpu, ChevronDown } from 'lucide-react';

export default function ArticleMeta({ article }) {
  const [open, setOpen] = useState(false);
  const tokensIn = article.tokens_in || 0;
  const tokensOut = article.tokens_out || 0;
  const total = tokensIn + tokensOut;
  if (!total) return null;

  return (
    <div className="mt-12 article-card p-5 sm:p-6">
      <button
        onClick={() => setOpen(o => !o)}
        className="w-full flex items-center justify-between gap-3 text-left"
      >
        <div className="flex items-center gap-2">
          <Cpu className="w-4 h-4 accent" />
          <span className="font-medium ink">Как сделана эта статья</span>
        </div>
        <ChevronDown className={`w-4 h-4 mute transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>

      {open && (
        <div className="mt-4 pt-4 border-t-soft grid sm:grid-cols-3 gap-4 text-sm">
          <div>
            <div className="text-xs mute uppercase tracking-wider mb-1">Модель</div>
            <div className="ink font-medium">Claude Sonnet 4.6</div>
          </div>
          <div>
            <div className="text-xs mute uppercase tracking-wider mb-1">Токены</div>
            <div className="ink font-medium tabular-nums">
              {tokensIn.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">in</span>
              {' / '}
              {tokensOut.toLocaleString('ru-RU')} <span className="mute text-xs font-normal">out</span>
            </div>
            <div className="text-xs mute mt-1">≈ {total.toLocaleString('ru-RU')} всего</div>
          </div>
          <div>
            <div className="text-xs mute uppercase tracking-wider mb-1">Процесс</div>
            <div className="ink font-medium">2 этапа</div>
            <div className="text-xs mute mt-1">генерация → self-critique</div>
          </div>
        </div>
      )}
    </div>
  );
}