'use client';

import PanelCodeHighlight from '@/components/panel-code-highlight'
import React, { Fragment, useEffect, useState } from 'react';
import { Tab } from '@headlessui/react';
import IconHome from '@/components/icon/icon-home';
import IconUser from '@/components/icon/icon-user';
import IconPhone from '@/components/icon/icon-phone';
import { useRouter } from 'next/router';
import { useParams } from 'next/navigation';
import axios from 'axios';

type Props = {}

const InverterViewPage = (props: Props) => {
    const [isMounted, setIsMounted] = useState(false)
    const [loading, setLoading] = useState(true)
    const params = useParams()
    const [inverter, setInverter] = useState<any>({})

    useEffect(() => {
        setIsMounted(true);
        fetchData()
    }, [])

    const fetchData = async () => {
        try {
            const res = await axios.get(`https://api-a.fomware.com.cn/asset/v1/list?type=2&key=${params.id.toString()}`, {
                headers: {
                    "Authorization": "Bearer " + process.env.NEXT_PUBLIC_CHINT_TOKEN
                }
            })
            console.log("res", res.data.data.devices[0])
            setInverter(res.data.data.devices[0])
        } catch (error) {
            console.error("Error fetching data:", error);
        } finally {
            setLoading(false);
        }
    };


    return (
        <>

        {loading ? <p>Loading...</p> : (
        <>
        <PanelCodeHighlight title={params.id.toString() || ""}>
            <div className="mb-5">
                {isMounted && (
                    <Tab.Group>
                        <Tab.List className="mt-3 flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
                            <Tab as={Fragment}>
                                {({ selected }) => (
                                    <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                        Brief
                                    </button>
                                )}
                            </Tab>
                            <Tab as={Fragment}>
                                {({ selected }) => (
                                    <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                        Chart
                                    </button>
                                )}
                            </Tab>
                            <Tab as={Fragment}>
                                {({ selected }) => (
                                    <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                        Event
                                    </button>
                                )}
                            </Tab>
                            <Tab as={Fragment}>
                                {({ selected }) => (
                                    <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                        Settings
                                    </button>
                                )}
                            </Tab>
                            <Tab as={Fragment}>
                                {({ selected }) => (
                                    <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                        Firmware
                                    </button>
                                )}
                            </Tab>
                            <Tab as={Fragment}>
                                {({ selected }) => (
                                    <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                        Data
                                    </button>
                                )}
                            </Tab>
                        </Tab.List>
                        <Tab.Panels>
                            <Tab.Panel>
                                <div className="active pt-5">
                                    <p className="mb-3 text-base font-semibold">Last Updated ( 2025-02-24 16:03:10 +0800 )</p>

                                    <blockquote className="rounded-br-md rounded-tr-md border-l-2 !border-l-primary bg-white py-2 px-2 text-black dark:border-[#060818] dark:bg-[#060818]">
                                        <div className="flex items-start">
                                            <p className="m-0 font-semibold text-sm not-italic text-[#515365] dark:text-white-light">Basic Information</p>
                                        </div>
                                    </blockquote>

                                    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-gray-600 mt-3">
                                        <p><span className="font-semibold">Model: </span>{inverter.model}</p>
                                        <p><span className="font-semibold">SN: </span>{inverter.sn}</p>
                                        <p><span className="font-semibold">Total Energy: </span>{inverter.eTotalWithUnit}</p>
                                        <p><span className="font-semibold">Today Energy: </span>{inverter.eTodayWithUnit}</p>
                                        <p><span className="font-semibold">Reactive Power: </span>{inverter.lastRTP["Reactive Power"].value} var</p>
                                        <p><span className="font-semibold">Active Power: </span>{inverter.activePowerWithUnit}</p>
                                        <p><span className="font-semibold">Inverter Mode: </span>{inverter.lastRTP["Inverter Mode"].value}</p>
                                        <p><span className="font-semibold">Inner Temperature: </span>{inverter.lastRTP["Inner Temperature"].value} °C</p>
                                        <p><span className="font-semibold">Create Time: </span>{inverter.createdAtStr}</p>
                                        <p><span className="font-semibold">Modules: </span>{inverter.moduleFw.map((item: {module:string, value:string}) => `${item.module}: ${item.value}`.trim()).join(", ")}</p>
                                    </div>

                                </div>


                            </Tab.Panel>
                        </Tab.Panels>
                    </Tab.Group>
                )}
            </div>
        </PanelCodeHighlight>


        <div className="panel pt-1 mt-3">
            {isMounted && (
                <Tab.Group>
                    <Tab.List className="flex flex-wrap border-b border-white-light dark:border-[#191e3a]">
                        <Tab as={Fragment}>
                            {({ selected }) => (
                                <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                    INV-DC
                                </button>
                            )}
                        </Tab>
                        <Tab as={Fragment}>
                            {({ selected }) => (
                                <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                    INV-AC
                                </button>
                            )}
                        </Tab>
                        <Tab as={Fragment}>
                            {({ selected }) => (
                                <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                    Meter-AC
                                </button>
                            )}
                        </Tab>
                        <Tab as={Fragment}>
                            {({ selected }) => (
                                <button className={`${selected ? 'border-b !border-primary text-primary !outline-none' : ''} -mb-[1px] flex items-center border-transparent p-5 py-3 before:inline-block hover:border-b hover:!border-primary hover:text-primary`} >
                                    Meter-Load
                                </button>
                            )}
                        </Tab>
                    </Tab.List>
                    <Tab.Panels>
                        <Tab.Panel>
                            <div className="active pt-5">
                                <table className="w-full border-collapse">
                                    <thead>
                                        <tr className="bg-gray-200 text-gray-600 text-left">
                                            <th className="p-2"></th>
                                            <th className="p-2">Voltage(V)</th>
                                            <th className="p-2">Current(A)</th>
                                            <th className="p-2">Power(W)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr className="border-b text-gray-600">
                                            <td className="p-2">PV1/PV1</td>
                                            <td className="p-2">{inverter.lastRTP["PV1 Voltage"] && inverter.lastRTP["PV1 Voltage"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["PV1 Current"] && inverter.lastRTP["PV1 Current"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["MPPT1 Power"] && inverter.lastRTP["MPPT1 Power"].value}</td>
                                        </tr>
                                        <tr className="border-b text-gray-600">
                                            <td className="p-2">PV2/PV2</td>
                                            <td className="p-2">{inverter.lastRTP["PV2 Voltage"] && inverter.lastRTP["PV2 Voltage"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["PV2 Current"] && inverter.lastRTP["PV2 Current"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["MPPT2 Power"] && inverter.lastRTP["MPPT2 Power"].value}</td>
                                        </tr>
                                        <tr className="border-b text-gray-600">
                                            <td className="p-2">PV3/PV3</td>
                                            <td className="p-2">{inverter.lastRTP["PV3 Voltage"] && inverter.lastRTP["PV3 Voltage"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["PV3 Current"] && inverter.lastRTP["PV3 Current"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["MPPT3 Power"] && inverter.lastRTP["MPPT3 Power"].value}</td>
                                        </tr>
                                        <tr className="border-b text-gray-600">
                                            <td className="p-2">PV3/PV3</td>
                                            <td className="p-2">{inverter.lastRTP["PV4 Voltage"] && inverter.lastRTP["PV4 Voltage"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["PV4 Current"] && inverter.lastRTP["PV4 Current"].value}</td>
                                            <td className="p-2">{inverter.lastRTP["MPPT4 Power"] && inverter.lastRTP["MPPT4 Power"].value}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </Tab.Panel>
                        <Tab.Panel>
                            <div className='pt-5'>
                                <table className="w-full border-collapse">
                                    <thead>
                                        <tr className="bg-gray-200 text-gray-600 text-left">
                                            <th className="p-2"></th>
                                            <th className="p-2">Voltage(V)</th>
                                            <th className="p-2">Current(A)</th>
                                            <th className="p-2">Power(W)</th>
                                            <th className="p-2">Frequency(Hz)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {[
                                            { pv: "A", voltage: 362.1, current: 7.5, power: 2717.5, frequency: 1 },
                                            { pv: "B", voltage: 347.0, current: 9.16, power: 3181.9, frequency: 1 },
                                            { pv: "C", voltage: 0.0, current: 0.0, power: 0.0, frequency: 1 },
                                        ].map((row, index) => (
                                        <tr key={index} className="border-b text-gray-600">
                                            <td className="p-2">{row.pv}</td>
                                            <td className="p-2">{row.voltage}</td>
                                            <td className="p-2">{row.current}</td>
                                            <td className="p-2">{row.power}</td>
                                            <td className="p-2">{row.frequency}</td>
                                        </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </Tab.Panel>
                        <Tab.Panel>Disabled</Tab.Panel>
                        <Tab.Panel>Disabled</Tab.Panel>
                    </Tab.Panels>
                </Tab.Group>
            )}
        </div>
        </>
        )}

        </>
    )
}

export default InverterViewPage