import { useEffect } from 'react';
import { Link } from 'react-router-dom';
import PageMeta from '../../components/common/PageMeta';
import { Card } from '../../components/ui/card';
import Badge from '../../components/ui/badge/Badge';
import Button from '../../components/ui/button/Button';
import { DollarLineIcon } from '../../icons';
import { useBillingStore } from '../../store/billingStore';

export default function BillingBalancePanel() {
  const { balance, loading, error, loadBalance } = useBillingStore();

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

  if (loading && !balance) {
    return (
      <div className="p-4">
        <div className="text-gray-500">Loading credit balance...</div>
      </div>
    );
  }

  return (
    <div className="p-4 space-y-6">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Credit Balance</h2>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">Manage your AI credits and subscription status</p>
        </div>
        <Link to="/account/purchase-credits">
          <Button variant="primary" startIcon={<DollarLineIcon className="w-4 h-4" />}>
            Purchase Credits
          </Button>
        </Link>
      </div>

      {error && !balance && (
        <div className="p-4 rounded-lg border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/20 dark:text-amber-200">
          Balance unavailable. {error}
          <div className="mt-3">
            <Button variant="outline" size="sm" onClick={loadBalance}>
              Retry
            </Button>
          </div>
        </div>
      )}

      {balance && (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 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 ?? 0).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">Subscription Plan</h3>
            </div>
            <div className="text-3xl font-bold text-gray-900 dark:text-white">
              {(balance as any)?.subscription_plan || 'None'}
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
              {(balance?.plan_credits_per_month ?? 0) ? `${(balance?.plan_credits_per_month ?? 0).toLocaleString()} credits/month` : 'No subscription'}
            </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">Status</h3>
            </div>
            <div className="mt-2">
              <Badge variant="light" color={(balance as any)?.subscription_status === 'active' ? 'success' : 'secondary'} className="text-base font-semibold">
                {(balance as any)?.subscription_status || 'No subscription'}
              </Badge>
            </div>
            <p className="text-sm text-gray-500 dark:text-gray-400 mt-2">Subscription status</p>
          </Card>
        </div>
      )}

      {error && balance && (
        <div className="text-sm text-amber-600 dark:text-amber-400">
          Latest balance may be stale: {error}
        </div>
      )}
    </div>
  );
}