import { useState, useEffect } from 'react';
import { PageContainer } from '../../components/shared/PageContainer';
import { StatusIndicator } from '../../components/shared/StatusIndicator';
import { LineChart } from '../../components/shared/LineChart';

interface PegStatus {
  asset: string;
  currentPrice: string;
  targetPrice: string;
  deviationBps: number;
  isMaintained: boolean;
}

export default function PegManagementPage() {
  const [pegStatuses, setPegStatuses] = useState<PegStatus[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadPegStatus();
    const interval = setInterval(loadPegStatus, 5000);
    return () => clearInterval(interval);
  }, []);

  const loadPegStatus = async () => {
    try {
      // In production, call API
      setPegStatuses([
        { asset: 'USDT', currentPrice: '1.00', targetPrice: '1.00', deviationBps: 0, isMaintained: true },
        { asset: 'USDC', currentPrice: '1.00', targetPrice: '1.00', deviationBps: 0, isMaintained: true },
        { asset: 'WETH', currentPrice: '1.00', targetPrice: '1.00', deviationBps: 0, isMaintained: true },
      ]);
    } catch (error) {
      console.error('Failed to load peg status:', error);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <PageContainer>Loading...</PageContainer>;
  }

  return (
    <PageContainer>
      <h1 className="text-2xl font-bold mb-6">Peg Management</h1>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {pegStatuses.map((peg) => (
          <div key={peg.asset} className="bg-white rounded-lg shadow p-6">
            <div className="flex justify-between items-center mb-4">
              <h2 className="text-xl font-semibold">{peg.asset}</h2>
              <StatusIndicator status={peg.isMaintained ? 'healthy' : 'warning'} />
            </div>
            <div className="space-y-2">
              <div className="flex justify-between">
                <span>Current Price</span>
                <span className="font-semibold">${peg.currentPrice}</span>
              </div>
              <div className="flex justify-between">
                <span>Target Price</span>
                <span>${peg.targetPrice}</span>
              </div>
              <div className="flex justify-between">
                <span>Deviation</span>
                <span className={peg.deviationBps > 0 ? 'text-red-600' : 'text-green-600'}>
                  {peg.deviationBps > 0 ? '+' : ''}{peg.deviationBps} bps
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </PageContainer>
  );
}

