// SPDX-FileCopyrightText: 2025 Contributors to the CitrineOS Project
//
// SPDX-License-Identifier: Apache-2.0
'use client';

import React, { useEffect, useState } from 'react';

interface StationDetailPageProps {
  id: string;
}

export default function StationDetailPage({ id }: StationDetailPageProps) {
  const [station, setStation] = useState<any>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!id) return;
    
    const controller = new AbortController();
    
    fetch('https://hasura.digitribe.fr/v1/graphql', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'x-hasura-admin-secret': 'Digitribe972',
      },
      body: JSON.stringify({
        query: `
          query GetStation($id: String!) {
            ChargingStations(where: {id: {_eq: $id}}, limit: 1) {
              id
              isOnline
              ocppConnectionName
              chargePointVendor
              chargePointModel
              firmwareVersion
              protocol
              locationId
              floorLevel
              createdAt
              updatedAt
            }
          }
        `,
        variables: { id },
      }),
      signal: controller.signal,
    })
      .then(res => res.json())
      .then(data => {
        if (data.errors) {
          setError(data.errors[0]?.message || 'GraphQL error');
        } else {
          const stations = data?.data?.ChargingStations || [];
          setStation(stations[0] || null);
        }
      })
      .catch(err => {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      })
      .finally(() => setLoading(false));

    return () => controller.abort();
  }, [id]);

  if (loading) {
    return (
      <div style={{ padding: '20px' }}>
        <div style={{ background: '#f0f0f0', height: '100px', marginBottom: '10px', borderRadius: '4px' }} />
        <div style={{ background: '#f0f0f0', height: '200px', borderRadius: '4px' }} />
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ padding: '20px', color: 'red' }}>
        <h2>Error loading station</h2>
        <p>{error}</p>
        <p>Station ID: {id}</p>
      </div>
    );
  }

  if (!station) {
    return (
      <div style={{ padding: '20px' }}>
        <h2>No Data Found</h2>
        <p>No charging station found with id {id}.</p>
      </div>
    );
  }

  return (
    <div style={{ padding: '20px' }}>
      <h1>Charging Station: {station.id}</h1>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px', marginTop: '20px' }}>
        <div><strong>ID:</strong> {station.id}</div>
        <div><strong>Online:</strong> {station.isOnline ? '✅ Yes' : '❌ No'}</div>
        <div><strong>OCPP Connection:</strong> {station.ocppConnectionName || 'N/A'}</div>
        <div><strong>Vendor:</strong> {station.chargePointVendor || 'N/A'}</div>
        <div><strong>Model:</strong> {station.chargePointModel || 'N/A'}</div>
        <div><strong>Firmware:</strong> {station.firmwareVersion || 'N/A'}</div>
        <div><strong>Protocol:</strong> {station.protocol || 'N/A'}</div>
        <div><strong>Location ID:</strong> {station.locationId || 'N/A'}</div>
        <div><strong>Floor Level:</strong> {station.floorLevel || 'N/A'}</div>
        <div><strong>Created:</strong> {station.createdAt || 'N/A'}</div>
        <div><strong>Updated:</strong> {station.updatedAt || 'N/A'}</div>
      </div>
    </div>
  );
}
