import prisma from "@/lib/prisma";
import ServerNavigation from "../components/ServerNavigation";
import ServerFooter from "../components/ServerFooter";
import { submitReview } from "@/app/actions/review";

export const metadata = {
  title: "Guest Reviews | Lazuli Hotel",
};

export default async function ReviewsPage() {
  const reviews = await prisma.review.findMany({
    where: { status: "APPROVED" },
    orderBy: { createdAt: "desc" },
  });

  return (
    <main>
      <ServerNavigation />
      
      <section style={{ paddingTop: "8rem", paddingBottom: "5rem", minHeight: "100vh", backgroundColor: "var(--bg-primary)" }}>
        <div className="container animate-fade-in">
          <div style={{ textAlign: "center", marginBottom: "4rem" }}>
            <h1 style={{ fontSize: "3rem", color: "var(--accent-gold)" }}>Guest Reviews</h1>
            <p style={{ color: "var(--text-secondary)", maxWidth: "600px", margin: "1rem auto", fontSize: "1.125rem" }}>
              Read what our guests have to say about their stay at Lazuli Hotel, or share your own experience.
            </p>
          </div>

          <div className="grid grid-cols-2" style={{ gap: "4rem" }}>
            {/* Reviews List */}
            <div>
              <h2 style={{ fontSize: "2rem", marginBottom: "2rem", fontFamily: "var(--font-serif)" }}>Recent Experiences</h2>
              {reviews.length === 0 ? (
                <p style={{ color: "var(--text-secondary)" }}>No reviews yet. Be the first to leave one!</p>
              ) : (
                <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
                  {reviews.map((review) => (
                    <div key={review.id} className="glass" style={{ padding: "2rem" }}>
                      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "1rem" }}>
                        <strong style={{ fontSize: "1.25rem", color: "var(--accent-gold)" }}>{review.guestName}</strong>
                        <div style={{ color: "var(--accent-gold)", fontSize: "1.25rem" }}>
                          {"★".repeat(review.rating)}{"☆".repeat(5 - review.rating)}
                        </div>
                      </div>
                      <p style={{ color: "var(--text-secondary)", lineHeight: "1.6", fontStyle: "italic" }}>
                        "{review.comment}"
                      </p>
                      <p style={{ marginTop: "1rem", fontSize: "0.875rem", color: "#94a3b8" }}>
                        {new Date(review.createdAt).toLocaleDateString()}
                      </p>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Submit Review Form */}
            <div className="glass" style={{ padding: "3rem", alignSelf: "start" }}>
              <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem", fontFamily: "var(--font-serif)" }}>Share Your Experience</h2>
              <form action={submitReview} style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
                <div>
                  <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Your Name</label>
                  <input type="text" name="guestName" required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }} />
                </div>

                <div>
                  <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Rating (1-5)</label>
                  <select name="rating" required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }}>
                    <option value="5">5 - Excellent</option>
                    <option value="4">4 - Very Good</option>
                    <option value="3">3 - Average</option>
                    <option value="2">2 - Poor</option>
                    <option value="1">1 - Terrible</option>
                  </select>
                </div>

                <div>
                  <label style={{ display: "block", marginBottom: "0.5rem", fontWeight: "500" }}>Your Review</label>
                  <textarea name="comment" rows={5} required style={{ width: "100%", padding: "0.75rem", borderRadius: "0.375rem", border: "1px solid var(--border-light)" }}></textarea>
                </div>

                <button type="submit" className="btn btn-primary" style={{ marginTop: "1rem", fontSize: "1.125rem", padding: "1rem" }}>
                  Submit Review
                </button>
                <p style={{ fontSize: "0.875rem", color: "var(--text-secondary)", textAlign: "center" }}>
                  Reviews are moderated by our team before being published.
                </p>
              </form>
            </div>
          </div>
        </div>
      </section>

      <ServerFooter />
    </main>
  );
}