import { Bookmark, User } from "lucide-react";

export type SpeakerLine = { name: string; role: "Speaker" | "Moderator" };

export type AgendaRowData = {
  time: string;
  duration: string;
  trackTitle: string;
  sessionType: string;
  description: string;
  speakers: SpeakerLine[];
};

function SpeakerLineView({ name, role }: SpeakerLine) {
  const pill =
    role === "Speaker" ? "bg-emerald-50" : "bg-yellow-100";
  return (
    <div className="flex flex-wrap items-center gap-2">
      <div className="flex items-center gap-2">
        <div className="flex size-6 shrink-0 items-center justify-center rounded-full bg-zinc-100">
          <User className="size-3 text-gray-600" strokeWidth={2} />
        </div>
        <span className="text-xs font-medium tracking-wide text-[var(--theme-card-text-color)]">{name}</span>
      </div>
      <span
        className={`rounded px-2 py-0.5 text-[10px] font-normal tracking-wide ${pill}`}
      >
        {role}
      </span>
    </div>
  );
}

type AgendaRowProps = {
  row: AgendaRowData;
};

export function AgendaRow({ row }: AgendaRowProps) {
  return (
    <div className="relative flex gap-2 pb-3">
      <div className="relative z-[1] flex shrink-0 flex-col items-center">
        <div className="flex size-10 items-center justify-center rounded-full bg-[var(--theme-button-color)]/15">
          <User className="size-4 text-[var(--theme-card-text-color)]" strokeWidth={2} />
        </div>
      </div>
      <div className="flex min-w-0 flex-1 flex-col gap-2">
        <div className="flex items-start justify-between gap-2">
          <div className="flex min-w-0 flex-col gap-1 text-[var(--theme-card-text-color)]">
            <div className="flex items-center gap-1 text-[10px] tracking-wide">
              <span>{row.time}</span>
              <span className="h-3 w-px bg-zinc-300" />
              <span>{row.duration}</span>
            </div>
            <h3 className="text-sm font-semibold leading-[22px] tracking-wide">
              {row.trackTitle}
            </h3>
            <div
              className="inline-flex w-fit items-center rounded px-2 py-0.5 text-[10px] tracking-wide bg-zinc-200 text-[var(--theme-card-text-color)]"
            >
              {row.sessionType}
            </div>
          </div>
          <button
            type="button"
            className="shrink-0 text-[var(--theme-button-color)]"
            aria-label="Bookmark session"
          >
            <Bookmark className="size-5" strokeWidth={1.75} />
          </button>
        </div>
        <p className="text-xs leading-normal tracking-wide text-[var(--theme-card-text-color)]/80">
          {row.description}
        </p>
        <div className="flex flex-col gap-2">
          {row.speakers.map((s) => (
            <SpeakerLineView key={`${s.name}-${s.role}-${s.name}`} {...s} />
          ))}
        </div>
      </div>
    </div>
  );
}