Implement displaying routes with dynamic data from OTP

11 files changed, 477 insertions, 46 deletions

diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index 63f4368..f7f0a39 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -70,6 +70,52 @@ export type Position = z.infer<typeof PositionSchema>;
 export type Arrival = z.infer<typeof ArrivalSchema>;
 export type StopArrivalsResponse = z.infer<typeof StopArrivalsResponseSchema>;
 
+// Transit Routes
+export const RouteSchema = z.object({
+  id: z.string(),
+  shortName: z.string().nullable(),
+  longName: z.string().nullable(),
+  color: z.string().nullable(),
+  textColor: z.string().nullable(),
+  sortOrder: z.number().nullable(),
+  agencyName: z.string().nullable().optional(),
+  tripCount: z.number(),
+});
+
+export const PatternStopSchema = z.object({
+  id: z.string(),
+  code: z.string().nullable(),
+  name: z.string(),
+  lat: z.number(),
+  lon: z.number(),
+  scheduledDepartures: z.array(z.number()),
+});
+
+export const PatternSchema = z.object({
+  id: z.string(),
+  name: z.string().nullable(),
+  headsign: z.string().nullable(),
+  directionId: z.number(),
+  code: z.string().nullable(),
+  semanticHash: z.string().nullable(),
+  tripCount: z.number(),
+  geometry: z.array(z.array(z.number())).nullable(),
+  stops: z.array(PatternStopSchema),
+});
+
+export const RouteDetailsSchema = z.object({
+  shortName: z.string().nullable(),
+  longName: z.string().nullable(),
+  color: z.string().nullable(),
+  textColor: z.string().nullable(),
+  patterns: z.array(PatternSchema),
+});
+
+export type Route = z.infer<typeof RouteSchema>;
+export type PatternStop = z.infer<typeof PatternStopSchema>;
+export type Pattern = z.infer<typeof PatternSchema>;
+export type RouteDetails = z.infer<typeof RouteDetailsSchema>;
+
 // Consolidated Circulation (Legacy/Alternative API)
 export const ConsolidatedCirculationSchema = z.object({
   line: z.string(),
diff --git a/src/frontend/app/api/transit.ts b/src/frontend/app/api/transit.ts
new file mode 100644
index 0000000..317271a
--- /dev/null
+++ b/src/frontend/app/api/transit.ts
@@ -0,0 +1,39 @@
+import {
+  RouteDetailsSchema,
+  RouteSchema,
+  type Route,
+  type RouteDetails,
+} from "./schema";
+
+export const fetchRoutes = async (feeds: string[] = []): Promise<Route[]> => {
+  const params = new URLSearchParams();
+  feeds.forEach((f) => params.append("feeds", f));
+
+  const resp = await fetch(`/api/transit/routes?${params.toString()}`, {
+    headers: {
+      Accept: "application/json",
+    },
+  });
+
+  if (!resp.ok) {
+    throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
+  }
+
+  const data = await resp.json();
+  return RouteSchema.array().parse(data);
+};
+
+export const fetchRouteDetails = async (id: string): Promise<RouteDetails> => {
+  const resp = await fetch(`/api/transit/routes/${encodeURIComponent(id)}`, {
+    headers: {
+      Accept: "application/json",
+    },
+  });
+
+  if (!resp.ok) {
+    throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
+  }
+
+  const data = await resp.json();
+  return RouteDetailsSchema.parse(data);
+};
diff --git a/src/frontend/app/components/layout/Header.css b/src/frontend/app/components/layout/Header.css
index 4ff492e..0bba747 100644
--- a/src/frontend/app/components/layout/Header.css
+++ b/src/frontend/app/components/layout/Header.css
@@ -35,6 +35,7 @@
 .app-header__title {
   font-size: 1.25rem;
   font-weight: 600;
+  line-height: 1.05;
   margin: 0;
   color: var(--text-color);
 }
diff --git a/src/frontend/app/components/layout/NavBar.tsx b/src/frontend/app/components/layout/NavBar.tsx
index fab47e0..57e2f9d 100644
--- a/src/frontend/app/components/layout/NavBar.tsx
+++ b/src/frontend/app/components/layout/NavBar.tsx
@@ -70,9 +70,9 @@ export default function NavBar({ orientation = "horizontal" }: NavBarProps) {
       },
     },
     {
-      name: t("navbar.lines", "Líneas"),
+      name: t("navbar.routes", "Rutas"),
       icon: Route,
-      path: "/lines",
+      path: "/routes",
     },
   ];
 
