import { formatDistanceToNow } from "date-fns";
import { tr } from "date-fns/locale";
import { ChatCircle, FileText, Eye, Phone, Note } from '@/lib/icons';

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import type { Activity } from "@/lib/appwrite/schema";

const typeConfig: Record<string, { label: string; icon: React.ElementType; variant: "default" | "secondary" | "outline" }> = {
  gorusme: { label: "Görüşme", icon: ChatCircle, variant: "default" },
  teklif:  { label: "Teklif",  icon: FileText,   variant: "secondary" },
  ziyaret: { label: "Ziyaret", icon: Eye,        variant: "outline" },
  arama:   { label: "Arama",   icon: Phone,      variant: "outline" },
  not:     { label: "Not",     icon: Note,       variant: "outline" },
};

export function RecentActivities({ activities }: { activities: Activity[] }) {
  return (
    <Card className="overflow-hidden flex flex-col lg:h-full">
      <CardHeader className="shrink-0">
        <CardTitle className="text-base">Son Aktiviteler</CardTitle>
      </CardHeader>
      {/* Mobil: içerik sayfayı scroll ettirir. Desktop: kart içinde kalır. */}
      <CardContent className="px-4 pb-4 lg:flex-1 lg:min-h-0 lg:overflow-y-auto">
        {activities.length === 0 ? (
          <p className="text-sm text-muted-foreground py-6 text-center">
            Henüz aktivite yok
          </p>
        ) : (
          <ul className="divide-y">
            {activities.map((a) => {
              const cfg = typeConfig[a.type] ?? typeConfig.not;
              const Icon = cfg.icon;
              return (
                <li key={a.$id} className="flex items-start gap-3 py-3 first:pt-0 last:pb-0">
                  <span className="mt-0.5 rounded-md bg-muted p-1.5 shrink-0">
                    <Icon className="size-3.5 text-muted-foreground" />
                  </span>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 flex-wrap">
                      <p className="text-sm font-medium truncate">{a.title}</p>
                      <Badge variant={cfg.variant} className="text-xs px-1.5 py-0 shrink-0">
                        {cfg.label}
                      </Badge>
                    </div>
                    {a.description && (
                      <p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
                        {a.description}
                      </p>
                    )}
                    <p className="text-xs text-muted-foreground mt-0.5">
                      {formatDistanceToNow(new Date(a.$createdAt), { addSuffix: true, locale: tr })}
                    </p>
                  </div>
                </li>
              );
            })}
          </ul>
        )}
      </CardContent>
    </Card>
  );
}
