import { useState, useEffect } from 'react';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { getCreditTransactions, getCreditBalance, CreditTransaction as BillingTransaction, CreditBalance } from '../../services/billing.api';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';

// Credit costs per operation (Phase 0: Credit-only system)
const CREDIT_COSTS: Record<string, { cost: number | string; description: string }> = {
  clustering: { cost: 10, description: 'Per clustering request' },
  idea_generation: { cost: 15, description: 'Per cluster → ideas request' },
  content_generation: { cost: '1 per 100 words', description: 'Per 100 words generated' },
  image_prompt_extraction: { cost: 2, description: 'Per content piece' },
  image_generation: { cost: 5, description: 'Per image generated' },
  linking: { cost: 8, description: 'Per content piece' },
  optimization: { cost: '1 per 200 words', description: 'Per 200 words optimized' },
  site_structure_generation: { cost: 50, description: 'Per site blueprint' },
  site_page_generation: { cost: 20, description: 'Per page generated' },
};

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

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

  const loadUsage = async () => {
    try {
      setLoading(true);
      const [txnData, balanceData] = await Promise.all([
        getCreditTransactions(),
        getCreditBalance()
      ]);
      setTransactions(txnData.results || []);
      setBalance(balanceData);
    } catch (error: any) {
      toast.error(`Failed to load usage data: ${error.message}`);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <div className="p-6">
        <PageMeta title="Usage" description="Monitor your credit usage" />
        <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="Usage" description="Monitor your credit usage and account limits" />
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Credit Usage & Activity</h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your credit usage and transaction history</p>
      </div>

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

          <Card className="p-6">
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Monthly Allocation</h3>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {(balance?.plan_credits_per_month ?? 0).toLocaleString()}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
              { (balance as any)?.subscription_plan || 'No plan' }
            </p>
          </Card>

          <Card className="p-6">
            <h3 className="text-sm font-medium text-gray-600 dark:text-gray-400 mb-2">Status</h3>
            <div className="mt-2">
                <Badge variant="light" className="text-lg">
                  {(balance as any)?.subscription_status || 'No subscription'}
                </Badge>
            </div>
          </Card>
        </div>
      )}

      {/* Credit Costs Reference */}
      <Card className="p-6 mb-6">
        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Costs per Operation</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {Object.entries(CREDIT_COSTS).map(([operation, info]) => (
            <div key={operation} className="flex items-start justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
              <div className="flex-1">
                <div className="font-medium text-gray-900 dark:text-white capitalize">
                  {operation.replace(/_/g, ' ')}
                </div>
                <div className="text-sm text-gray-600 dark:text-gray-400 mt-1">
                  {info.description}
                </div>
              </div>
              <div className="ml-4 text-right">
                <Badge variant="light" color="primary" className="font-semibold">
                  {typeof info.cost === 'number' ? `${info.cost} credits` : info.cost}
                </Badge>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Credit Activity Table */}
      <div className="mb-6">
        <h2 className="text-lg font-semibold text-gray-800 dark:text-white mb-4">Credit Activity</h2>
        <Card className="p-6">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-gray-200 dark:border-gray-700">
                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Date</th>
                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Type</th>
                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Amount</th>
                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Description</th>
                  <th className="text-left py-3 px-4 text-sm font-medium text-gray-700 dark:text-gray-300">Reference</th>
                </tr>
              </thead>
              <tbody>
                {transactions.map((txn) => (
                  <tr key={txn.id} className="border-b border-gray-100 dark:border-gray-800">
                    <td className="py-3 px-4 text-sm text-gray-900 dark:text-white">
                      {new Date(txn.created_at).toLocaleString()}
                    </td>
                    <td className="py-3 px-4">
                      <Badge 
                        variant="light" 
                        color={txn.amount >= 0 ? 'success' : 'error'}
                      >
                        {txn.transaction_type}
                      </Badge>
                    </td>
                    <td className={`py-3 px-4 text-sm font-medium ${
                      txn.amount >= 0 
                        ? 'text-green-600 dark:text-green-400' 
                        : 'text-red-600 dark:text-red-400'
                    }`}>
                      {txn.amount >= 0 ? '+' : ''}{txn.amount}
                    </td>
                    <td className="py-3 px-4 text-sm text-gray-600 dark:text-gray-400">
                      {txn.description}
                    </td>
                    <td className="py-3 px-4 text-sm text-gray-500 dark:text-gray-500">
                      {txn.reference_id || '-'}
                    </td>
                  </tr>
                ))}
                {transactions.length === 0 && (
                  <tr>
                    <td colSpan={5} className="py-8 text-center text-gray-500 dark:text-gray-400">
                      No transactions yet
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </div>
  );
}
