"use client";

import { Suspense } from "react";
import dynamic from "next/dynamic";
import Layout from "@/components/layout/Layout";
import WifiCard from "@/components/accueil/WifiCard";
import Logo from "@/components/Logo";
import { useClientData } from "@/lib/hooks/useClientData";

const WeatherWidget = dynamic(() => import("@/components/accueil/WeatherWidget"), {
  loading: () => <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />,
  ssr: false,
});

function AccueilContent() {
  const { bungalowNumber, gerantMessage, loading } = useClientData();

  if (loading) {
    return (
      <Layout>
        <div className="px-4 py-6 space-y-6">
          <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />
        </div>
      </Layout>
    );
  }

  return (
    <Layout>
      <div className="px-4 py-6 space-y-6">
        <header className="text-center py-4">
          <Logo size={140} className="mb-4" />
          <h1 className="text-2xl font-bold text-primary mb-2">
            Ia Ora Na
          </h1>
          <p className="text-lg text-gray-700">
            Bienvenue au Bungalow {bungalowNumber}
          </p>
        </header>

        <WifiCard />

        <WeatherWidget />

        <section className="bg-secondary rounded-2xl p-6">
          <h2 className="text-xl font-semibold text-primary mb-3">
            Le mot du gérant
          </h2>
          <p className="text-gray-700 leading-relaxed">
            {gerantMessage}
          </p>
        </section>
      </div>
    </Layout>
  );
}

export default function AccueilPage() {
  return (
    <Suspense fallback={
      <Layout>
        <div className="px-4 py-6 space-y-6">
          <div className="h-32 bg-gray-100 rounded-2xl animate-pulse" />
        </div>
      </Layout>
    }>
      <AccueilContent />
    </Suspense>
  );
}