import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
const Container = styled.div`
text-align: center;
padding: 20px;
min-height: 100vh;
background-color: ${({ $isDark }) => ($isDark ? "#1a1a1a" : "#f8f9fa")};
`;
const Title = styled.h1`
color: ${({ $isDark }) => ($isDark ? "yellow" : "black")};
font-size: 28px;
word-wrap: break-word;
text-align: center;
margin-bottom: 20px;
@media (max-width: 768px) {
font-size: 22px;
padding: 0 10px;
}
`;
const Form = styled.form`
border: 1px solid grey;
border-radius: 10px;
max-width: 800px;
margin: 0 auto;
text-align: left;
display: flex;
flex-direction: column;
gap: 15px;
padding: 20px;
background: ${({ $isDark }) => ($isDark ? "#2d2d2d" : "#ffffff")};
color: ${({ $isDark }) => ($isDark ? "white" : "black")};
@media (max-width: 768px) {
padding: 15px;
width: 90%;
}
`;
const Input = styled.input`
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
width: 100%;
`;
const Textarea = styled.textarea`
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
height: 100px;
font-size: 16px;
width: 100%;
`;
const Button = styled.button`
padding: 12px;
background-color: #ea6659;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s ease, transform 0.2s ease;
&:hover {
background-color: #d65245;
transform: scale(1.05);
}
&:disabled {
background-color: #aaa;
cursor: not-allowed;
}
`;
const RegisterVenue = () => {
const [venueData, setVenueData] = useState({
name: "",
description: "",
maxGuests: 1,
price: 1,
media: [],
location: {
address: "",
city: "",
zip: "",
country: "",
},
});
const [loading, setLoading] = useState(false);
const navigate = useNavigate();
const [darkMode, setDarkMode] = useState(
JSON.parse(localStorage.getItem("darkMode")) || false
);
useEffect(() => {
const user = JSON.parse(localStorage.getItem("user"));
if (!user?.venueManager) {
alert("You must be a Venue Manager to create a venue!");
navigate("/dashboard", { replace: true });
}
}, [navigate]);
useEffect(() => {
const observer = new MutationObserver(() => {
setDarkMode(document.body.classList.contains("dark-mode"));
});
observer.observe(document.body, { attributes: true });
return () => observer.disconnect();
}, []);
const handleChange = (e) => {
const { name, value } = e.target;
setVenueData((prevState) => {
if (name.startsWith("location.")) {
const field = name.split(".")[1];
return {
...prevState,
location: {
...prevState.location,
[field]: value,
},
};
} else if (name === "media") {
return {
...prevState,
media: value ? value.split(",").map((url) => ({ url: url.trim() })) : [],
};
} else {
return {
...prevState,
[name]: value,
};
}
});
};
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
const dataToSend = {
...venueData,
maxGuests: Number(venueData.maxGuests),
price: Number(venueData.price),
location: venueData.location,
};
console.log("✅ API'ye Gönderilecek Veri:", JSON.stringify(dataToSend, null, 2));
let token = localStorage.getItem("authToken");
let apiKey = localStorage.getItem("apiKey");
if (!token || !apiKey) {
alert("❌ API Key is missing! Please refresh the page or log in again.");
setLoading(false);
return;
}
try {
const response = await fetch("https://v2.api.noroff.dev/holidaze/venues", {
method: "POST",
headers: {
Authorization: `Bearer ${token}`,
"X-Noroff-API-Key": apiKey,
"Content-Type": "application/json",
},
body: JSON.stringify(dataToSend),
});
const responseData = await response.json();
console.log("🟢 API :", responseData);
if (responseData.errors) {
alert(`❌ API Hatası: ${responseData.errors[0]?.message || "Bilinmeyen hata"}`);
setLoading(false);
return;
}
if (!response.ok) {
alert(responseData.errors?.[0]?.message || "Failed to create venue.");
setLoading(false);
return;
}
const venueId = responseData?.data?.id || responseData?.id;
if (!venueId) {
console.error("❌ Venue ID alınamadı!", responseData);
alert("Venue ID could not be retrieved! Please try again.");
setLoading(false);
return;
}
alert("✅ Venue created successfully!");
setTimeout(() => {
navigate(`/my-venues`);
}, 500);
} catch (error) {
console.error("❌ Error creating venue:", error);
alert("❌ Something went wrong. Please try again.");
}
setLoading(false);
};
return (
<Container $isDark={darkMode}>
<Title $isDark={darkMode}>Register Venue</Title>
<Form onSubmit={handleSubmit} $isDark={darkMode}>
<Input type="text" name="name" placeholder="Venue Name" value={venueData.name} onChange={handleChange} required />
<Textarea name="description" placeholder="Description" value={venueData.description} onChange={handleChange} required />
<Input type="number" name="maxGuests" placeholder="Max Guests" value={venueData.maxGuests} onChange={handleChange} required />
<Input type="number" name="price" placeholder="Price per Night" value={venueData.price} onChange={handleChange} required />
<Input type="text" name="media" placeholder="Add Media URLs (comma separated)" value={venueData.media.map(m => m.url).join(", ") || ""} onChange={handleChange} required />
<Input type="text" name="location.address" placeholder="Address" value={venueData.location.address} onChange={handleChange} required />
<Input type="text" name="location.city" placeholder="City" value={venueData.location.city} onChange={handleChange} required />
<Input type="text" name="location.zip" placeholder="ZIP Code" value={venueData.location.zip} onChange={handleChange} required />
<Input type="text" name="location.country" placeholder="Country" value={venueData.location.country} onChange={handleChange} required />
<Button type="submit" disabled={loading}>{loading ? "Processing..." : "REGISTER VENUE"}</Button>
</Form>
</Container>
);
};
export default RegisterVenue;