Giveaway-app/src/app/admin/AdminClient.tsx

"use client";

import { useState } from "react";
import handleUpdateCoins from "./AdminServer";
import GiveawayManagement from "./GiveawayManagementCards";

interface AdminClientProps {
    email: string;
}

export default function AdminClient({ email }: AdminClientProps) {
    const [giveaway, setGiveaway] = useState({ 
        title: "", 
        description: "", 
        value: 0, 
        prize: "", 
        entryCost: 70000000, 
        duration: 0,  
        endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime() // Set to tomorrow
    });
    const [youtube_url, setYoutubeUrl] = useState("");
    const [coin_value, setCoinValue] = useState(0);
    const [showGiveawayManagement, setShowGiveawayManagement] = useState(false);

    const handleCreateGiveaway = async () => {
        const response = await fetch("/api/admin/create-giveaway", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(giveaway),
        });
        if (response.ok) {
            alert("Giveaway created successfully!");
            
            setGiveaway({ title: "", description: "", value: 0, prize: "", entryCost: 70000000, duration: 0,  endsAt: new Date(Date.now() + 24 * 60 * 60 * 1000).getTime() }); // Reset form
        } else {
            const error = await response.json();
            alert(`Failed to create giveaway: ${error.error}`);
        }
    };

    return (
      <div className="min-h-screen bg-gradient-to-br from-yellow-50 to-pink-100 text-black py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto space-y-10">
          <h1 className="text-4xl font-bold text-pink-700">Admin Dashboard</h1>
          <p className="text-lg text-gray-700">Welcome, <span className="font-medium">{email}</span>!</p>

          {/* Create Giveaway Form */}
          <div className="bg-white border border-pink-200 p-6 rounded-2xl shadow-lg">
            <h2 className="text-2xl font-semibold text-pink-700 mb-4">🎁 Create Giveaway</h2>
            <div className="space-y-3">
              <input
                type="text"
                placeholder="Giveaway Title"
                value={giveaway.title}
                onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
              />
              <textarea
                placeholder="Description"
                value={giveaway.description}
                onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
              />
              <input
                type="text"
                placeholder="Prize"
                value={giveaway.prize}
                onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
              />
              <input
                type="number"
                placeholder="Value in Coins"
                value={giveaway.value || ""}
                onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
              />
              <input
                type="datetime-local"
                placeholder="Ends At"
                value={giveaway.endsAt ? new Date(giveaway.endsAt).toISOString().slice(0, 16) : ""}
                onChange={(e) => setGiveaway({ ...giveaway, endsAt: Date.parse(e.target.value) })}
                className="w-full p-3 border border-pink-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-pink-400"
              />
              <button
                onClick={handleCreateGiveaway}
                className="w-full bg-gradient-to-r from-pink-500 to-yellow-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
              >
                🚀 Create Giveaway
              </button>
            </div>
          </div>

          {/* Update User Coins Form */}
          <div className="bg-white border border-green-200 p-6 rounded-2xl shadow-lg">
            <h2 className="text-2xl font-semibold text-green-700 mb-4">💸 Update User Coins</h2>
            <div className="space-y-3">
              <input
                type="text"
                placeholder="YouTube Video URL"
                value={youtube_url}
                onChange={(e) => setYoutubeUrl(e.target.value)}
                className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
              />
              <input
                type="number"
                placeholder="Coins to Add"
                value={coin_value || ""}
                onChange={(e) => setCoinValue(Number(e.target.value))}
                className="w-full p-3 border border-green-200 rounded-lg bg-white text-gray-700 focus:outline-none focus:ring-2 focus:ring-green-400"
              />
              <button
                onClick={() => handleUpdateCoins(youtube_url, coin_value)}
                className="w-full bg-gradient-to-r from-green-500 to-lime-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
              >
                ✅ Update Coins
              </button>
            </div>
          </div>

          {/* Toggle Giveaway Management */}
          <div className="bg-white border border-blue-200 p-6 rounded-2xl shadow-lg">
            <h2 className="text-2xl font-semibold text-blue-700 mb-4">🎮 Giveaway Management</h2>
            <button
              onClick={() => setShowGiveawayManagement((prev) => !prev)}
              className="w-full bg-gradient-to-r from-blue-500 to-indigo-400 text-white font-semibold py-3 rounded-lg hover:brightness-110 transition-all shadow"
            >
              {showGiveawayManagement ? "Hide Giveaway Management" : "Show Giveaway Management"}
            </button>
            {showGiveawayManagement && <GiveawayManagement />}
          </div>
        </div>
      </div>
    );
}