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

export default function AdminCluesPage() {
  const { data: session, status } = useSession();
  const [clues, setClues] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const router = useRouter();

  // Form state for adding new clues - removed coordinates
  const [newClue, setNewClue] = useState({
    title: "",
    description: "",
    location: "",
  });

  // Check if user is admin
  useEffect(() => {
    if (status === "authenticated") {
      if (session?.user?.role !== "admin") {
        router.push("/team-selection");
      } else {
        fetchClues();
      }
    } else if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [session, status, router]);

  // Fetch all clues
  const fetchClues = async () => {
    try {
      setLoading(true);
      const response = await fetch("/api/admin/clues", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-cache, no-store, must-revalidate",
        },
        credentials: "include",
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(
          errorData.error || `Failed to fetch clues (${response.status})`
        );
      }

      const data = await response.json();

      // Validate the response data
      if (!Array.isArray(data)) {
        throw new Error("Invalid response format from server");
      }

      setClues(data);
      setError("");
    } catch (err) {
      console.error("Error fetching clues:", err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // Handle input change for new clue form
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setNewClue((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  // Handle form submission to add new clue
  const handleAddClue = async (e) => {
    e.preventDefault();
    try {
      setLoading(true);
      const response = await fetch("/api/admin/clues", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(newClue),
        credentials: "include",
      });

      if (!response.ok) {
        throw new Error("Failed to add clue");
      }

      // Refresh the clue list
      fetchClues();

      // Reset the form - removed coordinates
      setNewClue({
        title: "",
        description: "",
        location: "",
      });

      setError("");
    } catch (err) {
      console.error("Error adding clue:", err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // Handle deleting a clue
  const handleDeleteClue = async (clueId) => {
    if (!confirm("Are you sure you want to delete this clue?")) return;

    try {
      setLoading(true);
      const response = await fetch(`/api/admin/clues/${clueId}`, {
        method: "DELETE",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });

      if (!response.ok) {
        throw new Error("Failed to delete clue");
      }

      // Refresh the clue list
      fetchClues();
      setError("");
    } catch (err) {
      console.error("Error deleting clue:", err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

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

  if (status === "unauthenticated") {
    return null; // Will redirect via useEffect
  }

  return (
    <div className="admin-page">
      <div className="page-header">
        <div className="page-title">Manage Clues</div>
        <div className="placeholder"></div>
      </div>

      <div className="admin-content">
        {error && <p className="error-message">{error}</p>}

        {/* Add New Clue Form - removed coordinate fields */}
        <div className="admin-card">
          <h2>Add New Clue</h2>
          <form onSubmit={handleAddClue}>
            <div className="form-group">
              <label htmlFor="title">Title</label>
              <input
                type="text"
                id="title"
                name="title"
                value={newClue.title}
                onChange={handleInputChange}
                required
                className="admin-input"
              />
            </div>

            <div className="form-group">
              <label htmlFor="description">Description</label>
              <textarea
                id="description"
                name="description"
                value={newClue.description}
                onChange={handleInputChange}
                required
                className="admin-textarea"
              ></textarea>
            </div>

            <div className="form-group">
              <label htmlFor="location">Location Hint</label>
              <input
                type="text"
                id="location"
                name="location"
                value={newClue.location}
                onChange={handleInputChange}
                className="admin-input"
              />
            </div>

            <button type="submit" className="admin-button">
              Add Clue
            </button>
          </form>
        </div>

        {/* Existing Clues List - updated to remove coordinates */}
        <div className="admin-card">
          <h2>Existing Clues</h2>
          {clues.length === 0 ? (
            <p className="no-clues">No clues found.</p>
          ) : (
            <div className="clues-list">
              {clues.map((clue) => (
                <div key={clue.id} className="clue-item">
                  <div className="clue-header">
                    <h3>{clue.title}</h3>
                    <button
                      className="delete-button"
                      onClick={() => handleDeleteClue(clue.id)}
                    >
                      Delete
                    </button>
                  </div>
                  <p className="clue-description">{clue.description}</p>
                  {clue.location && (
                    <p className="clue-location">
                      <strong>Location:</strong> {clue.location}
                    </p>
                  )}
                  <p className="clue-position">
                    <strong>Position:</strong> Clue #{clue.id} in sequence
                  </p>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Admin Navigation Bar */}
      <div className="admin-nav-bar">
        <button
          className="admin-nav-button"
          onClick={() => router.push("/admin")}
        >
          <div className="admin-nav-icon">⏱️</div>
          <div className="admin-nav-label">Timer</div>
        </button>
        <button
          className="admin-nav-button active"
          onClick={() => router.push("/admin/clues")}
        >
          <div className="admin-nav-icon">📝</div>
          <div className="admin-nav-label">Clues</div>
        </button>
        <button
          className="admin-nav-button"
          onClick={() => router.push("/admin/leaderboard")}
        >
          <div className="admin-nav-icon">🏆</div>
          <div className="admin-nav-label">Leaderboard</div>
        </button>
      </div>

      <style jsx>{`
        .admin-page {
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          background-color: #f4e9dc;
        }

        .page-header {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 1rem;
          background-color: #68543c;
          color: white;
        }

        .page-title {
          font-size: 1.2rem;
          font-weight: 600;
        }

        .admin-content {
          flex: 1;
          padding: 1rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding-bottom: 70px; /* Space for navbar */
        }

        .admin-card {
          width: 100%;
          max-width: 700px;
          background-color: white;
          border-radius: 8px;
          padding: 1.5rem;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          margin-bottom: 2rem;
        }

        .form-group {
          margin-bottom: 1rem;
        }

        .form-row {
          display: flex;
          gap: 1rem;
        }

        .half {
          flex: 1;
        }

        .admin-input {
          width: 100%;
          padding: 0.6rem;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 1rem;
        }

        .admin-textarea {
          width: 100%;
          padding: 0.6rem;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 1rem;
          min-height: 100px;
          resize: vertical;
        }

        label {
          display: block;
          margin-bottom: 0.4rem;
          font-weight: 500;
        }

        .admin-button {
          background-color: #68543c;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 0.75rem 1rem;
          font-size: 1rem;
          cursor: pointer;
          margin-top: 0.5rem;
        }

        .clues-list {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .clue-item {
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 1rem;
          background-color: #f9f9f9;
        }

        .clue-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 0.5rem;
        }

        .clue-header h3 {
          margin: 0;
          font-size: 1.1rem;
        }

        .delete-button {
          background-color: #d32f2f;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 0.4rem 0.6rem;
          font-size: 0.9rem;
          cursor: pointer;
        }

        .clue-description {
          margin-bottom: 0.8rem;
        }

        .clue-location,
        .clue-position {
          font-size: 0.9rem;
          margin-bottom: 0.4rem;
        }

        .error-message {
          color: red;
          margin-bottom: 1rem;
          padding: 0.5rem;
          border-radius: 4px;
          background-color: #ffebee;
          width: 100%;
          max-width: 700px;
          text-align: center;
        }

        .no-clues {
          text-align: center;
          color: #666;
          padding: 2rem 0;
        }

        /* Admin Navigation Bar Styles */
        .admin-nav-bar {
          display: flex;
          justify-content: space-around;
          background-color: white;
          border-top: 1px solid #ddd;
          padding: 10px 0;
          position: fixed;
          bottom: 0;
          left: 0;
          width: 100%;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 100;
        }

        .admin-nav-button {
          display: flex;
          flex-direction: column;
          align-items: center;
          background: transparent;
          border: none;
          padding: 8px 0;
          flex: 1;
          cursor: pointer;
          color: #666;
          transition: all 0.2s ease;
        }

        .admin-nav-button.active {
          color: #68543c;
          font-weight: bold;
        }

        .admin-nav-button:hover {
          background-color: rgba(104, 84, 60, 0.1);
        }

        .admin-nav-icon {
          font-size: 24px;
          margin-bottom: 4px;
        }

        .admin-nav-label {
          font-size: 13px;
        }
      `}</style>
    </div>
  );
}