"use client";
import { useState, useEffect } from "react";
import axios from "axios";
import { Tooltip } from "@/components/ui/tooltip";

const API_URL = "/api";

export function DataExplorer({ definitions }: { definitions: Record<string, string> }) {
    const [data, setData] = useState<any[]>([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        axios.get(`${API_URL}/data/full?limit=200`).then(res => {
            setData(res.data);
            setLoading(false);
        });
    }, []);

    const columns = [
        "PO_NO", "Article", "Order Qty", "Reserver Qty as per Std Norms", "Actual Gr Opening", "Deviation", "Finish", "Route", "Product"
    ];

    const getColumnLabel = (col: string) => {
        if (col === "PO_NO") return "PO (Production Order)";
        if (col === "Reserver Qty as per Std Norms") return "Reserved Qty";
        if (col === "Actual Gr Opening") return "Greige Issuance";
        return col;
    };

    if (loading) return <div className="p-8 text-center text-neutral-500">Loading Full Dataset...</div>;

    return (
        <div className="bg-neutral-900 border border-neutral-800 rounded-xl overflow-hidden shadow-2xl">
            <div className="p-4 border-b border-neutral-800 bg-neutral-900/80 backdrop-blur sticky top-0 flex justify-between items-center">
                <h3 className="text-lg font-bold text-white">Full Data Explorer</h3>
                <span className="text-xs text-neutral-500 uppercase tracking-wider">Top 200 Records</span>
            </div>
            <div className="overflow-x-auto max-h-[600px]">
                <table className="w-full text-left text-sm whitespace-nowrap">
                    <thead>
                        <tr className="bg-neutral-950 text-neutral-400 border-b border-neutral-800">
                            {columns.map(col => (
                                <th key={col} className="p-3 font-medium sticky top-0 bg-neutral-950 z-10 border-b border-neutral-800">
                                    <Tooltip content={definitions[col]}>
                                        {getColumnLabel(col)}
                                    </Tooltip>
                                </th>
                            ))}
                        </tr>
                    </thead>
                    <tbody className="divide-y divide-neutral-800/50">
                        {data.map((row, i) => (
                            <tr key={i} className="hover:bg-neutral-800/50 transition-colors">
                                <td className="p-3 font-mono text-neutral-300">{row['PO_NO']}</td>
                                <td className="p-3 text-blue-400 font-medium">{row['Article']}</td>
                                <td className="p-3 text-right">{row['Order Qty']}</td>
                                <td className="p-3 text-right text-neutral-400">{row['Reserver Qty as per Std Norms']}</td>
                                <td className="p-3 text-right font-bold text-neutral-200">{row['Actual Gr Opening']}</td>
                                <td className={
                                    `p-3 text-right font-bold ${row['Deviation'] < 0 ? 'text-red-400' : 'text-green-400'}`
                                }>
                                    {row['Deviation'] > 0 ? "+" : ""}{row['Deviation']?.toFixed(1)}
                                </td>
                                <td className="p-3 max-w-[200px] truncate" title={row['Finish']}>{row['Finish']}</td>
                                <td className="p-3">{row['Route']}</td>
                                <td className="p-3 text-neutral-500">{row['Product']}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    )
}