"use client";

import { useState, useEffect, useMemo } from "react";

export type AgendaItem = {
  id: number;
  time_ict: string;
  time_utc: string;
  category: string;
  title: string;
  description: string;
  speaker: string;
  speaker_title: string;
  location: string;
  avatar?: string;
};

type Props = {
  data: {
    id: string;
    eyebrow: string;
    title: string;
    description: string;
    items: AgendaItem[];
  };
};

const CATEGORIES = [
  "All Sessions",
  "Ceremonies",
  "Keynotes & Address",
  "Technical & Infrastructure",
  "Forums & Panels",
  "Breaks & Networking",
];

const renderFormattedText = (text: string) => {
  if (!text) return null;
  const lines = text.split("\n");
  return lines.map((line, lineIndex) => {
    const parts = line.split(/(\*\*.*?\*\*|\*.*?\*)/g);
    const renderedLine = parts.map((part, partIndex) => {
      if (part.startsWith("**") && part.endsWith("**")) {
        return (
          <strong key={partIndex} className="text-primary font-bold">
            {part.slice(2, -2)}
          </strong>
        );
      }
      if (part.startsWith("*") && part.endsWith("*")) {
        return (
          <em key={partIndex} className="italic text-on-surface-variant/80">
            {part.slice(1, -1)}
          </em>
        );
      }
      return part;
    });

    return (
      <span key={lineIndex} className="block min-h-[1.25rem]">
        {renderedLine}
      </span>
    );
  });
};

