import React, { useEffect, useState } from 'react';
import { Table, Typography, Spin, Message, Card, Empty, Badge } from '@arco-design/web-react';
import { IconArrowRise, IconArrowFall } from '@arco-design/web-react/icon';
import '@arco-design/web-react/dist/css/arco.css';
import API_BASE_URL from '../config';

const columns = (bids) => [
  {
    title: 'Timestamp',
    dataIndex: 'timestamp',
    sorter: (a, b) => new Date(a.timestamp) - new Date(b.timestamp),
    render: (val) => new Date(val).toLocaleString(),
    width: 180,
  },
  {
    title: 'Quantity (MW)',
    dataIndex: 'quantity',
    sorter: (a, b) => a.quantity - b.quantity,
    render: (val) => val.toFixed(2),
    width: 180,
  },
  {
    title: 'Price ($/MWh)',
    dataIndex: 'price',
    sorter: (a, b) => a.price - b.price,
    render: (val) => `$${val.toFixed(2)}`,
    width: 180,
  },
  {
    title: 'Status',
    dataIndex: 'status',
    sorter: (a, b) => a.status.localeCompare(b.status),
    filters: [
      { text: 'Submitted', value: 'Submitted' },
      { text: 'Success', value: 'Success' },
      { text: 'Fail', value: 'Fail' },
    ],
    onFilter: (value, record) => record.status === value,
    render: (val) => (
      <Badge status={val === 'Success' ? 'success' : val === 'Fail' ? 'error' : 'processing'} text={val} />
    ),
    width: 180,
  },
  {
    title: 'PnL',
    dataIndex: 'pnl',
    sorter: (a, b) => (a.pnl || 0) - (b.pnl || 0),
    render: (val) => {
      if (val === null) return 'N/A';
      const isProfit = val >= 0;
      const color = isProfit ? 'green' : 'red';
      return (
        <Typography.Text style={{ color, display: 'flex', alignItems: 'center', gap: 4 }}>
          {isProfit ? <IconArrowRise /> : <IconArrowFall />}
          {val.toFixed(2)}
        </Typography.Text>
      );
    },
    width: 180,
  },
  {
    title: 'Market',
    dataIndex: 'market',
    sorter: (a, b) => a.market.localeCompare(b.market),
    filters: [
      { text: 'ISONE', value: 'ISONE' },
      { text: 'NYISO', value: 'NYISO' },
      { text: 'MISO', value: 'MISO' },
    ],
    onFilter: (value, record) => record.market === value,
    render: (val) => val,
    width: 180,
  },
];

function BidsPage() {
  const [bids, setBids] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${API_BASE_URL}/bids/`)
      .then((res) => {
        if (!res.ok) throw new Error('Failed to fetch bids');
        return res.json();
      })
      .then((json) => setBids(json))
      .catch((err) => {
        console.error(err);
        Message.error('Failed to load bids.');
      })
      .finally(() => setLoading(false));
  }, []);

  return (
    <div style={{ padding: 20, backgroundColor: 'var(--color-fill-2)', minHeight: 'calc(100vh - 150px)', animation: 'fadeSlideIn 0.6s ease' }}>
      <Typography.Title heading={3} style={{ textAlign: 'center', marginBottom: 20 }}>
        Your Submitted Bids
      </Typography.Title>

      <Card
        style={{
          marginTop: 16,
          borderRadius: 16,
          boxShadow: '0 8px 24px rgba(0,0,0,0.08)',
          background: 'linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(245,245,245,0.95) 100%)',
          backdropFilter: 'blur(8px)',
          overflow: 'hidden',
          padding: 20
        }}
      >
        {loading ? (
          <div style={{ textAlign: 'center', padding: 80 }}>
            <Spin />
          </div>
        ) : bids.length === 0 ? (
          <div style={{ textAlign: 'center', padding: 80 }}>
            <Empty description="No bids found yet." />
          </div>
        ) : (
          <div className="responsive-table-wrapper">
          <Table
            columns={columns(bids)}
            data={bids}
            rowKey="id"
            pagination={{
              pageSize: 50,
              sizeCanChange: true,
              showTotal: true,
            }}
            scroll={{ x: true }}
            border
            style={{ transition: 'opacity 0.5s ease-in-out' }}
            rowClassName={() => 'table-row-hover'}
          />
          </div>
        )}
      </Card>

      <style>{`
        @keyframes fadeSlideIn {
          0% {
            opacity: 0;
            transform: translateY(20px);
          }
          100% {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .table-row-hover:hover {
          background-color: var(--color-fill-3);
          transition: background-color 0.3s ease;
        }

        responsive-table-wrapper {
          width: 100%;
          overflow-x: auto;
        }

        /* Prevent wrapping in header and cells */
        .responsive-table-wrapper table th,
        .responsive-table-wrapper table td {
          white-space: nowrap;
        }

        /* Optional: smaller fonts on mobile */
        @media (max-width: 768px) {
          .responsive-table-wrapper table {
            font-size: 12px;
          }
          .responsive-table-wrapper th,
          .responsive-table-wrapper td {
            padding: 8px;
          }
        }

      `}</style>
    </div>
  );
}

export default BidsPage;