pn-new-crm/src/components/email/email-threads-list.tsx

'use client';

import { useQuery } from '@tanstack/react-query';
import { formatDistanceToNow } from 'date-fns';
import { Mail } from 'lucide-react';

import { apiFetch } from '@/lib/api/client';

interface Thread {
  id: string;
  subject: string;
  snippet: string | null;
  lastMessageAt: string;
  participants: string[];
  unreadCount: number;
}

interface ThreadsResponse {
  data: Thread[];
  total: number;
}

export function EmailThreadsList() {
  const { data, isLoading } = useQuery<ThreadsResponse>({
    queryKey: ['email', 'threads'],
    queryFn: () => apiFetch<ThreadsResponse>('/api/v1/email/threads'),
  });

  if (isLoading) {
    return <p className="text-sm text-muted-foreground">Loading threads…</p>;
  }

  const threads = data?.data ?? [];

  if (threads.length === 0) {
    return (
      <div className="rounded-lg border border-dashed p-8 text-center text-muted-foreground">
        <Mail className="mx-auto h-6 w-6 mb-2" />
        <p className="text-sm">No email threads yet.</p>
        <p className="text-xs">
          Connect an account and trigger a sync to see incoming threads here.
        </p>
      </div>
    );
  }

  return (
    <div className="rounded-lg border divide-y">
      {threads.map((t) => (
        <div key={t.id} className="p-3 hover:bg-muted/40">
          <div className="flex items-center justify-between gap-2">
            <div className="text-sm font-medium truncate">{t.subject || '(no subject)'}</div>
            <div className="text-xs text-muted-foreground shrink-0">
              {formatDistanceToNow(new Date(t.lastMessageAt), { addSuffix: true })}
            </div>
          </div>
          <div className="text-xs text-muted-foreground truncate">{t.participants.join(', ')}</div>
          {t.snippet && (
            <div className="text-xs text-muted-foreground mt-1 line-clamp-1">{t.snippet}</div>
          )}
          {t.unreadCount > 0 && (
            <span className="inline-block mt-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">
              {t.unreadCount} unread
            </span>
          )}
        </div>
      ))}
    </div>
  );
}