'use client';
import { useState, useEffect } from 'react';
import { Loader2, Plus, RefreshCw, Search } from 'lucide-react';

const PLAN_BADGE = {
  free:     'bg-gray-600 text-gray-200',
  starter:  'bg-blue-600 text-white',
  pro:      'bg-purple-600 text-white',
  business: 'bg-yellow-600 text-black',
};

export default function AdminBillingPage() {
  const [users, setUsers]       = useState([]);
  const [loading, setLoading]   = useState(true);
  const [search, setSearch]     = useState('');
  const [crediting, setCrediting] = useState(null); // user being credited
  const [amount, setAmount]     = useState('');
  const [desc, setDesc]         = useState('');
  const [saving, setSaving]     = useState(false);

  async function load() {
    setLoading(true);
    const res = await fetch('/api/billing/admin/users').then(r => r.json());
    setUsers(Array.isArray(res) ? res : []);
    setLoading(false);
  }

  useEffect(() => { load(); }, []);

  async function handleCredit(userId) {
    if (!amount || isNaN(parseInt(amount))) return;
    setSaving(true);
    await fetch('/api/billing/admin/credit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ user_id: userId, amount: parseInt(amount), description: desc || undefined }),
    });
    setCrediting(null);
    setAmount('');
    setDesc('');
    setSaving(false);
    load();
  }

  const filtered = users.filter(u =>
    !search || u.email?.toLowerCase().includes(search.toLowerCase()) || u.name?.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <h2 className="font-semibold">Балансы пользователей</h2>
        <div className="flex items-center gap-2">
          <div className="relative">
            <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
            <input
              value={search} onChange={e => setSearch(e.target.value)}
              placeholder="Поиск по email..."
              className="input pl-8 py-1.5 text-sm w-48"
            />
          </div>
          <button onClick={load} className="btn-ghost p-2"><RefreshCw className="w-4 h-4" /></button>
        </div>
      </div>

      {loading && <div className="py-8 text-center"><Loader2 className="w-5 h-5 animate-spin mx-auto text-accent" /></div>}

      {!loading && (
        <div className="card overflow-hidden">
          <table className="w-full text-sm">
            <thead className="bg-surface2 text-xs text-gray-400">
              <tr>
                <th className="px-4 py-2.5 text-left">Пользователь</th>
                <th className="px-4 py-2.5 text-center">Тариф</th>
                <th className="px-4 py-2.5 text-right">Кредиты</th>
                <th className="px-4 py-2.5 text-right">Сброс</th>
                <th className="px-4 py-2.5 text-center">Действия</th>
              </tr>
            </thead>
            <tbody>
              {filtered.map(u => (
                <>
                  <tr key={u.id} className="border-t border-border hover:bg-surface2/50">
                    <td className="px-4 py-2.5">
                      <div className="font-medium">{u.name || u.email}</div>
                      {u.name && <div className="text-xs text-gray-500">{u.email}</div>}
                    </td>
                    <td className="px-4 py-2.5 text-center">
                      <span className={`text-xs px-2 py-0.5 rounded font-medium ${PLAN_BADGE[u.plan_code] || PLAN_BADGE.free}`}>
                        {u.plan_name || 'Free'}
                      </span>
                    </td>
                    <td className="px-4 py-2.5 text-right font-bold">{u.credits ?? 0}</td>
                    <td className="px-4 py-2.5 text-right text-xs text-gray-500">
                      {u.reset_at ? new Date(u.reset_at).toLocaleDateString('ru-RU') : '—'}
                    </td>
                    <td className="px-4 py-2.5 text-center">
                      <button
                        onClick={() => setCrediting(crediting === u.id ? null : u.id)}
                        className="btn-ghost px-2 py-1 text-xs flex items-center gap-1 mx-auto"
                      >
                        <Plus className="w-3 h-3" /> Начислить
                      </button>
                    </td>
                  </tr>
                  {crediting === u.id && (
                    <tr key={`${u.id}-credit`} className="border-t border-accent/20 bg-accent/5">
                      <td colSpan={5} className="px-4 py-3">
                        <div className="flex items-center gap-2 flex-wrap">
                          <input
                            type="number" value={amount} onChange={e => setAmount(e.target.value)}
                            placeholder="Кол-во кредитов" className="input py-1.5 text-sm w-36"
                            autoFocus
                          />
                          <input
                            value={desc} onChange={e => setDesc(e.target.value)}
                            placeholder="Комментарий (необязательно)" className="input py-1.5 text-sm flex-1 min-w-40"
                          />
                          <button
                            onClick={() => handleCredit(u.id)}
                            disabled={saving || !amount}
                            className="btn-primary py-1.5 px-3 text-sm"
                          >
                            {saving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : 'Начислить'}
                          </button>
                          <button onClick={() => setCrediting(null)} className="btn-ghost py-1.5 px-3 text-sm">Отмена</button>
                        </div>
                      </td>
                    </tr>
                  )}
                </>
              ))}
              {!filtered.length && (
                <tr><td colSpan={5} className="px-4 py-6 text-center text-gray-500">Пользователи не найдены</td></tr>
              )}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}