import { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchCreditBalance, CreditBalance } from '../../services/api';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';

export default function Credits() {
  const toast = useToast();
  const [balance, setBalance] = useState<CreditBalance | null>(null);
  const [loading, setLoading] = useState(true);

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

  const loadBalance = async () => {
    try {
      setLoading(true);
      const data = await fetchCreditBalance();
      setBalance(data);
    } catch (error: any) {
      toast.error(`Failed to load credit balance: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="p-6">
        <PageMeta title="Credits" />
        <div className="flex items-center justify-center h-64">
          <div className="text-gray-500">Loading...</div>
        </div>
      </div>
    );
  }

  return (
    <div className="p-6">
      <PageMeta title="Credits" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Balance</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and usage</p>
      </div>

      {balance && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Current Balance</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {balance.credits.toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Available credits</p>
          </Card>

          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Monthly Allocation</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {balance.plan_credits_per_month.toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits per month</p>
          </Card>

          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Used This Month</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {balance.credits_used_this_month.toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits consumed</p>
          </Card>

          <Card className="p-6">
            <div className="flex items-center justify-between mb-2">
              <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400">Remaining</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {balance.credits_remaining.toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Credits remaining</p>
          </Card>
        </div>
      )}
    </div>
  );
}