import Head from 'next/head';
import { useEffect, useState } from 'react';

const WS_PATH = '/api/device-events/ws';

interface ApiStatus {
  message: string;
  docs: string;
}

interface DeviceRecord {
  id: number;
  topic: string;
  payload: string;
  receivedAt: string;
}

export default function Home() {
  const [status, setStatus] = useState<ApiStatus | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [messages, setMessages] = useState<DeviceRecord[]>([]);
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    fetch('/api/status')
      .then((res) => res.json())
      .then(setStatus)
      .catch((err) => setError(err.message));
  }, []);

  useEffect(() => {
    fetch('/api/device-events')
      .then((res) => res.json())
      .then((payload) => {
        const records = Array.isArray(payload) ? payload : payload?.records ?? [];
        setMessages(Array.isArray(records) ? records : []);
        setConnected(true);
      })
      .catch((err) => {
        setError(err.message || 'Unable to load device events');
      });

    const wsProtocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
    const socket = new WebSocket(`${wsProtocol}://${window.location.host}${WS_PATH}`);

    socket.onopen = () => {
      setConnected(true);
      setError(null);
    };

    socket.onmessage = (event) => {
      try {
        const payload = JSON.parse(event.data);
        if (payload.type === 'connected') {
          setConnected(true);
          return;
        }

        setMessages((prev) => [payload, ...prev].slice(0, 20));
      } catch (err) {
        console.error('Failed to parse device-event payload', err);
      }
    };

    socket.onerror = () => {
      setConnected(false);
      setError('Realtime stream disconnected');
    };

    return () => {
      socket.close();
    };
  }, []);

  return (
    <>
      <Head>
        <title>UlHub</title>
        <meta name="description" content="UlHub monolithic app" />
      </Head>
      <main style={{ padding: '3rem', fontFamily: 'system-ui, sans-serif', maxWidth: '900px' }}>
        <h1>UlHub</h1>
        <p>React + Next.js frontend with NestJS backend and live MQTT WebSocket data.</p>

        <section style={{ marginTop: '1.5rem' }}>
          <h2>API Status</h2>
          {error && <p style={{ color: 'red' }}>{error}</p>}
          {status ? (
            <div>
              <p>{status.message}</p>
              <p>{status.docs}</p>
            </div>
          ) : (
            <p>Loading status...</p>
          )}
        </section>

        <section style={{ marginTop: '1.5rem' }}>
          <h2>Device Events</h2>
          <p>Status: {connected ? 'Connected' : 'Connecting...'}</p>
          <ul>
            {(Array.isArray(messages) ? messages : []).map((msg, index) => (
              <li key={`${msg.topic}-${index}`} style={{ marginBottom: '0.75rem' }}>
                <strong>{msg.topic}</strong> <span style={{ color: '#666' }}>{msg.receivedAt}</span>
                <br />
                {msg.payload}
              </li>
            ))}
          </ul>
        </section>
      </main>
    </>
  );
}