export default function AgendaSection({ data }: Props) {
  const base = process.env.NEXT_PUBLIC_BASE_PATH || "";
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedCategory, setSelectedCategory] = useState("All Sessions");
  const [viewMode, setViewMode] = useState<"table" | "card">("card");
  const [timezoneMode, setTimezoneMode] = useState<"ICT" | "UTC" | "Local">("ICT");
  const [bookmarkedIds, setBookmarkedIds] = useState<number[]>([]);
  const [showOnlyBookmarks, setShowOnlyBookmarks] = useState(false);
  const [selectedModalItem, setSelectedModalItem] = useState<AgendaItem | null>(null);

  // Load bookmarks from localStorage
  useEffect(() => {
    try {
      const saved = localStorage.getItem("ipv6_agenda_bookmarks");
      if (saved) {
        setBookmarkedIds(JSON.parse(saved));
      }
    } catch {
      // Ignore localStorage errors
    }
  }, []);

  // Keyboard shortcut to close modal
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") {
        setSelectedModalItem(null);
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, []);

  // Save bookmarks to localStorage
  const toggleBookmark = (id: number) => {
    setBookmarkedIds((prev) => {
      const next = prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id];
      try {
        localStorage.setItem("ipv6_agenda_bookmarks", JSON.stringify(next));
      } catch {
        // Ignore localStorage errors
      }
      return next;
    });
  };

  // Convert time display based on selected timezone mode
  const getTimeDisplay = (item: AgendaItem) => {
    if (timezoneMode === "UTC") {
      return item.time_utc ? `${item.time_utc} UTC` : item.time_ict;
    }
    if (timezoneMode === "ICT") {
      return item.time_ict ? `${item.time_ict} ICT` : item.time_utc;
    }
    // Local Time mode
    try {
      const timeStr = item.time_utc;
      if (!timeStr) return item.time_ict;
      const parts = timeStr.split(" - ");
      if (parts.length < 1) return item.time_ict;

      const parseUtcHourMin = (s: string) => {
        const m = s.trim().match(/(\d+)[\.:](\d+)\s*(am|pm)/i);
        if (!m) return null;
        let h = parseInt(m[1], 10);
        const min = parseInt(m[2], 10);
        const period = m[3].toLowerCase();
        if (period === "pm" && h < 12) h += 12;
        if (period === "am" && h === 12) h = 0;
        const d = new Date();
        d.setUTCHours(h, min, 0, 0);
        return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit", hour12: true });
      };

      const startLocal = parseUtcHourMin(parts[0]);
      const endLocal = parts[1] ? parseUtcHourMin(parts[1]) : null;

      if (startLocal && endLocal) return `${startLocal} - ${endLocal} (Local)`;
      if (startLocal) return `${startLocal} (Local)`;
      return item.time_ict;
    } catch {
      return item.time_ict;
    }
  };

  // Filter items
  const filteredItems = useMemo(() => {
    return (data.items || []).filter((item) => {
      // Category filter
      if (selectedCategory !== "All Sessions" && item.category !== selectedCategory) {
        const categoryMatch =
          selectedCategory === "Breaks & Networking" && (item.category?.includes("Breaks") || item.category?.includes("Nghỉ"));
        const ceremonyMatch =
          selectedCategory === "Ceremonies" && (item.category?.includes("Ceremony") || item.category?.includes("Lễ"));
        const keynoteMatch =
          selectedCategory === "Keynotes & Address" && (item.category?.includes("Keynote") || item.category?.includes("Bài phát biểu"));
        const techMatch =
          selectedCategory === "Technical & Infrastructure" && (item.category?.includes("Technical") || item.category?.includes("Kỹ thuật"));
        const forumMatch =
          selectedCategory === "Forums & Panels" && (item.category?.includes("Forum") || item.category?.includes("Tọa đàm"));

        if (!categoryMatch && !ceremonyMatch && !keynoteMatch && !techMatch && !forumMatch) {
          return false;
        }
      }

      // Bookmark filter
      if (showOnlyBookmarks && !bookmarkedIds.includes(item.id)) {
        return false;
      }

      // Search query
      if (searchQuery.trim()) {
        const q = searchQuery.toLowerCase();
        const matchTitle = item.title?.toLowerCase().includes(q);
        const matchDesc = item.description?.toLowerCase().includes(q);
        const matchSpeaker = item.speaker?.toLowerCase().includes(q) || item.speaker_title?.toLowerCase().includes(q);
        const matchCategory = item.category?.toLowerCase().includes(q);
        if (!matchTitle && !matchDesc && !matchSpeaker && !matchCategory) {
          return false;
        }
      }

      return true;
    });
  }, [data.items, selectedCategory, showOnlyBookmarks, bookmarkedIds, searchQuery]);

  const handlePrint = () => {
    window.print();
  };

  const renderAvatar = (avatarUrl?: string, sizeClass: string = "w-9 h-9 lg:w-10 lg:h-10") => {
    return (
      <div className={`${sizeClass} rounded-full overflow-hidden border border-primary/30 bg-primary/10 flex items-center justify-center backdrop-blur-sm shadow-sm shrink-0`}>
        {avatarUrl ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={`${base}${avatarUrl.startsWith("/") ? avatarUrl : `/${avatarUrl}`}`}
            alt="Speaker"
            className="w-full h-full object-cover"
          />
        ) : (
          <svg className="w-1/2 h-1/2 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={1.5}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
          </svg>
        )}
      </div>
    );
  };

  return (
    <section className="py-12 lg:py-20 max-w-hd mx-auto px-[var(--spacing-gutter)]" id={data.id}>
      {/* Printable CSS style overlay for clean PDF / Print export */}
      <style jsx global>{`
        @media print {
          body * {
            visibility: hidden;
          }
          #printable-agenda-area,
          #printable-agenda-area * {
            visibility: visible;
          }
          #printable-agenda-area {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            color: #000 !important;
            background: #fff !important;
          }
          .no-print {
            display: none !important;
          }
          .glass-panel {
            background: #fff !important;
            border: 1px solid #ddd !important;
            color: #000 !important;
            box-shadow: none !important;
          }
          .text-primary {
            color: #1a56db !important;
          }
          .text-on-surface,
          .text-on-surface-variant {
            color: #111 !important;
          }
        }
      `}</style>

      {/* Header */}
      <div className="flex flex-col lg:flex-row justify-between lg:items-end mb-8 gap-4 no-print">
        <div className="max-w-3xl">
          <span className="font-[var(--font-label-caps)] text-xs lg:text-sm text-primary block mb-2 tracking-[0.25em] uppercase">
            {data.eyebrow}
          </span>
          <h2 className="font-[var(--font-display-lg)] text-on-surface uppercase tracking-tight text-[clamp(1.75rem,3vw+1rem,3.5rem)]">
            {data.title}
          </h2>
        </div>
        <p className="text-on-surface-variant/60 text-base lg:text-lg max-w-md xl:text-right">
          {data.description}
        </p>
      </div>

      {/* Main Container */}
      <div id="printable-agenda-area" className="w-full">
        {/* Printable Header (Visible only when printing) */}
        <div className="hidden print:block mb-8 border-b pb-4">
          <h1 className="text-2xl font-bold text-gray-900">APAC IPv6, AI & Cloud Summit 2026 - Agenda</h1>
          <p className="text-sm text-gray-600">Keangnam Landmark Tower, Hanoi, Vietnam</p>
        </div>

        {/* Event Venue Banner with Direct Google Maps Button */}
        <div className="glass-panel p-4 rounded-2xl mb-6 border border-primary/30 bg-surface/50 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 no-print">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-primary/10 border border-primary/30 flex items-center justify-center text-primary shrink-0">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                <path strokeLinecap="round" strokeLinejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" />
              </svg>
            </div>
            <div>
              <div className="text-[11px] uppercase tracking-wider text-primary font-bold">Event Venue / Địa điểm tổ chức</div>
              <div className="text-sm font-semibold text-on-surface">Keangnam Landmark Tower, Hanoi, Vietnam</div>
            </div>
          </div>

          <a
            href="https://www.google.com/maps?q=InterContinental+Hanoi+Landmark72"
            target="_blank"
            rel="noopener noreferrer"
            className="px-4 py-2 rounded-full gold-gradient-bg text-on-primary font-bold text-xs uppercase tracking-wider hover:shadow-[0_0_15px_rgba(197,160,89,0.4)] transition-all flex items-center gap-1.5 shrink-0"
          >
            <span>📍 Google Maps Direct</span>
            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
              <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
            </svg>
          </a>
        </div>

        {/* Control Toolbar */}
        <div className="glass-panel p-3.5 lg:p-5 rounded-3xl mb-6 space-y-3 no-print border border-primary/20 bg-surface/40 backdrop-blur-md">
          {/* Row 1: Search & My Schedule & Print & View Modes */}
          <div className="flex flex-col md:flex-row gap-3 justify-between items-center">
            {/* Search Input */}
            <div className="relative w-full md:w-80">
              <input
                type="text"
                placeholder="Search sessions, speaker..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-9 pr-3 py-2 rounded-full bg-background/80 border border-primary/20 text-on-surface text-xs lg:text-sm focus:outline-none focus:border-primary transition-colors placeholder:text-on-surface-variant/50"
              />
              <svg
                className="w-4 h-4 text-primary absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
                />
              </svg>
            </div>

            {/* Right Action Controls */}
            <div className="flex flex-wrap items-center gap-2.5 w-full md:w-auto justify-end">
              {/* My Schedule Filter Button */}
              <button
                onClick={() => setShowOnlyBookmarks(!showOnlyBookmarks)}
                className={`px-3.5 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider transition-all duration-300 flex items-center gap-1.5 border ${
                  showOnlyBookmarks
                    ? "bg-primary text-background border-primary shadow-[0_0_15px_rgba(197,160,89,0.4)]"
                    : "bg-surface/60 text-on-surface border-primary/30 hover:border-primary"
                }`}
              >
                <span>★ My Schedule ({bookmarkedIds.length})</span>
              </button>

              {/* Print / Export PDF Button */}
              <button
                onClick={handlePrint}
                className="px-3.5 py-1.5 rounded-full text-xs font-semibold uppercase tracking-wider border border-primary/30 bg-surface/60 text-primary hover:bg-primary/10 transition-colors flex items-center gap-1.5"
                title="Print or Save as PDF"
              >
                <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.6 0-1.1-.47-1.12-1.07L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.656" />
                </svg>
                <span>Print / PDF</span>
              </button>

              {/* Timezone Switcher */}
              <div className="flex items-center bg-background/80 rounded-full border border-primary/20 p-1 text-xs">
                {(["ICT", "UTC", "Local"] as const).map((tz) => (
                  <button
                    key={tz}
                    onClick={() => setTimezoneMode(tz)}
                    className={`px-2 py-0.5 rounded-full transition-colors ${
                      timezoneMode === tz ? "bg-primary text-background font-bold" : "text-on-surface-variant/70 hover:text-on-surface"
                    }`}
                  >
                    {tz}
                  </button>
                ))}
              </div>

              {/* View Mode Toggle */}
              <div className="flex items-center bg-background/80 rounded-full border border-primary/20 p-1 text-xs">
                <button
                  onClick={() => setViewMode("card")}
                  className={`px-2.5 py-0.5 rounded-full transition-colors flex items-center gap-1 ${
                    viewMode === "card" ? "bg-primary text-background font-bold" : "text-on-surface-variant/70 hover:text-on-surface"
                  }`}
                >
                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M4 4h7v16H4V4zm9 0h7v7h-7V4zm0 9h7v7h-7v-7z" />
                  </svg>
                  <span>Timeline</span>
                </button>
                <button
                  onClick={() => setViewMode("table")}
                  className={`px-2.5 py-0.5 rounded-full transition-colors flex items-center gap-1 ${
                    viewMode === "table" ? "bg-primary text-background font-bold" : "text-on-surface-variant/70 hover:text-on-surface"
                  }`}
                >
                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M4 4h16v16H4V4zm2 4v4h12V8H6zm0 6v4h12v-4H6z" />
                  </svg>
                  <span>Table</span>
                </button>
              </div>
            </div>
          </div>

          {/* Row 2: Category Filter Tags */}
          <div className="flex items-center gap-1.5 overflow-x-auto pb-1 scrollbar-none border-t border-primary/10 pt-3">
            {CATEGORIES.map((category) => (
              <button
                key={category}
                onClick={() => setSelectedCategory(category)}
                className={`px-3 py-1 rounded-full text-xs whitespace-nowrap transition-all duration-300 font-medium ${
                  selectedCategory === category
                    ? "bg-primary/20 text-primary border border-primary/50 font-semibold"
                    : "bg-surface/40 text-on-surface-variant/80 border border-transparent hover:border-primary/20 hover:text-on-surface"
                }`}
              >
                {category}
              </button>
            ))}
          </div>
        </div>

        {/* Results Counter Bar */}
        <div className="flex justify-between items-center mb-6 text-xs text-on-surface-variant/70 px-2 no-print">
          <div>
            Showing <span className="text-primary font-bold">{filteredItems.length}</span> of {(data.items || []).length} sessions
            {showOnlyBookmarks && " (My Schedule)"}
          </div>
          <div className="flex items-center gap-2">
            <span className="relative flex h-2.5 w-2.5">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
            </span>
            <span className="text-emerald-400 font-medium uppercase tracking-wider text-[11px]">Event Date: Aug 4, 2026</span>
          </div>
        </div>

        {/* No Results Fallback */}
        {filteredItems.length === 0 && (
          <div className="text-center py-12 glass-panel rounded-3xl">
            <p className="text-on-surface-variant/60 text-base mb-2">No matching sessions found.</p>
            <button
              onClick={() => {
                setSearchQuery("");
                setSelectedCategory("All Sessions");
                setShowOnlyBookmarks(false);
              }}
              className="text-primary hover:underline text-xs font-semibold"
            >
              Reset all filters
            </button>
          </div>
        )}

        {/* CARD VIEW: Wider Max Width + Reduced Gaps for Natural Text Flow */}
        {viewMode === "card" && filteredItems.length > 0 && (
          <div className="relative w-full max-w-6xl mx-auto pl-8 lg:pl-0">
            {/* Central vertical line */}
            <div
              className="absolute left-4 lg:left-1/2 top-4 bottom-4 w-[2px] bg-gradient-to-b from-primary via-primary/45 to-primary/5 -translate-x-1/2 pointer-events-none"
              style={{ content: '""' }}
            />

            {/* Timeline Items */}
            <div className="space-y-6 lg:space-y-8">
              {filteredItems.map((item, index) => {
                const isEven = index % 2 === 0;
                const isBookmarked = bookmarkedIds.includes(item.id);
                const orderNum = String(index + 1).padStart(2, "0");
                const timeText = getTimeDisplay(item);
                const hasSpeaker = Boolean(item.speaker && item.speaker.trim() !== "");

                return (
                  <div key={item.id || index} className="relative w-full group">
                    {/* Timeline Dot (glowing on hover) */}
                    <div className="absolute left-[-24px] lg:left-1/2 top-5 lg:top-6 -translate-x-1/2 w-4 h-4 rounded-full bg-background border-2 border-primary z-20 group-hover:scale-125 group-hover:bg-primary group-hover:shadow-[0_0_10px_#c5a059] transition-all duration-300 status-led" />

                    {/* Left/Right alternating grid layout */}
                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-3 lg:gap-8 w-full">
                      {isEven ? (
                        <>
                          {/* Left: Card (Desktop) / Full content (Mobile) */}
                          <div className="order-1 lg:order-1">
                            <div className="glass-panel p-4 lg:p-6 rounded-3xl relative overflow-hidden hover:border-primary/50 transition-all duration-300">
                              {/* Top Bar inside Card: Category badge + Order + Star */}
                              <div className="flex justify-between items-center mb-3 gap-2">
                                <span className="px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-primary/10 text-primary border border-primary/20">
                                  {item.category}
                                </span>
                                <div className="flex items-center gap-2.5">
                                  <span className="text-xs font-[var(--font-display-lg)] text-primary/40 group-hover:text-primary transition-colors duration-300">
                                    {orderNum}
                                  </span>
                                  <button
                                    onClick={() => toggleBookmark(item.id)}
                                    className="text-lg no-print hover:scale-110 transition-transform leading-none"
                                    title={isBookmarked ? "Remove from My Schedule" : "Add to My Schedule"}
                                  >
                                    <span className={isBookmarked ? "text-amber-400" : "text-on-surface-variant/30 hover:text-amber-400"}>
                                      {isBookmarked ? "★" : "☆"}
                                    </span>
                                  </button>
                                </div>
                              </div>

                              {/* Mobile-only time badge */}
                              <div className="lg:hidden mb-2">
                                <span className="font-[var(--font-display-lg)] text-sm text-primary">
                                  {timeText}
                                </span>
                              </div>

                              {/* Session Title */}
                              <h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-2 leading-snug lg:text-right">
                                {renderFormattedText(item.title)}
                              </h3>

                              {/* Description & Speaker Info */}
                              <div className="text-xs lg:text-sm text-on-surface-variant/75 leading-relaxed border-t border-primary/10 pt-2.5 mt-2.5 flex flex-col gap-2.5">
                                {item.description && (
                                  <div className="lg:text-right">
                                    {renderFormattedText(item.description)}
                                  </div>
                                )}

                                {/* Speaker info with avatar */}
                                <div className="flex flex-row lg:flex-row-reverse items-center gap-2.5 border-t border-primary/5 pt-2">
                                  {hasSpeaker ? (
                                    <>
                                      {renderAvatar(item.avatar)}
                                      <div className="lg:text-right">
                                        <div className="font-semibold text-on-surface text-xs lg:text-sm">
                                          {item.speaker}
                                        </div>
                                        {item.speaker_title && (
                                          <div className="text-[11px] text-on-surface-variant/60">
                                            {item.speaker_title}
                                          </div>
                                        )}
                                      </div>
                                    </>
                                  ) : (
                                    <div className="text-on-surface-variant/40 font-bold lg:text-right w-full text-base">
                                      —
                                    </div>
                                  )}
                                </div>

                                {/* Location Badge */}
                                <div className="flex items-center lg:justify-end gap-1 text-[11px] text-on-surface-variant/60">
                                  <svg className="w-3 h-3 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                  </svg>
                                  <span>{item.location || "Main Stage"}</span>
                                </div>
                              </div>
                            </div>
                          </div>

                          {/* Right: Time badge (Desktop-only) */}
                          <div className="order-2 lg:order-2 hidden lg:flex flex-col items-start justify-center pl-2">
                            <span className="font-[var(--font-display-lg)] text-lg lg:text-xl text-primary group-hover:text-on-surface transition-colors duration-300">
                              {timeText}
                            </span>
                            {timezoneMode !== "UTC" && item.time_utc && (
                              <span className="text-xs text-on-surface-variant/50">
                                {item.time_utc} UTC
                              </span>
                            )}
                          </div>
                        </>
                      ) : (
                        <>
                          {/* Left: Time badge (Desktop-only) */}
                          <div className="order-2 lg:order-1 hidden lg:flex flex-col items-end justify-center pr-2 text-right">
                            <span className="font-[var(--font-display-lg)] text-lg lg:text-xl text-primary group-hover:text-on-surface transition-colors duration-300">
                              {timeText}
                            </span>
                            {timezoneMode !== "UTC" && item.time_utc && (
                              <span className="text-xs text-on-surface-variant/50">
                                {item.time_utc} UTC
                              </span>
                            )}
                          </div>

                          {/* Right: Card (Desktop) / Full content (Mobile) */}
                          <div className="order-1 lg:order-2">
                            <div className="glass-panel p-4 lg:p-6 rounded-3xl relative overflow-hidden hover:border-primary/50 transition-all duration-300">
                              {/* Top Bar inside Card: Category badge + Order + Star */}
                              <div className="flex justify-between items-center mb-3 gap-2">
                                <span className="px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-primary/10 text-primary border border-primary/20">
                                  {item.category}
                                </span>
                                <div className="flex items-center gap-2.5">
                                  <span className="text-xs font-[var(--font-display-lg)] text-primary/40 group-hover:text-primary transition-colors duration-300">
                                    {orderNum}
                                  </span>
                                  <button
                                    onClick={() => toggleBookmark(item.id)}
                                    className="text-lg no-print hover:scale-110 transition-transform leading-none"
                                    title={isBookmarked ? "Remove from My Schedule" : "Add to My Schedule"}
                                  >
                                    <span className={isBookmarked ? "text-amber-400" : "text-on-surface-variant/30 hover:text-amber-400"}>
                                      {isBookmarked ? "★" : "☆"}
                                    </span>
                                  </button>
                                </div>
                              </div>

                              {/* Mobile-only time badge */}
                              <div className="lg:hidden mb-2">
                                <span className="font-[var(--font-display-lg)] text-sm text-primary">
                                  {timeText}
                                </span>
                              </div>

                              {/* Session Title */}
                              <h3 className="font-[var(--font-display-lg)] text-base lg:text-lg text-on-surface mb-2 leading-snug">
                                {renderFormattedText(item.title)}
                              </h3>

                              {/* Description & Speaker Info */}
                              <div className="text-xs lg:text-sm text-on-surface-variant/75 leading-relaxed border-t border-primary/10 pt-2.5 mt-2.5 flex flex-col gap-2.5">
                                {item.description && (
                                  <div>{renderFormattedText(item.description)}</div>
                                )}

                                {/* Speaker info with avatar */}
                                <div className="flex flex-row items-center gap-2.5 border-t border-primary/5 pt-2">
                                  {hasSpeaker ? (
                                    <>
                                      {renderAvatar(item.avatar)}
                                      <div>
                                        <div className="font-semibold text-on-surface text-xs lg:text-sm">
                                          {item.speaker}
                                        </div>
                                        {item.speaker_title && (
                                          <div className="text-[11px] text-on-surface-variant/60">
                                            {item.speaker_title}
                                          </div>
                                        )}
                                      </div>
                                    </>
                                  ) : (
                                    <div className="text-on-surface-variant/40 font-bold text-base">
                                      —
                                    </div>
                                  )}
                                </div>

                                {/* Location Badge */}
                                <div className="flex items-center gap-1 text-[11px] text-on-surface-variant/60">
                                  <svg className="w-3 h-3 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                  </svg>
                                  <span>{item.location || "Main Stage"}</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

        {/* TABLE VIEW: Responsive Truncated Rows + Click Row to Open Detail Modal */}
        {viewMode === "table" && filteredItems.length > 0 && (
          <div className="glass-panel rounded-3xl overflow-hidden border border-primary/20 shadow-2xl">
            <div className="overflow-x-auto">
              <table className="w-full text-left text-xs lg:text-sm text-on-surface border-collapse">
                <thead className="bg-primary/10 uppercase tracking-wider text-[11px] font-bold text-primary border-b border-primary/20">
                  <tr>
                    <th className="py-3 px-3 lg:px-4 w-36 shrink-0">Time</th>
                    <th className="py-3 px-3 w-32 shrink-0">Category</th>
                    <th className="py-3 px-4 min-w-[240px]">Session Title & Description</th>
                    <th className="py-3 px-3 lg:px-4 w-48 shrink-0">Speaker / Presenter</th>
                    <th className="py-3 px-3 w-28 shrink-0">Location</th>
                    <th className="py-3 px-2 w-16 text-center no-print shrink-0">Action</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-primary/10">
                  {filteredItems.map((item, idx) => {
                    const isBookmarked = bookmarkedIds.includes(item.id);
                    const isEven = idx % 2 === 0;
                    const hasSpeaker = Boolean(item.speaker && item.speaker.trim() !== "");

                    return (
                      <tr
                        key={item.id || idx}
                        onClick={() => setSelectedModalItem(item)}
                        className={`hover:bg-primary/10 transition-colors group cursor-pointer ${
                          isEven ? "bg-surface/20" : "bg-transparent"
                        }`}
                        title="Click to view full session details"
                      >
                        {/* Time */}
                        <td className="py-3 px-3 lg:px-4 align-top">
                          <div className="font-bold text-primary whitespace-nowrap text-xs lg:text-sm">
                            {getTimeDisplay(item)}
                          </div>
                          {timezoneMode !== "UTC" && item.time_utc && (
                            <div className="text-[11px] text-on-surface-variant/50 mt-0.5 whitespace-nowrap">
                              {item.time_utc} UTC
                            </div>
                          )}
                        </td>

                        {/* Category */}
                        <td className="py-3 px-3 align-top">
                          <span className="inline-block px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-primary/10 text-primary border border-primary/20 whitespace-nowrap">
                            {item.category}
                          </span>
                        </td>

                        {/* Title & Description (Truncated for clean responsive table layout) */}
                        <td className="py-3 px-4 align-top max-w-md">
                          <h4 className="font-semibold text-on-surface text-xs lg:text-sm mb-1 leading-snug line-clamp-2 group-hover:text-primary transition-colors">
                            {item.title}
                          </h4>
                          {item.description && (
                            <p className="text-[11px] lg:text-xs text-on-surface-variant/75 leading-relaxed line-clamp-1">
                              {item.description}
                            </p>
                          )}
                        </td>

                        {/* Speaker */}
                        <td className="py-3 px-3 lg:px-4 align-top">
                          {hasSpeaker ? (
                            <div className="flex items-center gap-2">
                              {renderAvatar(item.avatar, "w-7 h-7 lg:w-8 lg:h-8")}
                              <div className="min-w-0">
                                <div className="font-semibold text-on-surface text-xs truncate">
                                  {item.speaker}
                                </div>
                                {item.speaker_title && (
                                  <div className="text-[10px] text-on-surface-variant/60 truncate">
                                    {item.speaker_title}
                                  </div>
                                )}
                              </div>
                            </div>
                          ) : (
                            <span className="text-on-surface-variant/40 font-bold text-base">—</span>
                          )}
                        </td>

                        {/* Location */}
                        <td className="py-3 px-3 align-top">
                          <div className="flex items-center gap-1 text-xs text-on-surface-variant/80 whitespace-nowrap">
                            <svg className="w-3.5 h-3.5 text-primary shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                            <span>{item.location || "Main Stage"}</span>
                          </div>
                        </td>

                        {/* Actions: Save Star + Expand indicator */}
                        <td className="py-3 px-2 align-top text-center no-print" onClick={(e) => e.stopPropagation()}>
                          <div className="flex items-center justify-center gap-1">
                            <button
                              onClick={() => toggleBookmark(item.id)}
                              className="p-1 rounded-full hover:bg-primary/20 transition-all text-base"
                              title={isBookmarked ? "Remove from My Schedule" : "Add to My Schedule"}
                            >
                              <span className={isBookmarked ? "text-amber-400" : "text-on-surface-variant/30 hover:text-amber-400"}>
                                {isBookmarked ? "★" : "☆"}
                              </span>
                            </button>
                            <button
                              onClick={() => setSelectedModalItem(item)}
                              className="p-1 rounded-full text-on-surface-variant/40 hover:text-primary transition-colors"
                              title="Expand details"
                            >
                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25v-4.5m0 4.5h-4.5m4.5 0L15 15m-11.25 5.25h4.5m-4.5 0v-4.5m0 4.5L9 15" />
                              </svg>
                            </button>
                          </div>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}
      </div>

      {/* SESSION DETAIL MODAL (Opens on Row Click in Table View or Detail Click) */}
      {selectedModalItem && (
        <div
          className="fixed inset-0 z-50 bg-black/75 backdrop-blur-md flex items-center justify-center p-4 no-print animate-in fade-in duration-200"
          onClick={() => setSelectedModalItem(null)}
        >
          <div
            className="glass-panel p-6 lg:p-8 rounded-3xl max-w-2xl w-full relative max-h-[90vh] overflow-y-auto border border-primary/30 shadow-2xl bg-surface/95 text-on-surface"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Modal Header Bar */}
            <div className="flex items-center justify-between gap-4 mb-4 pb-4 border-b border-primary/20">
              <span className="px-3 py-1 rounded-full text-xs font-semibold bg-primary/20 text-primary border border-primary/40">
                {selectedModalItem.category}
              </span>
              <div className="flex items-center gap-3">
                <button
                  onClick={() => toggleBookmark(selectedModalItem.id)}
                  className="px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider border border-primary/40 bg-surface/60 text-primary hover:bg-primary/20 transition-colors flex items-center gap-1.5"
                >
                  <span className={bookmarkedIds.includes(selectedModalItem.id) ? "text-amber-400" : "text-on-surface-variant/40"}>
                    {bookmarkedIds.includes(selectedModalItem.id) ? "★ Saved" : "☆ Save to Schedule"}
                  </span>
                </button>
                <button
                  onClick={() => setSelectedModalItem(null)}
                  className="p-1.5 rounded-full hover:bg-primary/20 text-on-surface-variant/70 hover:text-on-surface transition-colors"
                  title="Close Modal (Esc)"
                >
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>

            {/* Session Time & Location Badges */}
            <div className="flex flex-wrap items-center gap-3 text-xs text-on-surface-variant/80 mb-4">
              <div className="flex items-center gap-1.5 bg-primary/10 px-3 py-1 rounded-full text-primary font-bold">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                </svg>
                <span>{getTimeDisplay(selectedModalItem)}</span>
              </div>

              {selectedModalItem.time_utc && (
                <span className="text-on-surface-variant/60 text-[11px]">
                  ({selectedModalItem.time_utc} UTC)
                </span>
              )}

              <div className="flex items-center gap-1 text-on-surface-variant/80 bg-surface/80 px-3 py-1 rounded-full border border-primary/20">
                <svg className="w-3.5 h-3.5 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                </svg>
                <span>{selectedModalItem.location || "Main Stage"}</span>
              </div>
            </div>

            {/* Full Title (Untruncated) */}
            <h2 className="font-[var(--font-display-lg)] text-xl lg:text-2xl text-on-surface font-bold mb-4 leading-snug">
              {renderFormattedText(selectedModalItem.title)}
            </h2>

            {/* Full Description (Untruncated) */}
            {selectedModalItem.description && (
              <div className="text-sm text-on-surface-variant/85 leading-relaxed bg-surface/40 p-4 rounded-2xl border border-primary/10 mb-6">
                <div className="text-xs uppercase font-bold text-primary mb-1 tracking-wider">Description</div>
                {renderFormattedText(selectedModalItem.description)}
              </div>
            )}

            {/* Speaker Information */}
            <div className="border-t border-primary/20 pt-4">
              <div className="text-xs uppercase font-bold text-primary mb-2 tracking-wider">Speaker / Presenter</div>
              {selectedModalItem.speaker && selectedModalItem.speaker.trim() !== "" ? (
                <div className="flex items-center gap-4 bg-primary/5 p-3.5 rounded-2xl border border-primary/15">
                  {renderAvatar(selectedModalItem.avatar, "w-12 h-12")}
                  <div>
                    <div className="font-bold text-on-surface text-base">
                      {selectedModalItem.speaker}
                    </div>
                    {selectedModalItem.speaker_title && (
                      <div className="text-xs text-on-surface-variant/70 mt-0.5">
                        {selectedModalItem.speaker_title}
                      </div>
                    )}
                  </div>
                </div>
              ) : (
                <div className="text-on-surface-variant/40 font-bold text-lg">—</div>
              )}
            </div>

            {/* Modal Footer */}
            <div className="mt-6 pt-4 border-t border-primary/10 flex justify-end">
              <button
                onClick={() => setSelectedModalItem(null)}
                className="px-6 py-2.5 rounded-full gold-gradient-bg text-on-primary font-bold text-xs uppercase tracking-wider hover:shadow-lg transition-all"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}