"use client";

import { useState } from "react";
import usePeerManager from "../hooks/usePeerManager";
import usePollManager from "../hooks/usePollManager";
import PollCreation from "../components/PollCreation";
import PollActive from "../components/PollActive";
import PeersList from "../components/PeersList";

export default function Page() {
  const peerManager = usePeerManager();
  const pollManager = usePollManager(peerManager);

  const [connectId, setConnectId] = useState("");

  return (
    <div className="p-6 space-y-4">
      <h1 className="text-2xl font-bold">P2P Poll App</h1>

      {/* Connect */}
      <div className="flex gap-2">
        <input
          className="border p-2"
          placeholder="Peer ID"
          value={connectId}
          onChange={(e) => setConnectId(e.target.value)}
        />
        <button
          className="bg-blue-500 text-white px-4"
          onClick={() => peerManager.connectToPeer(connectId)}
        >
          Connect
        </button>
      </div>

      <p>Your ID: {peerManager.peerId}</p>

      {pollManager.poll ? (
        <PollActive pollManager={pollManager} peerId={peerManager.peerId} />
      ) : (
        <PollCreation pollManager={pollManager} />
      )}

      <PeersList peers={peerManager.peers} />
    </div>
  );
}