'use client';
import { Building2, Bell, Clock, ChevronRight } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { timeAgo } from '@/lib/time';

export default function ClientGroup({ group }) {
  const router = useRouter();

  return (
    <button
      onClick={() =>
        router.push(`/reminders?client=${encodeURIComponent(group.clientName)}`)
      }
      className="card p-5 text-left w-full hover:border-brand-300
                 hover:shadow-pop transition-all duration-150 group"
    >
      <div className="flex items-start gap-3">
        <div className="h-10 w-10 rounded-lg bg-brand-50 text-brand-600
                        grid place-items-center shrink-0">
          <Building2 size={18} />
        </div>

        <div className="flex-1 min-w-0">
          <p className="font-semibold text-ink-900 truncate text-[15px]">
            {group.clientName}
          </p>
          <p className="text-xs text-ink-500 mt-0.5">
            {group.companies.length}{' '}
            {group.companies.length === 1 ? 'company' : 'companies'}
          </p>
        </div>

        <ChevronRight
          size={16}
          className="text-ink-400 mt-1 group-hover:text-brand-500
                     group-hover:translate-x-0.5 transition"
        />
      </div>

      {/* Companies */}
      <div className="mt-4 flex flex-wrap gap-1.5">
        {group.companies.slice(0, 4).map((c) => (
          <span
            key={c.name}
            className="chip bg-ink-100 text-ink-700 border border-ink-200"
            title={`${c.count} reminder${c.count > 1 ? 's' : ''}`}
          >
            {c.name}
            {c.count > 1 && (
              <span className="text-ink-400 ml-0.5">×{c.count}</span>
            )}
          </span>
        ))}
        {group.companies.length > 4 && (
          <span className="chip bg-ink-100 text-ink-500">
            +{group.companies.length - 4} more
          </span>
        )}
      </div>

      {/* Stats */}
      <div className="mt-4 pt-3 border-t border-ink-100
                      flex items-center gap-4 text-[11px] text-ink-500">
        <span className="flex items-center gap-1">
          <Bell size={11} />
          {group.totalUses} {group.totalUses === 1 ? 'reminder' : 'reminders'}
        </span>
        <span className="flex items-center gap-1">
          <Clock size={11} />
          {timeAgo(group.lastUsedAt)}
        </span>
      </div>
    </button>
  );
}