import { useState, useEffect } from "react";
import { supabase } from "@/integrations/supabase/client";
import { useNavigate } from "react-router-dom";
import { Bell, ArrowRight } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { formatShortDateEST } from "@/lib/timezoneUtils";

export function RemindersListWidget() {
  const [reminders, setReminders] = useState<any[]>([]);
  const navigate = useNavigate();

  useEffect(() => {
    supabase.from("reminders").select("id, title, due_date, status, description")
      .neq("status", "dismissed").order("due_date", { ascending: true }).limit(8)
      .then(({ data }) => setReminders(data || []));
  }, []);

  return (
    <div className="h-full flex flex-col">
      <div className="px-4 pt-4 pb-2 flex items-center justify-between">
        <div className="flex items-center gap-2 text-[15px] font-semibold">
          <Bell className="w-4 h-4 text-amber-500" /> Reminders
        </div>
        <Badge variant="secondary" className="text-2xs h-5">{reminders.length}</Badge>
      </div>
      <div className="divide-y divide-border flex-1 overflow-auto">
        {reminders.length === 0 ? (
          <p className="p-4 text-[13px] text-muted-foreground text-center">No reminders</p>
        ) : reminders.map((r) => (
          <div key={r.id} className="px-4 py-2.5 flex items-center justify-between gap-2 hover:bg-muted/50 transition-colors cursor-pointer" onClick={() => navigate("/dashboard/reminders")}>
            <div className="min-w-0 flex-1">
              <p className="text-[13px] font-medium text-foreground truncate">{r.title}</p>
              {r.description && <p className="text-2xs text-muted-foreground truncate mt-0.5">{r.description}</p>}
            </div>
            {r.due_date && <span className="text-2xs text-muted-foreground">{formatShortDateEST(r.due_date)}</span>}
          </div>
        ))}
      </div>
      <Button variant="ghost" className="w-full text-muted-foreground text-[11px] font-semibold h-8 hover:text-primary rounded-t-none border-t" onClick={() => navigate("/dashboard/reminders")}>
        View All Reminders <ArrowRight className="w-3 h-3 ml-1" />
      </Button>
    </div>
  );
}
