import React, { useState } from "react";
import { motion } from "framer-motion";
import Hero from "../components/Hero";
import Coach from "../components/Coach";
import Events from "../components/Events";

const AdminDashboard = () => {
  const [activeTab, setActiveTab] = useState("hero");

  // Coach state
  const [coaches, setCoaches] = useState([
    { name: "John Doe", title: "Head Coach" },
    { name: "Jane Smith", title: "Assistant Coach" },
  ]);
  const [newCoach, setNewCoach] = useState({ name: "", title: "" });

  const addCoach = () => {
    if (newCoach.name && newCoach.title) {
      setCoaches([...coaches, newCoach]);
      setNewCoach({ name: "", title: "" });
    }
  };

  const removeCoach = (index) => {
    setCoaches(coaches.filter((_, i) => i !== index));
  };

  // Event state
  const [events, setEvents] = useState([
    {
      title: "Team Meeting",
      date: "2025-02-01",
      description: "Monthly meeting.",
    },
    {
      title: "Workshop",
      date: "2025-02-05",
      description: "Training workshop.",
    },
  ]);
  const [newEvent, setNewEvent] = useState({
    title: "",
    date: "",
    description: "",
  });

  const addEvent = () => {
    if (newEvent.title && newEvent.date && newEvent.description) {
      setEvents([...events, newEvent]);
      setNewEvent({ title: "", date: "", description: "" });
    }
  };

  return (
    <div className="min-h-screen w-full bg-black text-white">
      <motion.div className="w-full">
        <div className="bg-gray-900 p-6 shadow-lg">
          <h1 className="text-3xl font-bold tracking-wide">Admin Dashboard</h1>
        </div>

        {/* Tab Navigation */}
        <div className="flex justify-center mt-6 space-x-4">
          {[
            { label: "Hero", value: "hero" },
            { label: "Coach", value: "coach" },
            { label: "Events", value: "calendar" },
          ].map((tab) => (
            <button
              key={tab.value}
              onClick={() => setActiveTab(tab.value)}
              className={`px-6 py-3 rounded-full text-sm cursor-pointer font-medium transition-all shadow-md focus:outline-none ${
                activeTab === tab.value
                  ? "bg-white text-black"
                  : "bg-gray-700 text-gray-300 hover:bg-gray-600"
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        <motion.div key={activeTab} className="p-8">
          {/* Hero Content */}
          {activeTab === "hero" && <Hero />}
          {/* Coach Content */}
          {activeTab === "coach" && (
            <Coach
              coaches={coaches}
              newCoach={newCoach}
              setNewCoach={setNewCoach}
              addCoach={addCoach}
              removeCoach={removeCoach}
            />
          )}

          {/* Events Content */}
          {activeTab === "calendar" && (
            <Events
              events={events}
              newEvent={newEvent}
              setNewEvent={setNewEvent}
              addEvent={addEvent}
            />
          )}
        </motion.div>
      </motion.div>
    </div>
  );
};

export default AdminDashboard;