"use client";

import { useState, useEffect } from "react";
import BrowserList from "@/components/BrowserList";
import { Button } from "@/components/ui/Button";

export default function BrowserPage() {
  const [sessions, setSessions] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchSessions = async () => {
    try {
      const response = await fetch(
        "http://192.168.29.92:8080/api/browser/sessions",
      );
      if (!response.ok) throw new Error("Failed to fetch sessions");
      const data = await response.json();
      setSessions(data || []); // Ensure sessions is at least an empty array
    } catch (err) {
      setError(err.message);
      setSessions([]); // Set empty array on error
    } finally {
      setLoading(false);
    }
  };

  const createSession = async () => {
    try {
      setLoading(true);
      const response = await fetch(
        "http://192.168.29.92:8080/api/browser/sessions",
        {
          method: "POST",
        },
      );
      if (!response.ok) throw new Error("Failed to create session");
      const newSession = await response.json();
      setSessions((prev) => [...(prev || []), newSession]);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchSessions();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  if (!sessions) return <div>No sessions available</div>;

  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Browser Sessions</h1>
        <Button onClick={createSession} disabled={loading}>
          New Session
        </Button>
      </div>
      <BrowserList
        sessions={sessions}
        onSessionsChange={setSessions}
        onError={setError}
      />
    </div>
  );
}