/*
Project: Paper Trading Pope Prop Bets
Single-page React app cloning bittybot.net/paper-trading layout
Tech: React, Tailwind CSS, shadcn/ui, lucide-react, Framer Motion
*/

// src/App.jsx
import React from 'react';
import { Navbar } from './components/Navbar';
import { StatsPanel } from './components/StatsPanel';
import { Leaderboard } from './components/Leaderboard';
import { LimitCommands } from './components/LimitCommands';
import { TradesTable } from './components/TradesTable';
import { Footer } from './components/Footer';

export default function App() {
  // placeholder state; replace with real data hooks
  const stats = {
    prizePool: 0,
    totalBorrowed: 0,
    sidelinedCash: 0,
    totalEquity: 0,
    netExposure: { long: 0, short: 0 },
    netLeverage: { long: 0, short: 0 }
  };
  const leaderboard = [];
  const limitCommands = [];
  const openTrades = [];
  const closedTrades = [];

  return (
    <div className="min-h-screen bg-gray-50">
      <Navbar />
      <main className="p-4 space-y-8">
        <section>
          <h2 className="text-2xl font-semibold">Paper Trading Pope Prop Bets Rankings</h2>
          <p>All participants start with $100,000 virtual balance <button className="ml-2 text-blue-500">+ Reload</button></p>
        </section>

        <StatsPanel data={stats} />
        <Leaderboard data={leaderboard} />
        <LimitCommands data={limitCommands} />
        <TradesTable title="Open Bets" data={openTrades} />
        <TradesTable title="Closed Bets" data={closedTrades} closed />
      </main>
      <Footer />
    </div>
  );
}

// src/components/Navbar.jsx
import React from 'react';
import { motion } from 'framer-motion';
import { Menu } from 'lucide-react';

export function Navbar() {
  return (
    <motion.nav className="bg-white shadow p-4 flex justify-between items-center" initial={{ y: -50 }} animate={{ y: 0 }}>
      <div className="flex items-center space-x-4">
        <Menu className="w-6 h-6" />
        <span className="text-xl font-bold">PopePropPaper</span>
      </div>
      <ul className="flex space-x-6">
        <li className="hover:text-blue-600 cursor-pointer">Home</li>
        <li className="cursor-pointer relative group">
          Leaderboards
          <ul className="absolute hidden group-hover:block bg-white shadow mt-2 rounded">
            <li className="px-4 py-2 hover:bg-gray-100">Paper Trading</li>
            <li className="px-4 py-2 hover:bg-gray-100">Predictions</li>
          </ul>
        </li>
        <li className="hover:text-blue-600 cursor-pointer">How It Works</li>
      </ul>
    </motion.nav>
  );
}

// src/components/StatsPanel.jsx
import React from 'react';
import { Card, CardContent } from '@/components/ui/card';

export function StatsPanel({ data }) {
  return (
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
      <Card><CardContent><h3 className="text-sm">Prize Pool</h3><p>${data.prizePool}</p></CardContent></Card>
      <Card><CardContent><h3 className="text-sm">Total Borrowed</h3><p>${data.totalBorrowed}</p></CardContent></Card>
      <Card><CardContent><h3 className="text-sm">Sidelined Cash</h3><p>${data.sidelinedCash}</p></CardContent></Card>
      <Card><CardContent><h3 className="text-sm">Total Equity</h3><p>${data.totalEquity}</p></CardContent></Card>
      <Card className="md:col-span-2"><CardContent><h3 className="text-sm">Net Exposure</h3><p>Long: ${data.netExposure.long} | Short: ${data.netExposure.short}</p></CardContent></Card>
      <Card className="md:col-span-2"><CardContent><h3 className="text-sm">Net Leverage</h3><p>Long: {data.netLeverage.long}X | Short: {data.netLeverage.short}X</p></CardContent></Card>
    </div>
  );
}

// src/components/Leaderboard.jsx
import React from 'react';
import { Table } from '@/components/ui/table';

export function Leaderboard({ data }) {
  return (
    <section>
      <h3 className="text-xl font-medium">Leaderboard</h3>
      <Table>
        <thead>
          <tr>
            <th>Rank</th><th>User</th><th>Cash</th><th>Unrealized PnL</th><th>Total Balance</th><th>Total PnL</th><th>Bets</th>
          </tr>
        </thead>
        <tbody>
          {data.map((row,i)=>(
            <tr key={i} className="hover:bg-gray-100">
              <td>{row.rank}</td>
              <td>{row.user}</td>
              <td>${row.cash}</td>
              <td>${row.unrealized}</td>
              <td>${row.balance}</td>
              <td>${row.pnl}</td>
              <td>{row.bets}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </section>
  );
}

// src/components/LimitCommands.jsx
import React from 'react';
import { Table } from '@/components/ui/table';

export function LimitCommands({ data }) {
  return (
    <section>
      <h3 className="text-xl font-medium">Limit Commands</h3>
      <Table>
        <thead>
          <tr><th>Limit Price</th><th>User</th><th>Command</th></tr>
        </thead>
        <tbody>
          {data.map((cmd,i)=>(
            <tr key={i} className="hover:bg-gray-100">
              <td>${cmd.price}</td>
              <td>{cmd.user}</td>
              <td><code>{cmd.command}</code></td>
            </tr>
          ))}
        </tbody>
      </Table>
    </section>
  );
}

// src/components/TradesTable.jsx
import React from 'react';
import { Table } from '@/components/ui/table';

export function TradesTable({ title, data, closed }) {
  return (
    <section>
      <h3 className="text-xl font-medium">{title}</h3>
      <Table>
        <thead>
          <tr>
            <th>User</th><th>Opened</th><th>Open Price</th><th>Summary</th>
            {closed ? <><th>Closed</th><th>Close Price</th><th>PnL</th></> : <th>Unrealized PnL</th>}
          </tr>
        </thead>
        <tbody>
          {data.map((trade,i)=>(
            <tr key={i} className="hover:bg-gray-100">
              <td>{trade.user}</td>
              <td>{trade.opened}</td>
              <td>${trade.openPrice}</td>
              <td>{trade.summary}</td>
              {closed ? <>
                <td>{trade.closed}</td><td>${trade.closePrice}</td><td>${trade.pnl}</td>
              </> : <td>${trade.unrealized}</td>}
            </tr>
          ))}
        </tbody>
      </Table>
    </section>
  );
}

// src/components/Footer.jsx
import React from 'react';

export function Footer() {
  return (
    <footer className="text-center text-sm p-4 text-gray-500">
      <p>Need help? Have a suggestion? <a href="mailto:support@popepropbets.com" className="underline">Get in touch</a></p>
      <p>© PopePropBets • Page views: {/* dynamic */}</p>
    </footer>
  );
}