"use client";

import { useState } from "react";
import { ClientCard } from "./ClientCard";
import { ClientModal } from "./ClientModal";

type ClientRow = {
  id: string;
  name: string;
  email: string;
  docCount: number;
  lastActivity: Date | null;
  createdAt: Date;
};

type ClientsPageClientProps = {
  clients: ClientRow[];
};

export function ClientsPageClient({ clients }: ClientsPageClientProps) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-[var(--navy)] text-2xl font-semibold">Clients</h1>
        <button
          onClick={() => setIsOpen(true)}
          className="bg-[var(--gold)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90"
        >
          + Add Client
        </button>
      </div>

      {clients.length === 0 ? (
        <div className="text-center py-16">
          <p className="text-gray-500 mb-4">No clients yet.</p>
          <button
            onClick={() => setIsOpen(true)}
            className="bg-[var(--gold)] text-white px-4 py-2 rounded-lg text-sm font-medium hover:opacity-90"
          >
            + Add your first client
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {clients.map((client) => (
            <ClientCard
              key={client.id}
              id={client.id}
              name={client.name}
              email={client.email}
              docCount={client.docCount}
              lastActivity={client.lastActivity}
            />
          ))}
        </div>
      )}

      <ClientModal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        mode="create"
      />
    </div>
  );
}
