"use client";

import Link from "next/link";

import { ArrowRight, Mail } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { clients } from "@/data/clients";

export function OverviewRecentClients() {
  const recent = [...clients]
    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
    .slice(0, 8);

  return (
    <Card className="flex flex-col">
      <CardHeader className="pb-3">
        <CardTitle className="font-semibold text-base">Recently Added Clients</CardTitle>
      </CardHeader>
      <CardContent className="flex-1 p-0">
        <ScrollArea className="h-[300px]">
          {recent.length === 0 ? (
            <div className="flex h-full flex-col items-center justify-center gap-2 py-12 text-center">
              <Mail className="size-8 text-muted-foreground/40" />
              <p className="text-muted-foreground text-sm">No clients yet</p>
            </div>
          ) : (
            <div className="divide-y">
              {recent.map((c) => (
                <div key={c.id} className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/30">
                  <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full bg-muted font-bold text-xs">
                    {c.name.charAt(0)}
                  </div>
                  <div className="min-w-0 flex-1">
                    <p className="truncate font-medium text-sm">{c.name}</p>
                    <p className="mt-0.5 truncate text-muted-foreground text-xs">{c.email}</p>
                    <div className="mt-1.5 flex flex-wrap gap-1.5">
                      <Badge variant="outline" className="px-1.5 py-0 text-[10px]">
                        {c.type}
                      </Badge>
                      <Badge
                        variant={c.status === "Active" ? "default" : "secondary"}
                        className="px-1.5 py-0 text-[10px]"
                      >
                        {c.status}
                      </Badge>
                    </div>
                  </div>
                  <span className="shrink-0 text-[11px] text-muted-foreground">
                    {new Date(c.createdAt).toLocaleDateString("en-CA", { month: "short", day: "numeric" })}
                  </span>
                </div>
              ))}
            </div>
          )}
        </ScrollArea>
      </CardContent>
      <CardFooter className="border-t pt-3">
        <Button asChild variant="ghost" size="sm" className="w-full text-xs">
          <Link href="/dashboard/clients">
            Open Clients <ArrowRight className="ml-1 size-3" />
          </Link>
        </Button>
      </CardFooter>
    </Card>
  );
}