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

"use client";

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

interface AdminClientProps {
    email: string;
}

export default function AdminClient({ email }: AdminClientProps) {
    const [giveaway, setGiveaway] = useState({ title: "", description: "", value: 0, prize: "", duration: 0,  endsAt: 0 });
    const [youtube_url, setYoutubeUrl] = useState("");
    const [coin_value, setCoinValue] = useState(0);

    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: "", duration: 0,  endsAt: 0 }); // Reset form
        } else {
            const error = await response.json();
            alert(`Failed to create giveaway: ${error.error}`);
        }
    };

    return (
        <div className="min-h-screen bg-white text-black py-12 px-4 sm:px-6 lg:px-8">
            <div className="max-w-3xl mx-auto space-y-8">
            <h1 className="text-3xl font-bold">Admin Page</h1>
            <p>Welcome, {email}!</p>

            {/* Create Giveaway Form */}
            <div className="p-4 text-white bg-gray-800 shadow rounded">
                <h2 className="text-xl font-semibold">Create Giveaway</h2>
                <input
                    type="text"
                    placeholder="Title"
                    value={giveaway.title}
                    onChange={(e) => setGiveaway({ ...giveaway, title: e.target.value })}
                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <textarea
                    placeholder="Description"
                    value={giveaway.description}
                    onChange={(e) => setGiveaway({ ...giveaway, description: e.target.value })}
                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <input
                    type="text"
                    placeholder="Prize"
                    value={giveaway.prize}
                    onChange={(e) => setGiveaway({ ...giveaway, prize: e.target.value })}
                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <input
                    type="number"
                    placeholder="Value in Dollars"
                    value={giveaway.value || ""}
                    onChange={(e) => setGiveaway({ ...giveaway, value: Number(e.target.value) })}
                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <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="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <button
                    onClick={handleCreateGiveaway}
                    className="mt-4 bg-blue-600 text-white px-4 py-2 rounded"
                    >
                    Create Giveaway
                </button>
            </div>

            {/* Update User Coins Form */}
            <div className="p-4 text-white bg-gray-800 shadow rounded">
                <h2 className="text-xl font-semibold">Update User Coins</h2>
                <input
                    type="text"
                    placeholder="YouTube Video URL"
                    value={youtube_url}
                    onChange={(e) => setYoutubeUrl(e.target.value)}
                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <input
                    type="number"
                    placeholder="Coins"
                    value={coin_value}
                    onChange={(e) => setCoinValue(Number(e.target.value))}
                    className="block w-full mt-2 p-2 border rounded bg-gray-700 text-gray-200"
                />
                <button
                    onClick={() => handleUpdateCoins(youtube_url, coin_value)} 
                    className="mt-4 bg-green-600 text-white px-4 py-2 rounded"
                >
                    Update Coins
                </button>
            </div>
            </div>
        </div>
    );
}