import React, { useEffect, useState } from 'react';
import { fetchCustomerMetrics } from '../api/metrics';

interface CustomerMetrics {
  customer_id: string;
  customer_name: string;
  row_count: number;
  last_successful_sync: string;
  drift_detected: boolean;
}

const DataQualityDashboard: React.FC = () => {
  const [metrics, setMetrics] = useState<CustomerMetrics[]>([]);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const loadMetrics = async () => {
      try {
        const data = await fetchCustomerMetrics();
        setMetrics(data);
        setError(null);
      } catch (e) {
        setError('Failed to load data quality metrics');
      }
    };

    loadMetrics();
    const interval = setInterval(loadMetrics, 30000); // auto-refresh every 30s
    return () => clearInterval(interval);
  }, []);

  return (
    <div style={{ padding: '20px', fontFamily: 'monospace' }}>
      <h1>Data Quality Dashboard</h1>
      {error && <p style={{ color: 'red' }}>{error}</p>}
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <th>Customer</th>
            <th>Row Count</th>
            <th>Last Sync</th>
            <th>Drift</th>
          </tr>
        </thead>
        <tbody>
          {metrics.map((m) => (
            <tr key={m.customer_id}>
              <td>{m.customer_name}</td>
              <td>{m.row_count}</td>
              <td>{new Date(m.last_successful_sync).