import React, { useEffect, useState } from "react";
import { fetchJson } from "../api/http";

interface CustomerData {
    customer_id: string;
    customer_name: string;
    total_rows: number;
    last_successful_sync: string;
    drift_status: string;
}

const REFRESH_INTERVAL_MS = 30_000;

export const DataQualityDashboard: React.FC = () => {
    const [data, setData] = useState<CustomerData[]>([]);
    const [error, setError] = useState<string | null>(null);
    const [lastUpdated, setLastUpdated] = useState<Date>(new Date());

    useEffect(() => {
        let isMounted = true;

        const load = async () => {
            try {
                const res = await fetchJson<CustomerData[]>("/api/data-quality");
                if (isMounted) {
                    setData(res);
                    setError(null);
                    setLastUpdated(new Date());
                }
            } catch (e) {
                if (isMounted) {
                    setError(e instanceof Error ? e.message : "Unknown error");
                }
            }
        };

        load();
        const interval = setInterval(load, REFRESH_INTERVAL_MS);

        return () => {
            isMounted = false;
            clearInterval(interval);
        };
    }, []);

    return (
        <div className="p-4">
            <h1 className="text-2xl font-bold mb-2">Data Quality Dashboard</h1>
            <p className="text-sm text-gray-500 mb-4">
                Last updated: {lastUpdated.toLocaleTimeString()} | Auto-refresh every 30s
            </p>
            {error && <div className="text-red-500 mb-4">Error: {