AIHostingTycoon/apps/web/src/pages/FinancePage.tsx

import { useGameStore } from '@/store';
import { formatMoney, formatPercent, FUNDING_ROUNDS } from '@ai-tycoon/shared';
import type { FundingRoundType } from '@ai-tycoon/shared';
import { TrendingUp, DollarSign, PiggyBank, BarChart3, Rocket } from 'lucide-react';
import { AreaChart, Area, XAxis, YAxis, ResponsiveContainer, LineChart, Line } from 'recharts';
import { canRaiseFunding } from '@ai-tycoon/game-engine';
import type { GameState } from '@ai-tycoon/shared';

export function FinancePage() {
  const money = useGameStore((s) => s.economy.money);
  const revenuePerTick = useGameStore((s) => s.economy.revenuePerTick);
  const expensesPerTick = useGameStore((s) => s.economy.expensesPerTick);
  const funding = useGameStore((s) => s.economy.funding);
  const history = useGameStore((s) => s.economy.financialHistory);
  const infrastructure = useGameStore((s) => s.infrastructure);
  const talent = useGameStore((s) => s.talent);
  const raiseFunding = useGameStore((s) => s.raiseFunding);

  const state = useGameStore.getState();
  const gameStateForFunding: GameState = {
    meta: state.meta, economy: state.economy, infrastructure: state.infrastructure,
    compute: state.compute, research: state.research, models: state.models,
    market: state.market, competitors: state.competitors, talent: state.talent,
    data: state.data, reputation: state.reputation, events: state.events,
    achievements: state.achievements,
  };
  const fundingStatus = canRaiseFunding(gameStateForFunding);

  const netIncome = revenuePerTick - expensesPerTick;
  const burnRate = expensesPerTick > revenuePerTick ? expensesPerTick - revenuePerTick : 0;
  const runway = burnRate > 0 ? money / burnRate : Infinity;

  const infraCosts = infrastructure.dataCenters.reduce(
    (s, dc) => s + dc.energyCostPerTick + dc.maintenanceCostPerTick, 0,
  );
  const talentCosts = talent.totalSalaryPerTick;

  return (
    <div className="space-y-6">
      <h2 className="text-2xl font-bold">Finance</h2>

      <div className="grid grid-cols-4 gap-4">
        <FinanceCard icon={DollarSign} label="Cash" value={formatMoney(money)} color="text-green-400" />
        <FinanceCard
          icon={TrendingUp}
          label="Net Income/s"
          value={formatMoney(netIncome)}
          color={netIncome >= 0 ? 'text-green-400' : 'text-red-400'}
        />
        <FinanceCard icon={PiggyBank} label="Valuation" value={formatMoney(funding.valuation)} color="text-purple-400" />
        <FinanceCard
          icon={BarChart3}
          label="Runway"
          value={runway === Infinity ? 'Infinite' : `${Math.floor(runway / 3600)}h`}
          color={runway < 3600 ? 'text-red-400' : 'text-blue-400'}
        />
      </div>

      <div className="grid grid-cols-2 gap-4">
        <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
          <h3 className="text-sm font-medium text-surface-400 mb-4">Cash Over Time</h3>
          {history.length > 1 ? (
            <ResponsiveContainer width="100%" height={200}>
              <AreaChart data={history}>
                <defs>
                  <linearGradient id="cashGrad" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stopColor="#6366f1" stopOpacity={0.3} />
                    <stop offset="100%" stopColor="#6366f1" stopOpacity={0} />
                  </linearGradient>
                </defs>
                <XAxis dataKey="tick" hide />
                <YAxis hide />
                <Area type="monotone" dataKey="money" stroke="#6366f1" fill="url(#cashGrad)" />
              </AreaChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-[200px] flex items-center justify-center text-surface-500 text-sm">
              Data will appear as time passes
            </div>
          )}
        </div>

        <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
          <h3 className="text-sm font-medium text-surface-400 mb-4">Revenue vs Expenses</h3>
          {history.length > 1 ? (
            <ResponsiveContainer width="100%" height={200}>
              <LineChart data={history}>
                <XAxis dataKey="tick" hide />
                <YAxis hide />
                <Line type="monotone" dataKey="revenue" stroke="#22c55e" dot={false} strokeWidth={2} />
                <Line type="monotone" dataKey="expenses" stroke="#ef4444" dot={false} strokeWidth={2} />
              </LineChart>
            </ResponsiveContainer>
          ) : (
            <div className="h-[200px] flex items-center justify-center text-surface-500 text-sm">
              Data will appear as time passes
            </div>
          )}
        </div>
      </div>

      <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
        <h3 className="text-sm font-medium text-surface-400 mb-4">Income Statement (per second)</h3>
        <div className="space-y-3">
          <div className="flex justify-between text-sm">
            <span className="text-surface-300">Revenue</span>
            <span className="font-mono text-success">{formatMoney(revenuePerTick)}</span>
          </div>
          <div className="border-t border-surface-700" />
          <div className="flex justify-between text-sm">
            <span className="text-surface-400 pl-4">Infrastructure</span>
            <span className="font-mono text-danger">-{formatMoney(infraCosts)}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-surface-400 pl-4">Talent</span>
            <span className="font-mono text-danger">-{formatMoney(talentCosts)}</span>
          </div>
          <div className="flex justify-between text-sm">
            <span className="text-surface-400 pl-4">Total Expenses</span>
            <span className="font-mono text-danger">-{formatMoney(expensesPerTick)}</span>
          </div>
          <div className="border-t border-surface-700" />
          <div className="flex justify-between text-sm font-semibold">
            <span>Net Income</span>
            <span className={`font-mono ${netIncome >= 0 ? 'text-success' : 'text-danger'}`}>
              {formatMoney(netIncome)}
            </span>
          </div>
        </div>
      </div>

      <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
        <h3 className="text-sm font-medium text-surface-400 mb-3">Funding</h3>
        <div className="flex items-center gap-4 mb-3">
          <div className="text-sm">
            Founder Equity: <span className="font-mono font-semibold">{formatPercent(funding.founderEquity)}</span>
          </div>
          <div className="text-sm">
            Total Raised: <span className="font-mono font-semibold">{formatMoney(funding.totalRaised)}</span>
          </div>
          {funding.isPublic && (
            <span className="text-xs px-2 py-1 rounded-full bg-accent/20 text-accent-light">Public</span>
          )}
        </div>

        {fundingStatus.nextRound && (
          <div className="bg-surface-800 rounded-lg p-4 mb-4 border border-surface-600">
            <div className="flex items-center justify-between mb-2">
              <h4 className="font-semibold text-sm capitalize">
                {fundingStatus.nextRound === 'ipo' ? 'IPO' : fundingStatus.nextRound.replace('series', 'Series ')}
              </h4>
              {fundingStatus.canRaise ? (
                <button
                  onClick={() => raiseFunding(fundingStatus.nextRound!)}
                  className="flex items-center gap-1.5 bg-accent hover:bg-accent-dark text-white rounded-lg px-4 py-2 text-sm font-medium"
                >
                  <Rocket size={14} />
                  Raise {formatMoney(FUNDING_ROUNDS[fundingStatus.nextRound! as FundingRoundType].amount)}
                </button>
              ) : (
                <span className="text-xs text-warning">{String(fundingStatus.reason ?? '')}</span>
              )}
            </div>
          </div>
        )}

        {funding.completedRounds.length === 0 ? (
          <p className="text-sm text-surface-500">No funding rounds completed yet.</p>
        ) : (
          <div className="space-y-2">
            {funding.completedRounds.map((round, i) => (
              <div key={i} className="bg-surface-800 rounded-lg p-3 flex items-center justify-between">
                <span className="text-sm font-medium capitalize">
                  {round.type === 'ipo' ? 'IPO' : round.type.replace('series', 'Series ')}
                </span>
                <div className="flex items-center gap-4 text-sm">
                  <span className="font-mono text-success">{formatMoney(round.amount)}</span>
                  <span className="text-surface-400">{formatPercent(round.dilution)} dilution</span>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function FinanceCard({ icon: Icon, label, value, color }: {
  icon: typeof DollarSign;
  label: string;
  value: string;
  color: string;
}) {
  return (
    <div className="bg-surface-900 border border-surface-700 rounded-xl p-4">
      <div className="flex items-center gap-2 mb-2">
        <Icon size={16} className={color} />
        <span className="text-xs text-surface-400 uppercase">{label}</span>
      </div>
      <div className="text-xl font-bold font-mono">{value}</div>
    </div>
  );
}