'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()) // Map to "module: value" format
  .join(", ")}</p>
                                    </div>

                                </div>


                            </Tab.Panel>
                            <Tab.Panel>
                                <div>
                                    <div className="flex items-start pt-5">
                                        <div className="h-20 w-20 flex-none ltr:mr-4 rtl:ml-4">
                                            <img src="/assets/images/profile-34.jpeg" alt="img" className="m-0 h-20 w-20 rounded-full object-cover ring-2 ring-[#ebedf2] dark:ring-white-dark" />
                                        </div>
                                        <div className="flex-auto">
                                            <h5 className="mb-4 text-xl font-medium">Media heading</h5>
                                            <p className="text-white-dark">
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra
                                                turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </Tab.Panel>
                            <Tab.Panel>
                                <div className="pt-5">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                        nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                                        fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                                    </p>
                                </div>
                            </Tab.Panel>
                            <Tab.Panel>Disabled</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>
                                        {[
                                            { pv: "PV1/PV1", voltage: 362.1, current: 7.5, power: 2717.5 },
                                            { pv: "PV2/PV2", voltage: 347.0, current: 9.16, power: 3181.9 },
                                            { pv: "PV3/PV3", voltage: 0.0, current: 0.0, power: 0.0 },
                                            { pv: "PV4/PV4", voltage: 0.0, current: 0.0, power: 0.0 },
                                        ].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>
                                        </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