"use client";
import { useState } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import Link from "next/link";

const styles = {
  navbar: {
    position: "fixed",
    bottom: 0,
    width: "100%",
    backgroundColor: "#fff",
    borderTop: "1px solid #ccc",
    padding: "10px 0",
    textAlign: "center",
  },
};

export default function CreateTeam() {
  const { data: session, status } = useSession();
  const [teamName, setTeamName] = useState("");
  const [error, setError] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();

  if (status === "loading") {
    return <div className="loading">Loading...</div>;
  }

  if (!session || status === "unauthenticated") {
    router.replace("/login");
    return null;
  }

  if (session?.user?.role === "admin") {
    router.replace("/admin");
    return null;
  }

  const handleCreateTeam = async (e) => {
    e.preventDefault();
    if (isLoading || !teamName.trim()) return;

    setIsLoading(true);
    try {
      const response = await fetch("/api/teams/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: teamName,
          userId: session.user.id,
        }),
      });

      const result = await response.json();
      if (result.success) {
        // Update the user's session with the new teamId
        await fetch("/api/auth/session", {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            teamId: result.teamId,
          }),
        });

        router.push(`/team/${result.teamId}`);
      } else {
        setError(result.error || "Failed to create team");
      }
    } catch (err) {
      console.error("Team creation error:", err);
      setError("An unexpected error occurred");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="auth-page">
      <div className="page-header">
        <div className="back-button"></div>
        <div className="page-title">Create Team</div>
        <div className="placeholder"></div>
      </div>

      <div className="auth-container">
        <div className="auth-card">
          <h1>Create a New Team</h1>
          <form onSubmit={handleCreateTeam}>
            <div className="form-group">
              <input
                type="text"
                placeholder="Team Name"
                value={teamName}
                onChange={(e) => setTeamName(e.target.value)}
                required
                className="auth-input"
              />
            </div>
            <button type="submit" className="auth-button" disabled={isLoading}>
              {isLoading ? "Creating..." : "Create Team"}
            </button>
          </form>
          {error && <p className="error-message">{error}</p>}
          <div className="team-options">
            <Link href="/team-selection">
              <button className="auth-button">Back to Team Selection</button>
            </Link>
          </div>
        </div>
      </div>

      <div className="nav-bar" style={styles.navbar}>
        <div className="nav-item">
          <div className="nav-icon">🏠</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">📊</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">🏆</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">👤</div>
        </div>
      </div>

      <style jsx>{`
        .auth-page {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          overflow: hidden;
        }
        .auth-container {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          max-width: 400px;
          padding: 20px;
          box-sizing: border-box;
        }
        .auth-card {
          width: 100%;
          padding: 20px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          background-color: #fff;
        }
        .form-group {
          margin-bottom: 10px;
        }
        .auth-input {
          width: 100%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
        }
        .auth-button {
          width: 100%;
          padding: 10px;
          margin-top: 10px;
          background-color: #68543c; /* Updated brown color */
          color: white;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          text-align: center;
        }
        .error-message {
          color: red;
          margin-top: 10px;
        }
        .nav-bar {
          position: fixed;
          bottom: 0;
          width: 100%;
          background-color: #fff;
          border-top: 1px solid #ccc;
          padding: 10px 0;
          text-align: center;
        }
        .nav-item {
          display: inline-block;
          margin: 0 10px;
        }
        .nav-icon {
          font-size: 24px;
        }
      `}</style>
    </div>
  );
}