"use client";

import { useState, useEffect } from "react";
import Link from "next/link";

interface Poster {
  _id: string;
  title: string;
  description?: string;
  image: string;
  link?: string;
  position: string;
  active: boolean;
  order: number;
}

export default function PostersPage() {
  const [posters, setPosters] = useState<Poster[]>([]);
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingPoster, setEditingPoster] = useState<Poster | null>(null);
  const [formData, setFormData] = useState({
    title: "",
    description: "",
    image: "",
    link: "",
    position: "home-top",
    active: true,
    order: 0,
  });

  useEffect(() => {
    fetchPosters();
  }, []);

  const fetchPosters = async () => {
    try {
      const response = await fetch("/api/posters");
      const data = await response.json();
      setPosters(data.posters || []);
    } catch (error) {
      console.error("Error fetching posters:", error);
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const url = editingPoster
        ? `/api/posters/${editingPoster._id}`
        : "/api/posters";
      const method = editingPoster ? "PATCH" : "POST";

      const response = await fetch(url, {
        method,
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        alert(editingPoster ? "Poster updated!" : "Poster created!");
        fetchPosters();
        resetForm();
      } else {
        alert("Failed to save poster");
      }
    } catch (error) {
      console.error("Error saving poster:", error);
      alert("Error saving poster");
    }
  };

  const handleEdit = (poster: Poster) => {
    setEditingPoster(poster);
    setFormData({
      title: poster.title,
      description: poster.description || "",
      image: poster.image,
      link: poster.link || "",
      position: poster.position,
      active: poster.active,
      order: poster.order,
    });
    setShowForm(true);
  };

  const handleDelete = async (id: string) => {
    if (!confirm("Are you sure you want to delete this poster?")) return;

    try {
      const response = await fetch(`/api/posters/${id}`, {
        method: "DELETE",
      });

      if (response.ok) {
        alert("Poster deleted!");
        fetchPosters();
      } else {
        alert("Failed to delete poster");
      }
    } catch (error) {
      console.error("Error deleting poster:", error);
      alert("Error deleting poster");
    }
  };

  const handleSeed = async () => {
    if (!confirm("This will create dummy posters. Continue?")) return;

    try {
      const response = await fetch("/api/posters/seed", {
        method: "POST",
      });

      const data = await response.json();
      if (response.ok) {
        alert(data.message);
        fetchPosters();
      } else {
        alert(data.message || "Failed to seed posters");
      }
    } catch (error) {
      console.error("Error seeding posters:", error);
      alert("Error seeding posters");
    }
  };

  const resetForm = () => {
    setFormData({
      title: "",
      description: "",
      image: "",
      link: "",
      position: "home-top",
      active: true,
      order: 0,
    });
    setEditingPoster(null);
    setShowForm(false);
  };

  if (loading) {
    return (
      <div className="p-6">
        <p>Loading posters...</p>
      </div>
    );
  }

  return (
    <div className="p-6">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-3xl font-bold text-gray-900">Poster Management</h1>
        <div className="flex gap-2">
          <button
            onClick={handleSeed}
            className="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition"
          >
            Seed Dummy Posters
          </button>
          <button
            onClick={() => {
              resetForm();
              setShowForm(true);
            }}
            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition"
          >
            + Add Poster
          </button>
        </div>
      </div>

      {/* Form */}
      {showForm && (
        <div className="bg-white rounded-lg shadow p-6 mb-6">
          <h2 className="text-xl font-semibold mb-4">
            {editingPoster ? "Edit Poster" : "Create New Poster"}
          </h2>
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Title
              </label>
              <input
                type="text"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Description
              </label>
              <textarea
                value={formData.description}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                rows={2}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Image URL
              </label>
              <input
                type="url"
                value={formData.image}
                onChange={(e) => setFormData({ ...formData, image: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-1">
                Link (Optional)
              </label>
              <input
                type="url"
                value={formData.link}
                onChange={(e) => setFormData({ ...formData, link: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                placeholder="/shop or https://..."
              />
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Position
                </label>
                <select
                  value={formData.position}
                  onChange={(e) => setFormData({ ...formData, position: e.target.value })}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                >
                  <option value="home-top">Home - Top</option>
                  <option value="home-middle">Home - Middle</option>
                  <option value="home-bottom">Home - Bottom</option>
                  <option value="shop-top">Shop - Top</option>
                </select>
              </div>

              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-1">
                  Order
                </label>
                <input
                  type="number"
                  value={formData.order}
                  onChange={(e) => setFormData({ ...formData, order: parseInt(e.target.value) || 0 })}
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg"
                />
              </div>
            </div>

            <div className="flex items-center">
              <input
                type="checkbox"
                id="active"
                checked={formData.active}
                onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                className="mr-2"
              />
              <label htmlFor="active" className="text-sm font-semibold text-gray-700">
                Active
              </label>
            </div>

            <div className="flex gap-2">
              <button
                type="submit"
                className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition"
              >
                {editingPoster ? "Update" : "Create"}
              </button>
              <button
                type="button"
                onClick={resetForm}
                className="px-6 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-lg transition"
              >
                Cancel
              </button>
            </div>
          </form>
        </div>
      )}

      {/* Posters List */}
      <div className="bg-white rounded-lg shadow">
        <div className="p-6">
          <h2 className="text-xl font-semibold mb-4">All Posters</h2>
          {posters.length === 0 ? (
            <p className="text-gray-600">No posters found. Click "Seed Dummy Posters" to add sample posters.</p>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {posters.map((poster) => (
                <div key={poster._id} className="border border-gray-200 rounded-lg overflow-hidden">
                  <div className="relative h-48">
                    <img
                      src={poster.image}
                      alt={poster.title}
                      className="w-full h-full object-cover"
                      onError={(e) => {
                        (e.target as HTMLImageElement).src = "/placeholder-image.png";
                      }}
                    />
                    {!poster.active && (
                      <div className="absolute top-2 right-2 bg-red-500 text-white px-2 py-1 rounded text-xs">
                        Inactive
                      </div>
                    )}
                  </div>
                  <div className="p-4">
                    <h3 className="font-semibold text-gray-900 mb-1">{poster.title}</h3>
                    {poster.description && (
                      <p className="text-sm text-gray-600 mb-2">{poster.description}</p>
                    )}
                    <div className="flex items-center gap-2 text-xs text-gray-500 mb-3">
                      <span className="bg-blue-100 text-blue-800 px-2 py-1 rounded">
                        {poster.position}
                      </span>
                      <span>Order: {poster.order}</span>
                    </div>
                    <div className="flex gap-2">
                      <button
                        onClick={() => handleEdit(poster)}
                        className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition"
                      >
                        Edit
                      </button>
                      <button
                        onClick={() => handleDelete(poster._id)}
                        className="px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-sm rounded transition"
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}