// components/overview.jsx — CostSummary, BudgetCards, SystemCard, ProvidersCard, OverviewTab.
// Depends on: React (global), StatusBadge, CostBar, Card

function CostSummary({ costs }) {
  if (!costs) return null;
  return (
    <Card title="Cost Summary">
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-center">
        <div>
          <div className="text-2xl font-mono font-bold text-gray-900">${costs.daily_total_usd?.toFixed(2)}</div>
          <div className="text-xs text-gray-500">Today</div>
        </div>
        <div>
          <div className="text-2xl font-mono font-bold text-gray-900">${costs.monthly_total_usd?.toFixed(2)}</div>
          <div className="text-xs text-gray-500">This month</div>
        </div>
        <div>
          <div className="text-2xl font-mono font-bold text-gray-900">{costs.total_requests}</div>
          <div className="text-xs text-gray-500">Total requests</div>
        </div>
        <div>
          <div className="text-2xl font-mono font-bold text-gray-900">{costs.accounts_active}/{costs.accounts_count}</div>
          <div className="text-xs text-gray-500">Active accounts</div>
        </div>
      </div>
      {costs.by_provider && Object.keys(costs.by_provider).length > 0 && (
        <div className="mt-4 pt-4 border-t border-gray-100">
          <h4 className="text-xs font-medium text-gray-500 mb-2">Cost by Provider</h4>
          <div className="flex flex-wrap gap-2">
            {Object.entries(costs.by_provider).map(([p, c]) => (
              <span key={p} className="px-2 py-1 bg-gray-100 rounded text-xs">
                <span className="font-medium">{p}</span>: ${c.toFixed(4)}
              </span>
            ))}
          </div>
        </div>
      )}
    </Card>
  );
}

function BudgetCards({ budget }) {
  const dailyUsed = budget ? budget.daily_limit_usd - budget.daily_remaining_usd : 0;
  const monthlyUsed = budget ? budget.monthly_limit_usd - budget.monthly_remaining_usd : 0;
  return (
    <>
      <Card title="Today's Budget">
        <CostBar used={dailyUsed} limit={budget?.daily_limit_usd || 5} label="Daily spend" />
      </Card>
      <Card title="Monthly Budget">
        <CostBar used={monthlyUsed} limit={budget?.monthly_limit_usd || 60} label="Monthly spend" />
      </Card>
    </>
  );
}

function SystemCard({ connected, health, modelCount, accountCount, providerCount, context }) {
  return (
    <Card title="System">
      <div className="space-y-1 text-xs">
        <div className="flex justify-between"><span className="text-gray-500">Proxy</span><StatusBadge ok={connected} label={health?.version || "?"} /></div>
        <div className="flex justify-between"><span className="text-gray-500">Providers</span><span className="font-mono">{providerCount} configured</span></div>
        <div className="flex justify-between"><span className="text-gray-500">Models</span><span className="font-mono">{modelCount}</span></div>
        <div className="flex justify-between"><span className="text-gray-500">Accounts</span><span className="font-mono">{accountCount}</span></div>
        <div className="flex justify-between"><span className="text-gray-500">Context buffer</span><span className="font-mono">{context?.files_tracked || 0} files, v{context?.version || 0}</span></div>
      </div>
    </Card>
  );
}

function ProvidersCard({ providers }) {
  if (!providers?.length) return null;
  return (
    <Card title="Configured Providers">
      <div className="flex flex-wrap gap-2">
        {providers.map(p => (
          <div key={p.name} className="flex items-center gap-1.5 px-2.5 py-1.5 bg-gray-50 rounded-lg border border-gray-200">
            <span className={`w-2 h-2 rounded-full ${p.has_key ? 'bg-emerald-500' : 'bg-gray-400'}`} />
            <span className="text-sm font-medium text-gray-700">{p.name}</span>
            <span className="text-xs text-gray-400">{p.model_count} models</span>
          </div>
        ))}
      </div>
    </Card>
  );
}

function OverviewTab({ budget, connected, health, models, providers, accounts, context, costs, refresh }) {
  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <BudgetCards budget={budget} />
        <SystemCard connected={connected} health={health} modelCount={models.length} accountCount={accounts.length} providerCount={providers.length} context={context} />
      </div>
      <ProvidersCard providers={providers} />
      <CostSummary costs={costs} />
      <AccountsPanel accounts={accounts} onRefresh={refresh} />
    </div>
  );
}
