"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function TeamList({ teams, onJoinTeam, onRefresh }) {
  const [joinCode, setJoinCode] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  const handleJoinTeam = async (e) => {
    e.preventDefault();

    if (!joinCode.trim()) {
      setError("Please enter a team code");
      return;
    }

    setError("");
    setLoading(true);

    try {
      const response = await fetch("/api/teams/join", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: joinCode.trim() }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || "Failed to join team");
      }

      // Call the onJoinTeam callback with the joined team
      if (onJoinTeam) {
        onJoinTeam(data);
      }

      // Refresh the team list
      if (onRefresh) {
        onRefresh();
      }

      router.refresh();
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="mb-8">
      <h2 className="text-xl font-bold mb-4">Join Existing Team</h2>

      <form onSubmit={handleJoinTeam} className="mb-6">
        <div className="mb-4">
          <label htmlFor="teamCode" className="block text-gray-700 mb-2">
            Team Code
          </label>
          <input
            type="text"
            id="teamCode"
            value={joinCode}
            onChange={(e) => setJoinCode(e.target.value)}
            className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
            placeholder="Enter team code"
            required
          />
        </div>

        <button
          type="submit"
          disabled={loading}
          className={`px-4 py-2 rounded text-white ${
            loading
              ? "bg-gray-400 cursor-not-allowed"
              : "bg-blue-500 hover:bg-blue-600"
          }`}
        >
          {loading ? "Joining..." : "Join Team"}
        </button>

        {error && <p className="text-red-500 mt-2">{error}</p>}
      </form>

      {teams && teams.length > 0 ? (
        <div>
          <h3 className="text-lg font-semibold mb-2">Available Teams:</h3>
          <ul className="space-y-2">
            {teams.map((team) => (
              <li
                key={team.id}
                className="border rounded p-3 hover:bg-gray-50 cursor-pointer"
                onClick={() => setJoinCode(team.code)}
              >
                <div className="font-medium">{team.name}</div>
                <div className="text-sm text-gray-500">Code: {team.code}</div>
              </li>
            ))}
          </ul>
        </div>
      ) : (
        <p className="text-gray-500">No teams available to join</p>
      )}
    </div>
  );
}