import Link from "next/link";
import { StatusBadge } from "./StatusBadge";

type DocumentRow = {
  id: string;
  name: string;
  clientName: string | null;
  status: "Draft" | "Sent" | "Viewed" | "Signed";
  sentAt: Date | null;
  clientId: string;
};

type Props = { rows: DocumentRow[]; showClientColumn?: boolean };

export function DocumentsTable({ rows, showClientColumn = true }: Props) {
  if (rows.length === 0) {
    return (
      <div style={{ padding: "3rem", textAlign: "center", color: "#6B7280", fontSize: "0.875rem" }}>
        No documents found.
      </div>
    );
  }

  return (
    <table style={{ width: "100%", fontSize: "0.875rem", borderCollapse: "collapse" }}>
      <thead>
        <tr style={{ borderBottom: "1px solid #F3F4F6" }}>
          <th style={{ textAlign: "left", fontSize: "0.75rem", fontWeight: 600, color: "#6B7280", textTransform: "uppercase", letterSpacing: "0.05em", padding: "0.75rem 1.5rem" }}>
            Document Name
          </th>
          {showClientColumn && (
            <th style={{ textAlign: "left", fontSize: "0.75rem", fontWeight: 600, color: "#6B7280", textTransform: "uppercase", letterSpacing: "0.05em", padding: "0.75rem 1.5rem" }}>
              Client
            </th>
          )}
          <th style={{ textAlign: "left", fontSize: "0.75rem", fontWeight: 600, color: "#6B7280", textTransform: "uppercase", letterSpacing: "0.05em", padding: "0.75rem 1.5rem" }}>
            Status
          </th>
          <th style={{ textAlign: "left", fontSize: "0.75rem", fontWeight: 600, color: "#6B7280", textTransform: "uppercase", letterSpacing: "0.05em", padding: "0.75rem 1.5rem" }}>
            Date Sent
          </th>
        </tr>
      </thead>
      <tbody>
        {rows.map((row) => (
          <tr key={row.id} style={{ borderBottom: "1px solid #F9FAFB" }}>
            <td style={{ padding: "0.875rem 1.5rem", fontWeight: 500 }}>
              <Link
                href={`/portal/documents/${row.id}`}
                style={{ color: "#1B2B4B", textDecoration: "none" }}
                className="hover:text-blue-600 hover:underline"
              >
                {row.name}
              </Link>
            </td>
            {showClientColumn && (
              <td style={{ padding: "0.875rem 1.5rem", color: "#374151" }}>{row.clientName ?? "—"}</td>
            )}
            <td style={{ padding: "0.875rem 1.5rem" }}>
              <StatusBadge status={row.status} />
            </td>
            <td style={{ padding: "0.875rem 1.5rem", color: "#6B7280" }}>
              {row.sentAt
                ? new Date(row.sentAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })
                : "—"}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
