import { useState, useEffect } from 'react';
import { MetricCard } from '../../components/shared/MetricCard';
import { DataTable } from '../../components/shared/DataTable';
import { StatusIndicator } from '../../components/shared/StatusIndicator';
import { PageContainer } from '../../components/shared/PageContainer';
import { dbisAdminApi } from '../../services/api/dbisAdminApi';

interface BridgeMetrics {
  totalVolume: number;
  activeClaims: number;
  challengeStatistics: {
    total: number;
    successful: number;
    failed: number;
  };
  liquidityPoolStatus: {
    eth: { total: number; available: number };
    weth: { total: number; available: number };
  };
}

export default function BridgeOverviewPage() {
  const [metrics, setMetrics] = useState<BridgeMetrics | null>(null);
  const [loading, setLoading] = useState(true);

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

  const loadMetrics = async () => {
    try {
      const data = await dbisAdminApi.getBridgeOverview();
      setMetrics(data);
    } catch (error) {
      console.error('Failed to load bridge metrics:', error);
    } finally {
      setLoading(false);
    }
  };

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

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

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <MetricCard
          title="Total Volume"
          value={`${metrics?.totalVolume.toLocaleString() || 0} ETH`}
          subtitle="All time"
        />
        <MetricCard
          title="Active Claims"
          value={metrics?.activeClaims.toString() || '0'}
          subtitle="Pending finalization"
        />
        <MetricCard
          title="Challenges"
          value={metrics?.challengeStatistics.total.toString() || '0'}
          subtitle={`${metrics?.challengeStatistics.successful || 0} successful`}
        />
        <MetricCard
          title="Liquidity"
          value={`${metrics?.liquidityPoolStatus.eth.available.toLocaleString() || 0} ETH`}
          subtitle="Available"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-semibold mb-4">Liquidity Pool Status</h2>
          <div className="space-y-4">
            <div>
              <div className="flex justify-between mb-2">
                <span>ETH Pool</span>
                <StatusIndicator status="healthy" />
              </div>
              <div className="text-sm text-gray-600">
                Total: {metrics?.liquidityPoolStatus.eth.total.toLocaleString() || 0} ETH
                <br />
                Available: {metrics?.liquidityPoolStatus.eth.available.toLocaleString() || 0} ETH
              </div>
            </div>
            <div>
              <div className="flex justify-between mb-2">
                <span>WETH Pool</span>
                <StatusIndicator status="healthy" />
              </div>
              <div className="text-sm text-gray-600">
                Total: {metrics?.liquidityPoolStatus.weth.total.toLocaleString() || 0} WETH
                <br />
                Available: {metrics?.liquidityPoolStatus.weth.available.toLocaleString() || 0} WETH
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-lg shadow p-6">
          <h2 className="text-xl font-semibold mb-4">Challenge Statistics</h2>
          <div className="space-y-2">
            <div className="flex justify-between">
              <span>Total Challenges</span>
              <span className="font-semibold">{metrics?.challengeStatistics.total || 0}</span>
            </div>
            <div className="flex justify-between">
              <span>Successful</span>
              <span className="text-green-600">{metrics?.challengeStatistics.successful || 0}</span>
            </div>
            <div className="flex justify-between">
              <span>Failed</span>
              <span className="text-red-600">{metrics?.challengeStatistics.failed || 0}</span>
            </div>
          </div>
        </div>
      </div>
    </PageContainer>
  );
}

