'use client';

import React, { useState, useMemo } from 'react';
import Link from 'next/link';
import { INITIAL_GROUP_RIDES } from './fixtures';
import { GroupRideSummary } from './types';
import { CreateRideModal } from './create-ride-modal';
import { EditRideModal } from './edit-ride-modal';
import { DeleteConfirmModal } from './delete-confirm-modal';
import { JoinRideModal } from './join-ride-modal';
import { LivePackRadar } from './live-pack-radar';

interface GroupRidesManagementProps {
  currentUser?: { email?: string | null; displayName?: string | null } | null;
  onViewShowcase?: () => void;
}

type ManagementTab = 'my-rides' | 'discover' | 'radar';
type MyRidesFilter = 'all' | 'organized' | 'joined';

export function GroupRidesManagement({
  currentUser,
  onViewShowcase,
}: GroupRidesManagementProps) {
  const [rides, setRides] = useState<GroupRideSummary[]>(INITIAL_GROUP_RIDES);
  const [activeTab, setActiveTab] = useState<ManagementTab>('my-rides');
  const [myRidesFilter, setMyRidesFilter] = useState<MyRidesFilter>('all');
  const [searchQuery, setSearchQuery] = useState('');
  const [paceFilter, setPaceFilter] = useState<string>('all');

  // Modals state
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [isJoinModalOpen, setIsJoinModalOpen] = useState(false);
  const [editingRide, setEditingRide] = useState<GroupRideSummary | null>(null);
  const [deletingRide, setDeletingRide] = useState<GroupRideSummary | null>(null);
  const [leavingRide, setLeavingRide] = useState<GroupRideSummary | null>(null);

  // Toast alert
  const [activeAlert, setActiveAlert] = useState<{
    message: string;
    type: 'success' | 'info' | 'error';
  } | null>(null);

  const showAlert = (message: string, type: 'success' | 'info' | 'error' = 'success') => {
    setActiveAlert({ message, type });
    setTimeout(() => {
      setActiveAlert(null);
    }, 4500);
  };

  // KPIs
  const myOrganizedRides = useMemo(() => rides.filter((r) => r.isOrganizer), [rides]);
  const myJoinedRides = useMemo(
    () => rides.filter((r) => !r.isOrganizer && (r.userStatus === 'joined' || r.userStatus === 'requested')),
    [rides]
  );
  const myTotalRides = useMemo(
    () => rides.filter((r) => r.isOrganizer || r.userStatus === 'joined'),
    [rides]
  );

  // My Rides filtered list
  const filteredMyRides = useMemo(() => {
    let list = rides.filter((r) => {
      if (myRidesFilter === 'organized') return r.isOrganizer;
      if (myRidesFilter === 'joined') return !r.isOrganizer && (r.userStatus === 'joined' || r.userStatus === 'requested');
      return r.isOrganizer || r.userStatus === 'joined' || r.userStatus === 'requested';
    });

    if (searchQuery.trim()) {
      const q = searchQuery.toLowerCase();
      list = list.filter(
        (r) =>
          r.title.toLowerCase().includes(q) ||
          r.region.toLowerCase().includes(q) ||
          r.meetingPoint.toLowerCase().includes(q)
      );
    }

    return list;
  }, [rides, myRidesFilter, searchQuery]);

  // Discover Rides filtered list
  const discoverRides = useMemo(() => {
    let list = rides;
    if (paceFilter !== 'all') {
      list = list.filter((r) => r.paceClassification.toLowerCase().includes(paceFilter.toLowerCase()));
    }
    if (searchQuery.trim()) {
      const q = searchQuery.toLowerCase();
      list = list.filter(
        (r) =>
          r.title.toLowerCase().includes(q) ||
          r.region.toLowerCase().includes(q) ||
          r.leadHandle.toLowerCase().includes(q)
      );
    }
    return list;
  }, [rides, paceFilter, searchQuery]);

  // Handlers for Add, Alter, Remove, Join, Leave
  const handleCreateRide = (newRide: GroupRideSummary) => {
    const rideWithOrganizer: GroupRideSummary = {
      ...newRide,
      isOrganizer: true,
      status: 'scheduled',
      userStatus: 'joined',
      rideCode: `MS-${Math.floor(1000 + Math.random() * 9000)}`,
      leadHandle: currentUser?.displayName || currentUser?.email?.split('@')[0] || 'MyHandle',
      leadAvatarText: (currentUser?.displayName?.[0] || currentUser?.email?.[0] || 'M').toUpperCase(),
    };
    setRides((prev) => [rideWithOrganizer, ...prev]);
    showAlert(`Created new group ride "${newRide.title}"! Ride Code: ${rideWithOrganizer.rideCode}`, 'success');
  };

  const handleSaveEditedRide = (updatedRide: GroupRideSummary) => {
    setRides((prev) => prev.map((r) => (r.id === updatedRide.id ? updatedRide : r)));
    showAlert(`Updated parameters for "${updatedRide.title}".`, 'success');
  };

  const handleDeleteRide = () => {
    if (!deletingRide) return;
    const title = deletingRide.title;
    setRides((prev) => prev.filter((r) => r.id !== deletingRide.id));
    setDeletingRide(null);
    showAlert(`Deleted group ride "${title}". Pack telemetry cleared.`, 'info');
  };

  const handleCancelRide = (ride: GroupRideSummary) => {
    setRides((prev) =>
      prev.map((r) => (r.id === ride.id ? { ...r, status: 'canceled' } : r))
    );
    showAlert(`Ride "${ride.title}" status changed to Canceled. Participants notified.`, 'info');
  };

  const handleLeaveRide = () => {
    if (!leavingRide) return;
    const title = leavingRide.title;
    setRides((prev) =>
      prev.map((r) => {
        if (r.id !== leavingRide.id) return r;
        return {
          ...r,
          userStatus: 'none',
          participantCount: Math.max(0, r.participantCount - 1),
        };
      })
    );
    setLeavingRide(null);
    showAlert(`Left pack for "${title}". Slot relinquished.`, 'info');
  };

  const handleRequestSlot = (rideId: string) => {
    setRides((prev) =>
      prev.map((r) => {
        if (r.id !== rideId) return r;
        if (r.participantCount >= r.participantLimit) {
          showAlert(`Added to waitlist for "${r.title}".`, 'info');
          return { ...r, userStatus: 'waitlisted' };
        }
        showAlert(`Joined pack for "${r.title}"! Telemetry stream linked.`, 'success');
        return {
          ...r,
          userStatus: 'joined',
          participantCount: r.participantCount + 1,
        };
      })
    );
  };

  const handleJoinSuccess = (code: string, rideTitle: string) => {
    showAlert(`Synchronized telemetry with "${rideTitle}" (Code: ${code})!`, 'success');
  };

  const copyRideCode = (code?: string) => {
    if (!code) return;
    navigator.clipboard?.writeText(code);
    showAlert(`Copied ride code "${code}" to clipboard!`, 'success');
  };

  return (
    <div className="flagship-page text-on-surface bg-surface min-h-screen">
      <div className="flex flex-col w-full">
        {/* Dynamic Atmospheric Glow Background Layers */}
        <div className="relative w-full overflow-hidden">
          <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary-container/10 rounded-full blur-[120px] pointer-events-none -z-10"></div>
          <div className="absolute top-64 right-10 w-[500px] h-[500px] bg-secondary-fixed/5 rounded-full blur-[140px] pointer-events-none -z-10"></div>

          {/* Toast Notification Alert */}
          {activeAlert && (
            <div
              className={`fixed top-20 right-6 z-50 px-5 py-3 rounded-xl shadow-2xl flex items-center gap-3 border backdrop-blur-md transition-all animate-bounce ${
                activeAlert.type === 'success'
                  ? 'bg-secondary-container/90 text-on-secondary-container border-secondary-fixed/40'
                  : activeAlert.type === 'error'
                  ? 'bg-error-container/90 text-on-error-container border-error/40'
                  : 'bg-surface-container-high/90 text-primary border-primary/40'
              }`}
            >
              <span className="material-symbols-outlined text-[20px]">
                {activeAlert.type === 'success' ? 'check_circle' : activeAlert.type === 'error' ? 'error' : 'info'}
              </span>
              <span className="font-code-mono text-sm font-semibold">{activeAlert.message}</span>
              <button
                onClick={() => setActiveAlert(null)}
                className="ml-2 hover:opacity-75"
                title="Dismiss"
              >
                <span className="material-symbols-outlined text-[16px]">close</span>
              </button>
            </div>
          )}

          {/* Top Command Bar & Showcase Switch */}
          <div className="bg-surface-container-low border-b border-outline-variant/30 py-3 px-4 sm:px-8">
            <div className="max-w-container-max mx-auto flex flex-wrap items-center justify-between gap-4">
              <div className="flex items-center gap-3">
                <div className="flex items-center gap-2">
                  <span className="relative flex h-2 w-2">
                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-secondary-fixed opacity-75"></span>
                    <span className="relative inline-flex rounded-full h-2 w-2 bg-secondary-fixed-dim"></span>
                  </span>
                  <span className="font-mono text-xs font-semibold text-secondary-fixed">
                    Rider Console Active
                  </span>
                </div>
                <span className="text-outline-variant/40 hidden sm:inline">•</span>
                <span className="text-xs text-on-surface-variant hidden sm:inline font-mono">
                  {currentUser?.email ? currentUser.email : 'Rider Account'}
                </span>
              </div>

              {/* Showcase Mode Link */}
              <div className="flex items-center gap-3">
                {onViewShowcase ? (
                  <button
                    type="button"
                    onClick={onViewShowcase}
                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface hover:text-primary-container transition cursor-pointer"
                    title="View public features showcase"
                  >
                    <span className="material-symbols-outlined text-[16px] text-primary-container">
                      visibility
                    </span>
                    <span>Feature Showcase</span>
                  </button>
                ) : (
                  <Link
                    href="/group-rides?view=showcase"
                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface hover:text-primary-container transition"
                    title="View public features showcase"
                  >
                    <span className="material-symbols-outlined text-[16px] text-primary-container">
                      visibility
                    </span>
                    <span>Feature Showcase</span>
                  </Link>
                )}
                <Link
                  href="/account"
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface transition"
                >
                  <span className="material-symbols-outlined text-[16px] text-secondary">
                    person
                  </span>
                  <span className="hidden sm:inline">Rider Portal</span>
                </Link>
              </div>
            </div>
          </div>

          {/* Header & Quick Action Region */}
          <section className="max-w-container-max mx-auto px-gutter-desktop pt-space-xl pb-space-xl">
            <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-6 pb-space-lg border-b border-outline-variant/20">
              <div>
                <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary-container/15 border border-primary-container/30 text-primary-container text-xs font-mono font-semibold mb-2">
                  <span className="material-symbols-outlined text-[16px]">groups</span>
                  <span>Squad Management &amp; Telemetry Hub</span>
                </div>
                <h1 className="font-headline-xl text-2xl sm:text-3xl lg:text-4xl font-extrabold text-on-surface tracking-tight">
                  Group Rides Management
                </h1>
                <p className="font-body-md text-sm sm:text-base text-on-surface-variant max-w-2xl mt-1">
                  Schedule new pack formations, modify routes, manage roster slots, and monitor live squadron
                  mesh telemetry.
                </p>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-wrap items-center gap-3">
                <button
                  type="button"
                  onClick={() => setIsCreateModalOpen(true)}
                  className="px-5 py-3 rounded-xl bg-gradient-to-r from-primary-container to-primary-fixed text-on-primary-container font-headline-sm text-xs sm:text-sm font-bold shadow-lg hover:shadow-[0_0_20px_rgba(0,242,254,0.45)] transition cursor-pointer flex items-center gap-2"
                  id="btn-create-ride-mgmt"
                >
                  <span className="material-symbols-outlined text-[18px]">add_circle</span>
                  <span>Create Group Ride</span>
                </button>
                <button
                  type="button"
                  onClick={() => setIsJoinModalOpen(true)}
                  className="px-4 py-3 rounded-xl bg-surface-container-high hover:bg-surface-container-highest border border-outline-variant/30 text-on-surface font-headline-sm text-xs sm:text-sm font-semibold transition cursor-pointer flex items-center gap-2"
                  id="btn-join-code-mgmt"
                >
                  <span className="material-symbols-outlined text-primary-fixed-dim text-[18px]">
                    qr_code_scanner
                  </span>
                  <span>Join with Code</span>
                </button>
              </div>
            </div>

            {/* Metrics KPI Cards */}
            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mt-6">
              <div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
                <span className="font-mono text-xs text-on-surface-variant">Active Pack Runs</span>
                <div className="text-2xl font-extrabold font-mono text-on-surface mt-1">
                  {myTotalRides.length}
                </div>
                <span className="text-[11px] font-mono text-secondary-fixed mt-1">
                  {myOrganizedRides.length} Lead • {myJoinedRides.length} Wingman
                </span>
              </div>
              <div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
                <span className="font-mono text-xs text-on-surface-variant">Rides Organized</span>
                <div className="text-2xl font-extrabold font-mono text-primary-container mt-1">
                  {myOrganizedRides.length}
                </div>
                <span className="text-[11px] font-mono text-on-surface-variant mt-1">
                  Road Captain Authority
                </span>
              </div>
              <div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
                <span className="font-mono text-xs text-on-surface-variant">Squad Formations</span>
                <div className="text-2xl font-extrabold font-mono text-secondary-fixed mt-1">
                  {rides.length} Total
                </div>
                <span className="text-[11px] font-mono text-on-surface-variant mt-1">
                  In Regional Network
                </span>
              </div>
              <div className="p-4 rounded-2xl bg-surface-container-low border border-outline-variant/20 flex flex-col justify-between">
                <span className="font-mono text-xs text-on-surface-variant">Live Pack Radar</span>
                <div className="text-2xl font-extrabold font-mono text-primary-fixed mt-1">
                  Online
                </div>
                <span className="text-[11px] font-mono text-secondary-fixed mt-1">
                  6-Node Telemetry Mesh
                </span>
              </div>
            </div>
          </section>

          {/* Main Navigation Tabs */}
          <section className="max-w-container-max mx-auto px-gutter-desktop mb-space-2xl">
            <div className="flex border-b border-outline-variant/20 gap-2 sm:gap-6 overflow-x-auto">
              <button
                type="button"
                onClick={() => setActiveTab('my-rides')}
                className={`pb-3 text-sm font-semibold transition whitespace-nowrap flex items-center gap-2 cursor-pointer border-b-2 ${
                  activeTab === 'my-rides'
                    ? 'border-primary-container text-primary-container font-bold'
                    : 'border-transparent text-on-surface-variant hover:text-on-surface'
                }`}
              >
                <span className="material-symbols-outlined text-[18px]">sports_motorsports</span>
                <span>My Pack Runs ({myTotalRides.length})</span>
              </button>
              <button
                type="button"
                onClick={() => setActiveTab('discover')}
                className={`pb-3 text-sm font-semibold transition whitespace-nowrap flex items-center gap-2 cursor-pointer border-b-2 ${
                  activeTab === 'discover'
                    ? 'border-primary-container text-primary-container font-bold'
                    : 'border-transparent text-on-surface-variant hover:text-on-surface'
                }`}
              >
                <span className="material-symbols-outlined text-[18px]">explore</span>
                <span>Explore Community Rides ({rides.length})</span>
              </button>
              <button
                type="button"
                onClick={() => setActiveTab('radar')}
                className={`pb-3 text-sm font-semibold transition whitespace-nowrap flex items-center gap-2 cursor-pointer border-b-2 ${
                  activeTab === 'radar'
                    ? 'border-primary-container text-primary-container font-bold'
                    : 'border-transparent text-on-surface-variant hover:text-on-surface'
                }`}
              >
                <span className="material-symbols-outlined text-[18px]">radar</span>
                <span>Live Squad Radar Cockpit</span>
              </button>
            </div>
          </section>

          {/* TAB 1: MY PACK RUNS (VIEW, ALTER, REMOVE, LEAVE) */}
          {activeTab === 'my-rides' && (
            <section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
              {/* Filter Sub-Bar */}
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
                <div className="flex items-center gap-2 bg-surface-container-low p-1 rounded-xl border border-outline-variant/20">
                  <button
                    type="button"
                    onClick={() => setMyRidesFilter('all')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      myRidesFilter === 'all'
                        ? 'bg-surface-container-high text-on-surface'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    All My Rides ({myTotalRides.length})
                  </button>
                  <button
                    type="button"
                    onClick={() => setMyRidesFilter('organized')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      myRidesFilter === 'organized'
                        ? 'bg-surface-container-high text-primary-container'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    Organized by Me ({myOrganizedRides.length})
                  </button>
                  <button
                    type="button"
                    onClick={() => setMyRidesFilter('joined')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      myRidesFilter === 'joined'
                        ? 'bg-surface-container-high text-secondary-fixed'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    Joined as Wingman ({myJoinedRides.length})
                  </button>
                </div>

                {/* Search input */}
                <div className="relative max-w-xs w-full">
                  <span className="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[18px]">
                    search
                  </span>
                  <input
                    type="text"
                    placeholder="Search my pack runs..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-9 pr-3.5 py-1.5 rounded-xl bg-surface-container border border-outline-variant/30 text-xs text-on-surface focus:outline-none focus:ring-1 focus:ring-primary-container"
                  />
                </div>
              </div>

              {/* Rides List */}
              {filteredMyRides.length === 0 ? (
                <div className="text-center py-16 px-4 bg-surface-container-low rounded-2xl border border-outline-variant/20 space-y-4">
                  <div className="w-14 h-14 rounded-2xl bg-surface-container-high mx-auto flex items-center justify-center text-primary-container">
                    <span className="material-symbols-outlined text-[28px]">sports_motorsports</span>
                  </div>
                  <div>
                    <h3 className="font-headline-md text-base font-bold text-on-surface">
                      No group rides in this view
                    </h3>
                    <p className="font-body-sm text-xs text-on-surface-variant mt-1 max-w-md mx-auto">
                      Schedule a new run to lead as Road Captain, or browse the community directory to join an upcoming pack run.
                    </p>
                  </div>
                  <div className="flex justify-center gap-3 pt-2">
                    <button
                      type="button"
                      onClick={() => setIsCreateModalOpen(true)}
                      className="px-4 py-2 rounded-xl bg-primary-container text-on-primary-container text-xs font-bold"
                    >
                      + Create Group Ride
                    </button>
                    <button
                      type="button"
                      onClick={() => setActiveTab('discover')}
                      className="px-4 py-2 rounded-xl bg-surface-container hover:bg-surface-container-high border border-outline-variant/30 text-xs font-semibold text-on-surface"
                    >
                      Browse Community Runs
                    </button>
                  </div>
                </div>
              ) : (
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
                  {filteredMyRides.map((ride) => {
                    const isOrg = Boolean(ride.isOrganizer);
                    const isCanceled = ride.status === 'canceled';

                    return (
                      <div
                        key={ride.id}
                        className={`rounded-2xl border flex flex-col justify-between transition-all shadow-md overflow-hidden ${
                          isCanceled
                            ? 'bg-surface-container-low/60 border-error/30 opacity-75'
                            : 'bg-surface-container-low border-outline-variant/30 hover:border-outline-variant/60 hover:shadow-xl'
                        }`}
                      >
                        <div className="p-space-lg">
                          {/* Role & Status Header */}
                          <div className="flex items-center justify-between gap-2 mb-3">
                            <div className="flex items-center gap-1.5">
                              {isOrg ? (
                                <span className="px-2 py-0.5 rounded bg-primary-container/20 text-primary-container border border-primary-container/30 text-[10px] font-mono font-bold">
                                  Road Captain (Organizer)
                                </span>
                              ) : (
                                <span className="px-2 py-0.5 rounded bg-secondary-fixed/20 text-secondary-fixed border border-secondary-fixed/30 text-[10px] font-mono font-bold">
                                  Squad Wingman
                                </span>
                              )}
                              {isCanceled && (
                                <span className="px-2 py-0.5 rounded bg-error/20 text-error border border-error/30 text-[10px] font-mono font-bold">
                                  Canceled
                                </span>
                              )}
                            </div>

                            {/* Ride Code Button */}
                            {ride.rideCode && (
                              <button
                                type="button"
                                onClick={() => copyRideCode(ride.rideCode)}
                                className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-surface-container text-[10px] font-mono text-on-surface-variant hover:text-primary-container transition cursor-pointer"
                                title="Click to copy ride code"
                              >
                                <span>{ride.rideCode}</span>
                                <span className="material-symbols-outlined text-[12px]">content_copy</span>
                              </button>
                            )}
                          </div>

                          {/* Ride Title & Region */}
                          <h3 className="font-headline-md text-lg font-bold text-on-surface mb-1">
                            {ride.title}
                          </h3>
                          <div className="flex items-center gap-2 text-xs font-mono text-on-surface-variant mb-2">
                            <span className="material-symbols-outlined text-[14px] text-secondary-fixed">
                              location_on
                            </span>
                            <span>{ride.region}</span>
                            <span>•</span>
                            <span>{ride.distance}</span>
                          </div>

                          <p className="font-body-sm text-xs text-on-surface-variant line-clamp-2 mb-3">
                            {ride.description}
                          </p>

                          {/* Meeting Point & Schedule */}
                          <div className="p-2.5 rounded-xl bg-surface-container/60 border border-outline-variant/20 text-xs font-mono space-y-1 mb-3">
                            <div className="flex items-center gap-1.5 text-on-surface">
                              <span className="material-symbols-outlined text-[14px] text-primary-container">
                                schedule
                              </span>
                              <span>{ride.scheduledDate} • {ride.scheduledTime}</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-on-surface-variant truncate">
                              <span className="material-symbols-outlined text-[14px] text-secondary-fixed">
                                flag
                              </span>
                              <span className="truncate">Rally: {ride.meetingPoint}</span>
                            </div>
                            <div className="flex items-center gap-1.5 text-on-surface-variant">
                              <span className="material-symbols-outlined text-[14px] text-primary-fixed-dim">
                                group
                              </span>
                              <span>
                                Pack: {ride.participantCount}/{ride.participantLimit} Riders
                              </span>
                            </div>
                          </div>
                        </div>

                        {/* Management Controls Row (ALTER, REMOVE, CANCEL, LEAVE) */}
                        <div className="p-space-lg pt-0 border-t border-outline-variant/20 mt-1 flex flex-wrap items-center justify-between gap-2">
                          {isOrg ? (
                            <>
                              <div className="flex items-center gap-2">
                                <button
                                  type="button"
                                  onClick={() => setEditingRide(ride)}
                                  className="px-3 py-1.5 rounded-xl bg-primary-container/15 hover:bg-primary-container/25 text-primary-container border border-primary-container/30 text-xs font-semibold transition cursor-pointer flex items-center gap-1"
                                  title="Alter ride parameters"
                                >
                                  <span className="material-symbols-outlined text-[15px]">edit</span>
                                  <span>Alter / Edit</span>
                                </button>
                                {!isCanceled && (
                                  <button
                                    type="button"
                                    onClick={() => handleCancelRide(ride)}
                                    className="px-2.5 py-1.5 rounded-xl bg-surface-container hover:bg-surface-container-high text-xs font-semibold text-on-surface-variant hover:text-error transition cursor-pointer"
                                    title="Cancel ride"
                                  >
                                    Cancel
                                  </button>
                                )}
                              </div>

                              <button
                                type="button"
                                onClick={() => setDeletingRide(ride)}
                                className="px-2.5 py-1.5 rounded-xl text-xs font-semibold text-error hover:bg-error/10 transition cursor-pointer flex items-center gap-1"
                                title="Delete group ride permanently"
                              >
                                <span className="material-symbols-outlined text-[15px]">delete</span>
                                <span>Delete</span>
                              </button>
                            </>
                          ) : (
                            <>
                              <span className="text-xs font-mono text-secondary-fixed flex items-center gap-1">
                                <span className="material-symbols-outlined text-[16px]">check_circle</span>
                                <span>Pack Slot Active</span>
                              </span>
                              <button
                                type="button"
                                onClick={() => setLeavingRide(ride)}
                                className="px-3 py-1.5 rounded-xl bg-surface-container hover:bg-error/15 text-error border border-outline-variant/30 hover:border-error/40 text-xs font-semibold transition cursor-pointer flex items-center gap-1"
                                title="Leave group ride"
                              >
                                <span className="material-symbols-outlined text-[15px]">logout</span>
                                <span>Leave Pack</span>
                              </button>
                            </>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              )}
            </section>
          )}

          {/* TAB 2: EXPLORE COMMUNITY RUNS (VIEW, SEARCH, REQUEST SLOT) */}
          {activeTab === 'discover' && (
            <section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
              {/* Filter controls */}
              <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
                <div className="flex flex-wrap items-center gap-2 bg-surface-container-low p-1 rounded-xl border border-outline-variant/20">
                  <button
                    type="button"
                    onClick={() => setPaceFilter('all')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      paceFilter === 'all'
                        ? 'bg-surface-container-high text-on-surface font-bold'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    All Runs ({rides.length})
                  </button>
                  <button
                    type="button"
                    onClick={() => setPaceFilter('Brisk')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      paceFilter === 'Brisk'
                        ? 'bg-surface-container-high text-on-surface font-bold'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    Brisk Pace
                  </button>
                  <button
                    type="button"
                    onClick={() => setPaceFilter('Track')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      paceFilter === 'Track'
                        ? 'bg-surface-container-high text-on-surface font-bold'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    Track Pace
                  </button>
                  <button
                    type="button"
                    onClick={() => setPaceFilter('Tour')}
                    className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition ${
                      paceFilter === 'Tour'
                        ? 'bg-surface-container-high text-on-surface font-bold'
                        : 'text-on-surface-variant hover:text-on-surface'
                    }`}
                  >
                    Tours &amp; Chill
                  </button>
                </div>

                <div className="relative max-w-sm w-full">
                  <span className="material-symbols-outlined absolute left-3 top-2.5 text-on-surface-variant text-[18px]">
                    search
                  </span>
                  <input
                    type="text"
                    placeholder="Search by title, city, or lead..."
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    className="w-full pl-9 pr-3.5 py-1.5 rounded-xl bg-surface-container border border-outline-variant/30 text-xs text-on-surface focus:outline-none focus:ring-1 focus:ring-primary-container"
                  />
                </div>
              </div>

              {/* Directory Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-lg">
                {discoverRides.map((ride) => {
                  const isJoined = ride.userStatus === 'joined' || ride.isOrganizer;
                  const isFull = ride.participantCount >= ride.participantLimit;

                  return (
                    <div
                      key={ride.id}
                      className="bg-surface-container-low rounded-2xl border border-outline-variant/30 overflow-hidden shadow-md hover:shadow-xl transition flex flex-col justify-between"
                    >
                      <div className="p-space-lg">
                        <div className="flex items-center justify-between gap-2 mb-2">
                          <span className="font-mono text-[10px] uppercase px-2 py-0.5 rounded bg-surface-container-high text-primary-container border border-outline-variant/30 font-semibold">
                            {ride.paceClassification}
                          </span>
                          <span className="font-mono text-xs text-on-surface-variant">
                            {ride.scheduledDate} • {ride.scheduledTime}
                          </span>
                        </div>

                        <h3 className="font-headline-md text-base font-bold text-on-surface mb-1">
                          {ride.title}
                        </h3>
                        <p className="font-body-sm text-xs text-on-surface-variant line-clamp-2 mb-3">
                          {ride.description}
                        </p>

                        <div className="space-y-1 text-xs font-mono text-on-surface-variant mb-3">
                          <div className="flex items-center gap-1.5 truncate">
                            <span className="material-symbols-outlined text-[14px] text-secondary-fixed">
                              location_on
                            </span>
                            <span className="truncate">{ride.region}</span>
                          </div>
                          <div className="flex items-center gap-1.5 truncate">
                            <span className="material-symbols-outlined text-[14px] text-primary-container">
                              flag
                            </span>
                            <span className="truncate">Rally: {ride.meetingPoint}</span>
                          </div>
                        </div>

                        <div className="flex items-center justify-between pt-2 border-t border-outline-variant/20 text-xs font-mono text-on-surface-variant">
                          <span>Lead: {ride.leadHandle}</span>
                          <span className={isFull ? 'text-error font-bold' : 'text-secondary-fixed'}>
                            {ride.participantCount}/{ride.participantLimit} Riders
                          </span>
                        </div>
                      </div>

                      <div className="p-space-lg pt-0">
                        {isJoined ? (
                          <div className="w-full py-2 rounded-xl bg-secondary-fixed/20 border border-secondary-fixed/30 text-secondary-fixed text-xs font-bold flex items-center justify-center gap-1.5">
                            <span className="material-symbols-outlined text-[16px]">check_circle</span>
                            <span>{ride.isOrganizer ? 'Organized by You' : 'Slot Confirmed'}</span>
                          </div>
                        ) : isFull ? (
                          <button
                            type="button"
                            onClick={() => handleRequestSlot(ride.id)}
                            className="w-full py-2 rounded-xl bg-surface-container hover:bg-surface-container-high text-on-surface text-xs font-semibold transition"
                          >
                            Join Waitlist
                          </button>
                        ) : (
                          <button
                            type="button"
                            onClick={() => handleRequestSlot(ride.id)}
                            className="w-full py-2 rounded-xl bg-primary-container hover:bg-primary-fixed text-on-primary-container text-xs font-bold transition flex items-center justify-center gap-1.5 shadow-sm"
                          >
                            <span className="material-symbols-outlined text-[16px]">how_to_reg</span>
                            <span>Request Pack Slot</span>
                          </button>
                        )}
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>
          )}

          {/* TAB 3: LIVE SQUAD RADAR COCKPIT */}
          {activeTab === 'radar' && (
            <section className="max-w-container-max mx-auto px-gutter-desktop mb-space-4xl">
              <div className="mb-4">
                <span className="font-mono text-xs text-primary-container font-semibold block mb-1">
                  Active Squad Telemetry Stream
                </span>
                <h2 className="font-headline-lg text-xl font-bold text-on-surface">
                  Live Formation Radar
                </h2>
                <p className="font-body-sm text-xs text-on-surface-variant mt-0.5">
                  Synchronized multi-band telemetry mesh monitoring live squad distance, speed, and lean angle.
                </p>
              </div>
              <LivePackRadar initialMode="tactical" />
            </section>
          )}

          {/* Modals */}
          <CreateRideModal
            isOpen={isCreateModalOpen}
            onClose={() => setIsCreateModalOpen(false)}
            onCreateRide={handleCreateRide}
          />

          <EditRideModal
            isOpen={Boolean(editingRide)}
            ride={editingRide}
            onClose={() => setEditingRide(null)}
            onSaveRide={handleSaveEditedRide}
          />

          <DeleteConfirmModal
            isOpen={Boolean(deletingRide)}
            title="Delete Group Ride"
            message={`Are you sure you want to permanently delete "${deletingRide?.title}"? All telemetry sync channels, participant slots, and ride history will be deleted.`}
            confirmText="Delete Ride"
            cancelText="Keep Ride"
            danger={true}
            onClose={() => setDeletingRide(null)}
            onConfirm={handleDeleteRide}
          />

          <DeleteConfirmModal
            isOpen={Boolean(leavingRide)}
            title="Leave Group Ride"
            message={`Are you sure you want to leave the pack for "${leavingRide?.title}"? Your telemetry channel will be disconnected and your slot will be released.`}
            confirmText="Leave Pack"
            cancelText="Stay in Pack"
            danger={false}
            onClose={() => setLeavingRide(null)}
            onConfirm={handleLeaveRide}
          />

          <JoinRideModal
            isOpen={isJoinModalOpen}
            onClose={() => setIsJoinModalOpen(false)}
            onJoinSuccess={handleJoinSuccess}
          />
        </div>
      </div>
    </div>
  );
}