diff --git a/src/frontend/app/i18n/locales/en-GB.json b/src/frontend/app/i18n/locales/en-GB.json
index 91c836a..0286332 100644
--- a/src/frontend/app/i18n/locales/en-GB.json
+++ b/src/frontend/app/i18n/locales/en-GB.json
@@ -150,9 +150,22 @@
     "home": "Home",
     "map": "Map",
     "planner": "Planner",
-    "lines": "Lines",
+    "routes": "Routes",
     "favourites": "Favourites"
   },
+  "routes": {
+    "description": "Below is a list of urban bus routes with their respective paths.",
+    "details": "Route details",
+    "not_found": "Route not found",
+    "direction_outbound": "Outbound",
+    "direction_inbound": "Inbound",
+    "stops": "Stops",
+    "unknown_agency": "Others",
+    "trip_count": "{{count}} trips today",
+    "trip_count_one": "1 trip today",
+    "trip_count_short": "({{count}} trips)",
+    "trip_count_short_one": "(1 trip)"
+  },
   "favourites": {
     "title": "Favourites",
     "empty": "You don't have any favourite stops yet.",
diff --git a/src/frontend/app/i18n/locales/es-ES.json b/src/frontend/app/i18n/locales/es-ES.json
index 526ab2f..9ffc703 100644
--- a/src/frontend/app/i18n/locales/es-ES.json
+++ b/src/frontend/app/i18n/locales/es-ES.json
@@ -150,9 +150,22 @@
     "home": "Inicio",
     "map": "Mapa",
     "planner": "Planificador",
-    "lines": "Líneas",
+    "routes": "Rutas",
     "favourites": "Favoritos"
   },
+  "routes": {
+    "description": "A continuación se muestra una lista de las rutas de autobús urbano con sus respectivos trayectos.",
+    "details": "Detalles de ruta",
+    "not_found": "Ruta no encontrada",
+    "direction_outbound": "Ida",
+    "direction_inbound": "Vuelta",
+    "stops": "Paradas",
+    "unknown_agency": "Otros",
+    "trip_count": "{{count}} viajes hoy",
+    "trip_count_one": "1 viaje hoy",
+    "trip_count_short": "({{count}} viajes)",
+    "trip_count_short_one": "(1 viaje)"
+  },
   "favourites": {
     "title": "Favoritos",
     "empty": "Aún no tienes paradas favoritas.",
diff --git a/src/frontend/app/i18n/locales/gl-ES.json b/src/frontend/app/i18n/locales/gl-ES.json
index eec7ab9..e86088e 100644
--- a/src/frontend/app/i18n/locales/gl-ES.json
+++ b/src/frontend/app/i18n/locales/gl-ES.json
@@ -150,9 +150,22 @@
     "home": "Inicio",
     "map": "Mapa",
     "planner": "Planificador",
-    "lines": "Liñas",
+    "routes": "Rutas",
     "favourites": "Favoritos"
   },
