igny8/frontend/src/components/dashboard/AccountInfoWidget.tsx

/**
 * Account Info Widget
 * Displays account-related billing information:
 * - Credits consumed/remaining this billing period
 * - Reset day (when credits refresh)
 * - Last payment date
 * - Next payment due date
 * - Current plan/package type
 */
import React from 'react';
import { useNavigate } from 'react-router-dom';
import ComponentCard from '../common/ComponentCard';
import Button from '../ui/button/Button';
import Badge from '../ui/badge/Badge';
import { CreditBalance, Subscription, Plan } from '../../services/billing.api';
import { 
  CalendarIcon, 
  CreditCardIcon, 
  UserCircleIcon,
  ArrowRightIcon,
} from '../../icons';

interface AccountInfoWidgetProps {
  balance: CreditBalance | null;
  subscription?: Subscription | null;
  plan?: Plan | null;
  userPlan?: any; // Plan from user.account.plan
  loading?: boolean;
}

// Helper to format dates
function formatDate(dateStr: string | undefined): string {
  if (!dateStr) return '—';
  try {
    const date = new Date(dateStr);
    return date.toLocaleDateString('en-US', { 
      month: 'short', 
      day: 'numeric',
      year: 'numeric'
    });
  } catch {
    return '—';
  }
}

// Helper to get days until date
function getDaysUntil(dateStr: string | undefined): number | null {
  if (!dateStr) return null;
  try {
    const date = new Date(dateStr);
    const now = new Date();
    const diff = date.getTime() - now.getTime();
    return Math.ceil(diff / (1000 * 60 * 60 * 24));
  } catch {
    return null;
  }
}

export default function AccountInfoWidget({ 
  balance, 
  subscription,
  plan,
  userPlan,
  loading = false,
}: AccountInfoWidgetProps) {
  const navigate = useNavigate();

  if (loading) {
    return (
      <ComponentCard title="Account Info" desc="Billing & subscription">
        <div className="animate-pulse space-y-4">
          {[1, 2, 3, 4].map((i) => (
            <div key={i} className="h-12 bg-gray-100 dark:bg-gray-800 rounded-lg" />
          ))}
        </div>
      </ComponentCard>
    );
  }

  const periodEnd = subscription?.current_period_end;
  const daysUntilReset = getDaysUntil(periodEnd);
  
  // Resolve plan - prefer explicit plan, then subscription plan, then userPlan
  const currentPlan = plan || (subscription?.plan && typeof subscription.plan === 'object' ? subscription.plan : null) || userPlan;

  return (
    <ComponentCard 
      title="Account Info" 
      desc="Billing & subscription"
      headerContent={
        <Button
          variant="ghost"
          size="sm"
          onClick={() => navigate('/account/settings')}
          endIcon={<ArrowRightIcon className="w-3 h-3" />}
        >
          Manage
        </Button>
      }
    >
      <div className="space-y-4">
        {/* Current Plan */}
        <div className="flex items-center justify-between p-4 rounded-xl bg-brand-50 dark:bg-brand-900/20 border border-brand-100 dark:border-brand-800">
          <div className="flex items-center gap-3">
            <div className="size-10 rounded-lg bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center text-brand-600 dark:text-brand-400">
              <UserCircleIcon className="w-5 h-5" />
            </div>
            <div>
              <p className="text-xs text-brand-600 dark:text-brand-400 uppercase font-medium tracking-wide">
                Current Plan
              </p>
              <p className="text-lg font-semibold text-brand-900 dark:text-brand-100">
                {currentPlan?.name || 'Free Plan'}
              </p>
            </div>
          </div>
          {subscription?.status && (
            <Badge 
              variant="soft" 
              color={subscription.status === 'active' ? 'success' : 'warning'}
              size="sm"
            >
              {subscription.status}
            </Badge>
          )}
        </div>

        {/* Info Grid */}
        <div className="grid grid-cols-2 gap-3">
          {/* Credits This Period */}
          <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700">
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">
              Used This Period
            </p>
            <p className="text-xl font-bold text-gray-900 dark:text-white">
              {balance?.credits_used_this_month?.toLocaleString() || '0'}
            </p>
            <p className="text-sm text-gray-400 dark:text-gray-500">
              of {balance?.plan_credits_per_month?.toLocaleString() || '0'} credits
            </p>
          </div>

          {/* Credits Remaining */}
          <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700">
            <p className="text-sm text-gray-500 dark:text-gray-400 mb-1">
              Remaining
            </p>
            <p className="text-xl font-bold text-success-600 dark:text-success-400">
              {balance?.credits_remaining?.toLocaleString() || '0'}
            </p>
            <p className="text-sm text-gray-400 dark:text-gray-500">
              credits available
            </p>
          </div>

          {/* Reset Date */}
          <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700">
            <div className="flex items-center gap-2 mb-1">
              <CalendarIcon className="w-4 h-4 text-gray-400" />
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Credits Reset
              </p>
            </div>
            <p className="text-base font-semibold text-gray-900 dark:text-white">
              {formatDate(periodEnd)}
            </p>
            {daysUntilReset !== null && daysUntilReset > 0 && (
              <p className="text-sm text-gray-400 dark:text-gray-500">
                in {daysUntilReset} day{daysUntilReset !== 1 ? 's' : ''}
              </p>
            )}
          </div>

          {/* Next Payment */}
          <div className="p-4 rounded-xl bg-gray-50 dark:bg-gray-800/50 border border-gray-100 dark:border-gray-700">
            <div className="flex items-center gap-2 mb-1">
              <CreditCardIcon className="w-4 h-4 text-gray-400" />
              <p className="text-sm text-gray-500 dark:text-gray-400">
                Next Payment
              </p>
            </div>
            <p className="text-base font-semibold text-gray-900 dark:text-white">
              {formatDate(periodEnd)}
            </p>
            {currentPlan?.price && (
              <p className="text-sm text-gray-400 dark:text-gray-500">
                ${currentPlan.price}/mo
              </p>
            )}
          </div>
        </div>

        {/* Upgrade CTA (if on free or lower plan) */}
        {(!currentPlan || currentPlan.slug === 'free' || currentPlan.slug === 'starter') && (
          <Button
            variant="primary"
            tone="brand"
            size="sm"
            onClick={() => navigate('/account/upgrade')}
            className="w-full"
          >
            Upgrade Plan
          </Button>
        )}
      </div>
    </ComponentCard>
  );
}