"use client";
import IconTrashLines from '@/components/icon/icon-trash-lines';
import PanelCodeHighlight from '@/components/panel-code-highlight';
import ComponentsTablesSimple from '@/components/tables/components-tables-simple';
import { formatUnixTimestamp } from '@/utils/helpers';
import Tippy from '@tippyjs/react';
import axios from 'axios';
import React, { useEffect, useState } from 'react'

type Props = {}

const SungrowInverters = (props: Props) => {
    const [inverters, setInverters] = useState<any[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const fetchData = async () => {
            try {
                const res = await axios.get("https://api-a.fomware.com.cn/asset/v1/list?type=2", {
                    headers: {
                        "Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
                    }
                })
                console.log("res", res.data.data.devices)
                setInverters(res.data.data.devices)
            } catch (error) {
                console.error("Error fetching data:", error);
            } finally {
                setLoading(false);
            }
        };

        fetchData()
    }, [])

    // inverter status 0: initial, 1: standby, 2: fault, 3: running, 5: offline, 9: shutdown, 10: unknown

    return (
        <div>
            {loading ? <p>Loading...</p> : (
            <PanelCodeHighlight title="Chint Sites">
                <div className="table-responsive mb-5">
                    <table>
                        <thead>
                            <tr>
                                <th>Model</th>
                                <th>Site Name</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th>Updated At</th>
                                <th className="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {inverters.map((data) => (
                                <tr key={data.id}>
                                    <td>
                                        <div className="whitespace-nowrap">{data.model}</div>
                                    </td>
                                    <td>
                                        <div className="whitespace-nowrap">{data.siteName}</div>
                                    </td>
                                    <td>
                                        <div className={`whitespace-nowrap ${
                                            data.status === 0 ? "text-gray-500"    // Initial
                                            : data.status === 1 ? "text-green-500"  // Standby
                                            : data.status === 2 ? "text-red-500"  // Fault
                                            : data.status === 3 ? "text-blue-500" // Running
                                            : data.status === 5 ? "text-yellow-500" // Offline
                                            : data.status === 9 ? "text-purple-500" // Shutdown
                                            : "text-gray-400" // Unknown (default)
                                        }`}>
                                            {data.statusLabel}
                                        </div>
                                    </td>

                                    <td>{formatUnixTimestamp(data.createdAt)}</td>
                                    <td>{formatUnixTimestamp(data.updatedAt)}</td>
                                    <td className="text-center">
                                        <Tippy content="Delete">
                                            <button type="button">
                                                <IconTrashLines className="m-auto" />
                                            </button>
                                        </Tippy>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </PanelCodeHighlight>
            )}
        </div>
    )
}

export default SungrowInverters