"use client";

import Link from "next/link";
import { Bell, Coffee } from "lucide-react";
import { formatDistanceToNow } from "date-fns";
import { useNotifications } from "@/lib/hooks/use-notifications";
import { useDataProvider } from "@/lib/demo/data-provider-context";

export function RecentActivity() {
  const { data, isLoading } = useNotifications(5);
  const { basePath } = useDataProvider();

  const notifications = data?.results ?? [];

  return (
    <div className="rounded-2xl border border-border bg-card overflow-hidden h-full">
      <div className="flex items-center justify-between px-6 py-4 border-b border-border">
        <h3 className="font-heading font-semibold text-base">What&apos;s Been Happening</h3>
        <Link
          href={`${basePath}/settings/notifications`}
          className="text-xs font-medium text-primary hover:text-primary/80 transition-colors"
        >
          View all
        </Link>
      </div>

      <div className="p-4">
        {isLoading ? (
          <div className="space-y-4 p-2">
            {Array.from({ length: 3 }).map((_, i) => (
              <div key={i} className="flex gap-3 animate-pulse">
                <div className="size-9 rounded-xl bg-muted shrink-0" />
                <div className="flex-1 space-y-2 py-0.5">
                  <div className="h-3.5 w-3/5 rounded bg-muted" />
                  <div className="h-3 w-4/5 rounded bg-muted" />
                </div>
              </div>
            ))}
          </div>
        ) : notifications.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-10 text-center">
            <div className="size-11 rounded-xl bg-primary/10 flex items-center justify-center mb-3">
              <Coffee className="size-5 text-primary" />
            </div>
            <p className="text-sm font-medium text-foreground">Nothing yet — all quiet!</p>
            <p className="text-xs text-muted-foreground mt-1">
              Activity will show up here as you manage your home.
            </p>
          </div>
        ) : (
          <div className="space-y-1">
            {notifications.map((notification) => (
              <div
                key={notification.id}
                className="flex gap-3 items-start rounded-xl p-2.5 hover:bg-accent/50 transition-colors"
              >
                <div className="flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary/10">
                  <Bell className="size-4 text-primary" />
                </div>
                <div className="flex-1 min-w-0 py-0.5">
                  <p className="text-sm font-medium leading-snug">
                    {notification.title}
                  </p>
                  {notification.body && (
                    <p className="text-xs text-muted-foreground mt-0.5 line-clamp-1">
                      {notification.body}
                    </p>
                  )}
                  <p className="text-[11px] text-muted-foreground/70 mt-1">
                    {formatDistanceToNow(new Date(notification.created_at), {
                      addSuffix: true,
                    })}
                  </p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
