TESTE

import { useEffect, useState } from "react";

import { Navigate } from "react-router-dom";

import { useAuth } from "@/hooks/useAuth";

import { supabase } from "@/integrations/supabase/client";

import AddReminderDialog from "@/components/AddReminderDialog";

import ReminderCard from "@/components/ReminderCard";

import TelegramSettings from "@/components/TelegramSettings";

import { Button } from "@/components/ui/button";

import { Bell, LogOut, Loader2 } from "lucide-react";

import type { Tables } from "@/integrations/supabase/types";

type Reminder = Tables<"reminders">;

const Index = () => {

  const { user, loading: authLoading, signOut } = useAuth();

  const [reminders, setReminders] = useState<Reminder[]>([]);

  const [loading, setLoading] = useState(true);

  const fetchReminders = async () => {

    if (!user) return;

    const { data } = await supabase

      .from("reminders")

      .select("*")

      .eq("user_id", user.id)

      .order("remind_at", { ascending: true });

    setReminders(data || []);

    setLoading(false);

  };

  useEffect(() => {

    if (user) fetchReminders();

  }, [user]);

  if (authLoading) {

    return (

      <div className="flex min-h-screen items-center justify-center bg-background">

        <Loader2 className="h-8 w-8 animate-spin text-primary" />

      </div>

    );

  }

  if (!user) return <Navigate to="/auth" replace />;

  const upcoming = reminders.filter((r) => !r.is_sent);

  const sent = reminders.filter((r) => r.is_sent);

  return (

    <div className="min-h-screen bg-background">

      {/* Header */}

      <header className="sticky top-0 z-10 border-b border-border/50 bg-background/80 backdrop-blur-md">

        <div className="mx-auto flex max-w-2xl items-center justify-between px-4 py-3">

          <div className="flex items-center gap-2.5">

            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10">

              <Bell className="h-5 w-5 text-primary" />

            </div>

            <h1 className="text-lg font-bold">Mes Rappels</h1>

          </div>

          <div className="flex items-center gap-2">

            <AddReminderDialog onAdded={fetchReminders} />

            <Button variant="ghost" size="icon" onClick={signOut} className="h-9 w-9">

              <LogOut className="h-4 w-4" />

            </Button>

          </div>

        </div>

      </header>

      <main className="mx-auto max-w-2xl space-y-6 px-4 py-6">

        {/* Telegram Settings */}

        <TelegramSettings />

        {/* Upcoming */}

        <section>

          <h2 className="mb-3 text-sm font-semibold text-muted-foreground uppercase tracking-wider">

            À venir ({upcoming.length})

          </h2>

          {loading ? (

            <div className="flex justify-center py-8">

              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />

            </div>

          ) : upcoming.length === 0 ? (

            <div className="rounded-xl border border-dashed border-border/60 py-10 text-center">

              <Bell className="mx-auto h-8 w-8 text-muted-foreground/40" />

              <p className="mt-2 text-sm text-muted-foreground">Aucun rappel à venir</p>

              <p className="text-xs text-muted-foreground/60">Créez votre premier rappel !</p>

            </div>

          ) : (

            <div className="space-y-2">

              {upcoming.map((r) => (

                <ReminderCard key={r.id} reminder={r} onDeleted={fetchReminders} onUpdated={fetchReminders} />

              ))}

            </div>

          )}

        </section>

        {/* Sent */}

        {sent.length > 0 && (

          <section>

            <h2 className="mb-3 text-sm font-semibold text-muted-foreground uppercase tracking-wider">

              Envoyés ({sent.length})

            </h2>

            <div className="space-y-2">

              {sent.map((r) => (

                <ReminderCard key={r.id} reminder={r} onDeleted={fetchReminders} onUpdated={fetchReminders} />

              ))}

            </div>

          </section>

        )}

      </main>

    </div>

  );

};

export default Index;