import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { createMedia } from "../services/supabase";
import { useAuth } from "../contexts/AuthContext";

function AdminMediaPage() {
  const navigate = useNavigate();
  const { currentUser, userProfile } = useAuth();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const [mediaData, setMediaData] = useState({
    title: "",
    type: "movie",
    poster_url: "",
    backdrop_url: "",
    overview: "",
    release_date: "",
    is_published: false,
  });

  // Check if user has admin/moderator privileges
  if (
    !userProfile?.role ||
    !["admin", "moderator"].includes(userProfile.role)
  ) {
    return (
      <div className="pt-20 container-custom py-12">
        <div className="bg-status-error bg-opacity-20 text-status-error p-6 rounded-lg">
          <h2 className="text-xl font-bold mb-2">Access Denied</h2>
          <p>You don't have permission to access this page.</p>
        </div>
      </div>
    );
  }

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setMediaData((prev) => ({
      ...prev,
      [name]: type === "checkbox" ? checked : value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError("");

    try {
      const newMedia = await createMedia({
        ...mediaData,
        created_by: currentUser.id,
      });

      navigate(`/media/${newMedia.id}`);
    } catch (err) {
      setError("Failed to create media. Please try again.");
      console.error("Error creating media:", err);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="pt-20 container-custom py-12">
      <h1 className="text-3xl font-bold mb-6">Create New Media</h1>

      {error && (
        <div className="bg-status-error bg-opacity-20 text-status-error p-4 rounded-md mb-6">
          {error}
        </div>
      )}

      <form onSubmit={handleSubmit} className="max-w-2xl">
        <div className="space-y-6">
          <div>
            <label className="block text-campfire-light mb-2" htmlFor="title">
              Title *
            </label>
            <input
              type="text"
              id="title"
              name="title"
              value={mediaData.title}
              onChange={handleInputChange}
              className="input w-full"
              required
            />
          </div>

          <div>
            <label className="block text-campfire-light mb-2" htmlFor="type">
              Type *
            </label>
            <select
              id="type"
              name="type"
              value={mediaData.type}
              onChange={handleInputChange}
              className="input w-full"
              required
            >
              <option value="movie">Movie</option>
              <option value="tv">TV Show</option>
              <option value="game">Game</option>
            </select>
          </div>

          <div>
            <label
              className="block text-campfire-light mb-2"
              htmlFor="poster_url"
            >
              Poster URL
            </label>
            <input
              type="url"
              id="poster_url"
              name="poster_url"
              value={mediaData.poster_url}
              onChange={handleInputChange}
              className="input w-full"
              placeholder="https://example.com/poster.jpg"
            />
          </div>

          <div>
            <label
              className="block text-campfire-light mb-2"
              htmlFor="backdrop_url"
            >
              Backdrop URL
            </label>
            <input
              type="url"
              id="backdrop_url"
              name="backdrop_url"
              value={mediaData.backdrop_url}
              onChange={handleInputChange}
              className="input w-full"
              placeholder="https://example.com/backdrop.jpg"
            />
          </div>

          <div>
            <label
              className="block text-campfire-light mb-2"
              htmlFor="overview"
            >
              Overview *
            </label>
            <textarea
              id="overview"
              name="overview"
              value={mediaData.overview}
              onChange={handleInputChange}
              className="input w-full h-32"
              required
            />
          </div>

          <div>
            <label
              className="block text-campfire-light mb-2"
              htmlFor="release_date"
            >
              Release Date
            </label>
            <input
              type="date"
              id="release_date"
              name="release_date"
              value={mediaData.release_date}
              onChange={handleInputChange}
              className="input w-full"
            />
          </div>

          <div className="flex items-center">
            <input
              type="checkbox"
              id="is_published"
              name="is_published"
              checked={mediaData.is_published}
              onChange={handleInputChange}
              className="w-4 h-4 text-campfire-amber bg-campfire-dark border-campfire-ash rounded focus:ring-campfire-amber"
            />
            <label className="ml-2 text-campfire-light" htmlFor="is_published">
              Publish immediately
            </label>
          </div>

          <div className="flex justify-end gap-4">
            <button
              type="button"
              onClick={() => navigate(-1)}
              className="btn-secondary"
              disabled={loading}
            >
              Cancel
            </button>
            <button type="submit" className="btn-primary" disabled={loading}>
              {loading ? "Creating..." : "Create Media"}
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

export default AdminMediaPage;