import Link from "next/link";
import { formatDistanceToNow } from "date-fns";
import {
  Mail,
  ShoppingCart,
  UserCheck,
  UserPlus,
  Users,
} from "lucide-react";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import type { AdminDashboardActivityItem, AdminDashboardActivityType } from "../_lib/admin-dashboard-types";

const ACTIVITY_ICON: Record<AdminDashboardActivityType, typeof UserPlus> = {
  customer_created: UserPlus,
  customer_status: Users,
  order_status: ShoppingCart,
  staff_login: UserCheck,
  email_sent: Mail,
};

type ActivityFeedProps = {
  activity: AdminDashboardActivityItem[];
};

export function ActivityFeed({ activity }: ActivityFeedProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle className="leading-none">Recent activity</CardTitle>
        <CardDescription>Signups, orders, staff activity, and emails</CardDescription>
      </CardHeader>
      <CardContent>
        {activity.length === 0 ? (
          <p className="py-8 text-center text-muted-foreground text-sm">No recent activity.</p>
        ) : (
          <ul className="space-y-3">
            {activity.map((item) => {
              const Icon = ACTIVITY_ICON[item.type] ?? Users;
              const when = (() => {
                try {
                  return formatDistanceToNow(new Date(item.at), { addSuffix: true });
                } catch {
                  return item.at;
                }
              })();

              const content = (
                <div className="flex items-start gap-3">
                  <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted">
                    <Icon className="size-4 text-muted-foreground" />
                  </span>
                  <div className="min-w-0 flex-1">
                    <p className="text-sm leading-snug">{item.title}</p>
                    <p className="mt-0.5 text-muted-foreground text-xs">{when}</p>
                  </div>
                </div>
              );

              return (
                <li key={item.id}>
                  {item.href ? (
                    <Link href={item.href} className="block rounded-md transition-colors hover:bg-muted/50">
                      {content}
                    </Link>
                  ) : (
                    content
                  )}
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}