Refactor: Implement site-wide unit conversion

src/components/rides/CoasterStatistics.tsx

@@ -1,16 +1,44 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { RideCoasterStat } from "@/types/database";
 import { TrendingUp } from "lucide-react";
+import { useUnitPreferences } from "@/hooks/useUnitPreferences";
+import { convertValueFromMetric, detectUnitType, getMetricUnit } from "@/lib/units";
 
 interface CoasterStatisticsProps {
   statistics?: RideCoasterStat[];
 }
 
 export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
+  const { preferences } = useUnitPreferences();
+  
   if (!statistics || statistics.length === 0) {
     return null;
   }
 
+  const getDisplayValue = (stat: RideCoasterStat) => {
+    if (!stat.unit) {
+      return stat.stat_value.toLocaleString();
+    }
+
+    const unitType = detectUnitType(stat.unit);
+    if (unitType === 'unknown') {
+      return `${stat.stat_value.toLocaleString()} ${stat.unit}`;
+    }
+
+    const metricUnit = getMetricUnit(stat.unit);
+    const convertedValue = convertValueFromMetric(
+      stat.stat_value,
+      stat.unit,
+      metricUnit
+    );
+    
+    const targetUnit = preferences.measurement_system === 'metric' 
+      ? metricUnit 
+      : stat.unit;
+      
+    return `${convertedValue.toLocaleString()} ${targetUnit}`;
+  };
+
   // Group stats by category
   const groupedStats = statistics.reduce((acc, stat) => {
     const category = stat.category || 'General';
@@ -53,8 +81,7 @@ export const CoasterStatistics = ({ statistics }: CoasterStatisticsProps) => {
                         )}
                       </div>
                       <span className="text-sm font-semibold">
-                        {stat.stat_value.toLocaleString()}
-                        {stat.unit && ` ${stat.unit}`}
+                        {getDisplayValue(stat)}
                       </span>
                     </div>
                   ))}