+  "routes": {
+    "description": "A continuación móstrase unha lista das rutas de autobús urbano cos seus respectivos traxectos.",
+    "details": "Detalles de ruta",
+    "not_found": "Ruta non atopada",
+    "direction_outbound": "Ida",
+    "direction_inbound": "Volta",
+    "stops": "Paradas",
+    "unknown_agency": "Outros",
+    "trip_count": "{{count}} viaxes hoxe",
+    "trip_count_one": "1 viaxe hoxe",
+    "trip_count_short": "({{count}} viaxes)",
+    "trip_count_short_one": "(1 viaxe)"
+  },
   "favourites": {
     "title": "Favoritos",
     "empty": "Aínda non tes paradas favoritas.",
diff --git a/src/frontend/app/routes.tsx b/src/frontend/app/routes.tsx
index 052eb83..8e98734 100644
--- a/src/frontend/app/routes.tsx
+++ b/src/frontend/app/routes.tsx
@@ -3,7 +3,8 @@ import { type RouteConfig, index, route } from "@react-router/dev/routes";
 export default [
   index("routes/home.tsx"),
   route("/map", "routes/map.tsx"),
-  route("/lines", "routes/lines.tsx"),
+  route("/routes", "routes/routes.tsx"),
+  route("/routes/:id", "routes/routes-$id.tsx"),
   route("/stops", "routes/stops.tsx"),
   route("/stops/:id", "routes/stops-$id.tsx"),
   route("/settings", "routes/settings.tsx"),
diff --git a/src/frontend/app/routes/lines.tsx b/src/frontend/app/routes/lines.tsx
deleted file mode 100644
index 900c543..0000000
--- a/src/frontend/app/routes/lines.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useTranslation } from "react-i18next";
-import LineIcon from "~/components/LineIcon";
-import { usePageTitle } from "~/contexts/PageTitleContext";
-import { VIGO_LINES } from "~/data/LinesData";
-import "../tailwind-full.css";
-
-export default function LinesPage() {
-  const { t } = useTranslation();
-  usePageTitle(t("navbar.lines", "Líneas"));
-
-  return (
-    <div className="container mx-auto px-4 py-6">
-      <p className="mb-6 text-gray-700 dark:text-gray-300">
-        {t(
-          "lines.description",
-          "A continuación se muestra una lista de las líneas de autobús urbano de Vigo con sus respectivas rutas y enlaces a los horarios oficiales."
-        )}
-      </p>
-
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-        {VIGO_LINES.map((line) => (
-          <a
-            key={line.lineNumber}
-            href={line.scheduleUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-3 p-4 bg-surface rounded-lg shadow hover:shadow-lg transition-shadow border border-border"
-          >
-            <LineIcon line={line.lineNumber} mode="rounded" />
-            <div className="flex-1 min-w-0">
-              <p className="text-sm md:text-md font-semibold text-text">
-                {line.routeName}
-              </p>
-            </div>
-          </a>
-        ))}
-      </div>
-    </div>
-  );
-}
diff --git a/src/frontend/app/routes/routes-$id.tsx b/src/frontend/app/routes/routes-$id.tsx
new file mode 100644
index 0000000..8dd7e1c
--- /dev/null
+++ b/src/frontend/app/routes/routes-$id.tsx
@@ -0,0 +1,269 @@
+import { useQuery } from "@tanstack/react-query";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, Source, type MapRef } from "react-map-gl/maplibre";
+import { useParams } from "react-router";
+import { fetchRouteDetails } from "~/api/transit";
+import { AppMap } from "~/components/shared/AppMap";
+import { usePageTitle } from "~/contexts/PageTitleContext";
+import "../tailwind-full.css";
+
+export default function RouteDetailsPage() {
+  const { id } = useParams();
+  const { t } = useTranslation();
+  const [selectedPatternId, setSelectedPatternId] = useState<string | null>(
+    null
+  );
+  const [selectedStopId, setSelectedStopId] = useState<string | null>(null);
+  const mapRef = useRef<MapRef>(null);
+  const stopRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+  const { data: route, isLoading } = useQuery({
+    queryKey: ["route", id],
+    queryFn: () => fetchRouteDetails(id!),
+    enabled: !!id,
+  });
+
+  usePageTitle(
+    route?.shortName
+      ? `${route.shortName} - ${route.longName}`
+      : t("routes.details", "Detalles de ruta")
+  );
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (!route) {
+    return (
+      <div className="p-4">{t("routes.not_found", "Línea no encontrada")}</div>
+    );
+  }
+
+  const activePatterns = route.patterns.filter((p) => p.tripCount > 0);
+
+  const patternsByDirection = activePatterns.reduce(
+    (acc, pattern) => {
+      const dir = pattern.directionId;
+      if (!acc[dir]) acc[dir] = [];
+      acc[dir].push(pattern);
+      return acc;
+    },
+    {} as Record<number, typeof route.patterns>
+  );
+
+  const selectedPattern =
+    activePatterns.find((p) => p.id === selectedPatternId) || activePatterns[0];
+
+  const handleStopClick = (
+    stopId: string,
+    lat: number,
+    lon: number,
+    scroll = true
+  ) => {
+    setSelectedStopId(stopId);
+    mapRef.current?.flyTo({
+      center: [lon, lat],
+      zoom: 16,
+      duration: 1000,
+    });
+
+    if (scroll) {
+      stopRefs.current[stopId]?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  };
+
+  const geojson: GeoJSON.FeatureCollection = {
+    type: "FeatureCollection",
+    features: selectedPattern?.geometry
+      ? [
+          {
+            type: "Feature",
+            geometry: {
+              type: "LineString",
+              coordinates: selectedPattern.geometry,
+            },
+            properties: {},
+          },
+        ]
+      : [],
+  };
+
+  const stopsGeojson: GeoJSON.FeatureCollection = {
+    type: "FeatureCollection",
+    features:
+      selectedPattern?.stops.map((stop) => ({
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [stop.lon, stop.lat],
+        },
+        properties: {
+          id: stop.id,
+          name: stop.name,
+          code: stop.code,
+          lat: stop.lat,
+          lon: stop.lon,
+        },
+      })) || [],
+  };
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="p-4 bg-surface border-b border-border">
+        <select
+          className="w-full p-2 rounded-lg border border-border bg-background text-text focus:ring-2 focus:ring-primary outline-none"
+          value={selectedPattern?.id}
+          onChange={(e) => {
+            setSelectedPatternId(e.target.value);
+            setSelectedStopId(null);
+          }}
+        >
+          {Object.entries(patternsByDirection).map(([dir, patterns]) => (
+            <optgroup
+              key={dir}
+              label={
+                dir === "0"
+                  ? t("routes.direction_outbound", "Ida")
+                  : t("routes.direction_inbound", "Vuelta")
+              }
+            >
+              {patterns.map((pattern) => (
+                <option key={pattern.id} value={pattern.id}>
+                  {pattern.code ? `${pattern.code.slice(-2)}: ` : ""}
+                  {pattern.headsign || pattern.name}{" "}
+                  {t("routes.trip_count_short", { count: pattern.tripCount })}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex-1 flex flex-col relative overflow-hidden">
+          <div className="h-1/2 relative">
+            <AppMap
+              ref={mapRef}
+              initialViewState={
+                selectedPattern?.stops[0]
+                  ? {
+                      latitude: selectedPattern.stops[0].lat,
+                      longitude: selectedPattern.stops[0].lon,
+                      zoom: 13,
+                    }
+                  : undefined
+              }
+              interactiveLayerIds={["stop-circles"]}
+              onClick={(e) => {
+                const feature = e.features?.[0];
+                if (feature && feature.layer.id === "stop-circles") {
+                  const { id, lat, lon } = feature.properties;
+                  handleStopClick(id, lat, lon, true);
+                }
+              }}
+            >
+              {selectedPattern?.geometry && (
+                <Source type="geojson" data={geojson}>
+                  <Layer
+                    id="route-line"
+                    type="line"
+                    paint={{
+                      "line-color": route.color ? `#${route.color}` : "#3b82f6",
+                      "line-width": 4,
+                      "line-opacity": 0.8,
+                    }}
+                  />
+                </Source>
+              )}
+              <Source type="geojson" data={stopsGeojson}>
+                <Layer
+                  id="stop-circles"
+                  type="circle"
+                  paint={{
+                    "circle-radius": 6,
+                    "circle-color": "#ffffff",
+                    "circle-stroke-width": 2,
+                    "circle-stroke-color": route.color
+                      ? `#${route.color}`
+                      : "#3b82f6",
+                  }}
+                />
+              </Source>
+            </AppMap>
+          </div>
+
+          <div className="flex-1 overflow-y-auto p-4 bg-background">
+            <h3 className="text-lg font-bold mb-4">
+              {t("routes.stops", "Paradas")}
+            </h3>
+            <div className="space-y-4">
+              {selectedPattern?.stops.map((stop, idx) => (
+                <div
+                  key={`${stop.id}-${idx}`}
+                  ref={(el) => {
+                    stopRefs.current[stop.id] = el;
+                  }}
+                  onClick={() =>
+                    handleStopClick(stop.id, stop.lat, stop.lon, false)
+                  }
+                  className={`flex items-start gap-4 p-3 rounded-lg border transition-colors cursor-pointer ${
+                    selectedStopId === stop.id
+                      ? "bg-primary/5 border-primary"
+                      : "bg-surface border-border hover:border-primary/50"
+                  }`}
+                >
+                  <div className="flex flex-col items-center">
+                    <div
+                      className={`w-3 h-3 rounded-full mt-1.5 ${selectedStopId === stop.id ? "bg-primary" : "bg-gray-400"}`}
+                    ></div>
+                    {idx < selectedPattern.stops.length - 1 && (
+                      <div className="w-0.5 h-full bg-border -mb-3 mt-1"></div>
+                    )}
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-semibold text-text">
+                      {stop.name}
+                      {stop.code && (
+                        <span className="text-xs font-normal text-gray-500 ml-2">
+                          {stop.code}
+                        </span>
+                      )}
+                    </p>
+
+                    {selectedStopId === stop.id &&
+                      stop.scheduledDepartures.length > 0 && (
+                        <div className="mt-2 flex flex-wrap gap-1">
+                          {stop.scheduledDepartures.map((dep, i) => (
+                            <span
+                              key={i}
+                              className="text-[10px] px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded"
+                            >
+                              {Math.floor(dep / 3600)
+                                .toString()
+                                .padStart(2, "0")}
+                              :
+                              {Math.floor((dep % 3600) / 60)
+                                .toString()
+                                .padStart(2, "0")}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/frontend/app/routes/routes.tsx b/src/frontend/app/routes/routes.tsx
new file mode 100644
index 0000000..2c11168
--- /dev/null
+++ b/src/frontend/app/routes/routes.tsx
@@ -0,0 +1,76 @@
+import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import { fetchRoutes } from "~/api/transit";
+import LineIcon from "~/components/LineIcon";
+import { usePageTitle } from "~/contexts/PageTitleContext";
+import "../tailwind-full.css";
+
+export default function RoutesPage() {
+  const { t } = useTranslation();
+  usePageTitle(t("navbar.routes", "Rutas"));
+
+  const { data: routes, isLoading } = useQuery({
+    queryKey: ["routes"],
+    queryFn: () => fetchRoutes(["santiago", "vitrasa", "coruna", "feve"]),
+  });
+
+  const routesByAgency = routes?.reduce(
+    (acc, route) => {
+      const agency = route.agencyName || t("routes.unknown_agency", "Otros");
+      if (!acc[agency]) acc[agency] = [];
+      acc[agency].push(route);
+      return acc;
+    },
+    {} as Record<string, typeof routes>
+  );
+
+  return (
+    <div className="container mx-auto px-4 py-6">
+      <p className="mb-6 text-gray-700 dark:text-gray-300">
+        {t(
+          "routes.description",
+          "A continuación se muestra una lista de las rutas de autobús urbano con sus respectivos trayectos."
+        )}
+      </p>
+
+      {isLoading && (
+        <div className="flex justify-center py-12">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+        </div>
+      )}
+
+      <div className="space-y-8">
+        {routesByAgency &&
+          Object.entries(routesByAgency).map(([agency, agencyRoutes]) => (
+            <div key={agency}>
+              <h2 className="text-xl font-bold text-text mb-4 border-b border-border pb-2">
+                {agency}
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {agencyRoutes.map((route) => (
+                  <Link
+                    key={route.id}
+                    to={`/routes/${route.id}`}
+                    className="flex items-center gap-3 p-4 bg-surface rounded-lg shadow hover:shadow-lg transition-shadow border border-border"
+                  >
+                    <LineIcon
+                      line={route.shortName ?? "?"}
+                      mode="pill"
+                      colour={route.color ?? undefined}
+                      textColour={route.textColor ?? undefined}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm md:text-md font-semibold text-text">
+                        {route.longName}
+                      </p>
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}