"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 SungrowPlant = (props: Props) => {
    const [sites, setSites] = useState<any[]>([])
    const [loading, setLoading] = useState(true)


    useEffect(() => {
        const fetchSites = async () => {
            try {
                const res = await fetch("/api/sungrow/site")
                const data = await res.json()
                console.log("data", data)
                setSites(data)
            } catch (error) {
                console.error("Error fetching inverters:", error)
            } finally {
                setLoading(false)
            }
        }

        fetchSites()
    }, [])

    const statusLabels: Record<number, string> = {
        0: "Offline",
        1: "Normal",
    }
    const plantTypeLabel: Record<number, string> = {
        3: "Commercial PV",
        4: "Residential PV",
    }


    return (
        <div>
            {loading ? <p>Loading...</p> : (
                <PanelCodeHighlight title="Sungrow Sites">
                    <div className="table-responsive mb-5">
                        <table>
                            <thead>
                                <tr>
                                    <th>Site Name</th>
                                    <th>Status</th>
                                    <th>Plant Type</th>
                                    {/* <th>Installed Power</th>
                                    <th>Real-time Power</th>
                                    <th>Yield Today</th>
                                    <th>Monthly Yield</th>
                                    <th>Annual Yield</th>
                                    <th>Total Yield</th>
                                    <th>Equivalent Hours</th>
                                    <th>Remarks</th> */}
                                    <th className="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {sites.map((data) => (
                                    <tr key={data.id}>
                                        <td>
                                            <div className="whitespace-nowrap">{data.ps_name}</div>
                                        </td>
                                        <td>
                                            <div className={`whitespace-nowrap ${ data.online_status !== 1 ? "text-danger" : "text-success" }`} >
                                                {statusLabels[data.online_status] || "-"}
                                            </div>
                                        </td>
                                        <td>{plantTypeLabel[data.ps_type] || "-"}</td>
                                        {/* <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></td>
                                        <td></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 SungrowPlant