Meetings Table

import { Sparkles, Video } from "lucide-react";
import { cn } from "@/lib/utils";

export interface MeetingsTableRow {
  id: string;
  title: string;
  date: string;
  duration: string;
  platform: "Zoom" | "Meet" | "Teams" | "Huddle";
  participants: string[];
  status: "Recap ready" | "Processing" | "Private";
}

export interface MeetingsTableProps {
  caption?: string;
  rows?: MeetingsTableRow[];
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";
const TONES = ["from-da-primary to-da-accent", "from-da-accent to-da-success", "from-da-danger to-da-primary", "from-da-warning to-da-danger"];
const STATUS = {
  "Recap ready": "bg-da-success/15 text-da-success",
  Processing: "bg-da-primary/15 text-da-primary",
  Private: "bg-da-muted text-da-muted-fg",
} as const;

const DEFAULT_ROWS: MeetingsTableRow[] = [
  {
    id: "m1",
    title: "Q4 roadmap sync",
    date: "Today, 10:00",
    duration: "32 min",
    platform: "Meet",
    participants: ["Amara Diallo", "Leo Park", "Sofia Rossi", "Noah Klein"],
    status: "Recap ready",
  },
  {
    id: "m2",
    title: "Customer call — Parcel",
    date: "Today, 14:30",
    duration: "48 min",
    platform: "Zoom",
    participants: ["Leo Park", "Priya Raman"],
    status: "Processing",
  },
  {
    id: "m3",
    title: "1:1 Amara / Jin",
    date: "Yesterday, 16:00",
    duration: "25 min",
    platform: "Huddle",
    participants: ["Amara Diallo", "Jin Park"],
    status: "Private",
  },
  {
    id: "m4",
    title: "Design critique",
    date: "Yesterday, 11:00",
    duration: "45 min",
    platform: "Teams",
    participants: ["Sofia Rossi", "Jin Park", "Noah Klein"],
    status: "Recap ready",
  },
];

/** Recent meetings as a glass table: title with platform icon, date, duration, participant avatars and recap status pill; scrolls on mobile. */
export function MeetingsTable({ caption = "Recent meetings", rows = DEFAULT_ROWS, className }: MeetingsTableProps) {
  return (
    <div className={cn("overflow-hidden rounded-da-lg shadow-da-md", GLASS, className)}>
      <div className="overflow-x-auto" tabIndex={0} role="region" aria-label={`${caption} (scrollable)`}>
        <table className="w-full min-w-[640px] text-sm">
          <caption className="px-5 pt-4 pb-3 text-left font-da-display text-base font-semibold">{caption}</caption>
          <thead className="text-xs text-da-muted-fg">
            <tr className="border-y border-da-border">
              {["Meeting", "When", "Length", "People", "Recap"].map((h) => (
                <th key={h} scope="col" className="px-5 py-2.5 text-left font-medium">
                  {h}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-da-border">
            {rows.map((r) => (
              <tr key={r.id} className="da-transition hover:bg-da-surface-2">
                <th scope="row" className="px-5 py-3 text-left font-medium">
                  <span className="flex items-center gap-3">
                    <span className="grid size-8 place-items-center rounded-da-sm bg-gradient-to-br from-da-primary/20 to-da-accent/20">
                      <Video aria-hidden className="size-4 text-da-primary" />
                    </span>
                    <span>
                      {r.title}
                      <span className="block text-xs font-normal text-da-muted-fg">{r.platform}</span>
                    </span>
                  </span>
                </th>
                <td className="px-5 py-3 whitespace-nowrap text-da-muted-fg">{r.date}</td>
                <td className="px-5 py-3 font-da-mono text-xs whitespace-nowrap">{r.duration}</td>
                <td className="px-5 py-3">
                  <span className="flex -space-x-1.5" title={r.participants.join(", ")}>
                    <span className="sr-only">{r.participants.join(", ")}</span>
                    {r.participants.map((p, i) => (
                      <span
                        key={p}
                        aria-hidden
                        className={cn(
                          "grid size-7 place-items-center rounded-full bg-gradient-to-br text-[10px] font-semibold text-da-primary-fg ring-2 ring-da-bg",
                          TONES[i % TONES.length],
                        )}
                      >
                        {p
                          .split(" ")
                          .map((w) => w[0])
                          .join("")}
                      </span>
                    ))}
                  </span>
                </td>
                <td className="px-5 py-3">
                  <span
                    className={cn("inline-flex items-center gap-1 rounded-da-pill px-2.5 py-0.5 text-xs font-semibold whitespace-nowrap", STATUS[r.status])}
                  >
                    {r.status === "Recap ready" && <Sparkles aria-hidden className="size-3" />}
                    {r.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default MeetingsTable;