import Link from "next/link";
import type { ClientContact } from "@/lib/db/schema";

type ClientCardProps = {
  id: string;
  name: string;
  email: string;
  contacts?: ClientContact[];
  docCount: number;
  lastActivity: Date | null;
};

export function ClientCard({ id, name, email, contacts = [], docCount, lastActivity }: ClientCardProps) {
  return (
    <Link href={"/portal/clients/" + id} style={{ textDecoration: "none" }}>
      <div
        style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", padding: "1.25rem", cursor: "pointer", transition: "box-shadow 0.2s" }}
        onMouseEnter={e => (e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.12)")}
        onMouseLeave={e => (e.currentTarget.style.boxShadow = "0 1px 4px rgba(0,0,0,0.07)")}
      >
        {/* Primary contact */}
        <p style={{ color: "#1B2B4B", fontWeight: 600, fontSize: "1rem", marginBottom: "0.125rem" }}>{name}</p>
        <p style={{ color: "#6B7280", fontSize: "0.875rem", marginBottom: contacts.length > 0 ? "0.5rem" : "0.75rem" }}>{email}</p>

        {/* Additional contacts */}
        {contacts.length > 0 && (
          <div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.5rem", marginBottom: "0.5rem", display: "flex", flexDirection: "column", gap: "0.25rem" }}>
            {contacts.map(c => (
              <div key={c.email} style={{ display: "flex", alignItems: "baseline", gap: "0.375rem" }}>
                <span style={{ fontSize: "0.75rem", color: "#9CA3AF", flexShrink: 0 }}>+</span>
                <div style={{ minWidth: 0 }}>
                  <span style={{ fontSize: "0.8125rem", color: "#374151", fontWeight: 500 }}>{c.name}</span>
                  <span style={{ fontSize: "0.75rem", color: "#9CA3AF", marginLeft: "0.375rem" }}>{c.email}</span>
                </div>
              </div>
            ))}
          </div>
        )}

        <div style={{ borderTop: "1px solid #F3F4F6", paddingTop: "0.75rem", display: "flex", justifyContent: "space-between" }}>
          <span style={{ color: "#6B7280", fontSize: "0.75rem" }}>{docCount} document{docCount !== 1 ? "s" : ""}</span>
          <span style={{ color: "#9CA3AF", fontSize: "0.75rem" }}>
            {lastActivity
              ? new Date(lastActivity).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
              : "No activity yet"}
          </span>
        </div>
      </div>
    </Link>
  );
}
