/**
 * Truck / ADR options — MapMap's differentiator: lorry dimensions and a
 * dangerous-goods (ADR) declaration that actually shape the route (tunnel
 * categories, low bridges, weight limits), not a post-filter.
 *
 * Demo-friendly: vehicle presets + a hazmat toggle + ADR tunnel category,
 * rather than raw numeric entry.
 */
import React from "react";
import { StyleSheet, Switch, Text, View } from "react-native";
import { Button, Chip, SegmentedControl } from "../../components";
import { radius, spacing, theme, typeScale } from "../../theme";
import type { TruckOptions } from "../../../modules/mapmap-react-native/src/MapmapNav.types";

export type TruckOptionsSheetProps = {
  visible: boolean;
  value: TruckOptions;
  onChange: (next: TruckOptions) => void;
  onClose: () => void;
};

type Preset = { key: string; label: string; dims: TruckOptions };

const PRESETS: Preset[] = [
  { key: "7.5t", label: "7.5t rigid", dims: { heightM: 3.0, weightT: 7.5, lengthM: 7.5, widthM: 2.4 } },
  { key: "18t", label: "18t rigid", dims: { heightM: 3.6, weightT: 18, lengthM: 10, widthM: 2.5 } },
  { key: "44t", label: "44t artic", dims: { heightM: 4.2, weightT: 44, lengthM: 16.5, widthM: 2.55 } },
];

const TUNNEL_OPTIONS: Array<{ value: string; label: string }> = [
  { value: "none", label: "None" },
  { value: "B", label: "B" },
  { value: "C", label: "C" },
  { value: "D", label: "D" },
  { value: "E", label: "E" },
];

function matchesPreset(value: TruckOptions, preset: Preset): boolean {
  return (
    value.heightM === preset.dims.heightM &&
    value.weightT === preset.dims.weightT &&
    value.lengthM === preset.dims.lengthM
  );
}

export function TruckOptionsSheet({
  visible,
  value,
  onChange,
  onClose,
}: TruckOptionsSheetProps): React.JSX.Element | null {
  if (!visible) return null;
  const tunnel = value.tunnelCode ?? "none";
  return (
    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
      <View style={styles.scrim} onTouchEnd={onClose} />
      <View style={styles.sheet}>
        <View style={styles.handle} />
        <Text style={styles.title}>Lorry details</Text>
        <Text style={styles.caption}>
          Dimensions and dangerous-goods rules shape the route — low bridges,
          weight limits and ADR tunnel categories are avoided, not filtered
          out afterwards.
        </Text>

        <Text style={styles.section}>Vehicle</Text>
        <View style={styles.chipRow}>
          {PRESETS.map((p) => (
            <Chip
              key={p.key}
              label={p.label}
              selected={matchesPreset(value, p)}
              onPress={() =>
                onChange({ ...p.dims, hazmat: value.hazmat, tunnelCode: value.tunnelCode })
              }
            />
          ))}
        </View>

        <View style={styles.row}>
          <Text style={styles.rowLabel}>Dangerous goods (ADR)</Text>
          <Switch
            value={!!value.hazmat}
            onValueChange={(hazmat) => onChange({ ...value, hazmat })}
            trackColor={{ false: theme.border, true: theme.signal }}
            thumbColor={theme.surface}
          />
        </View>

        {value.hazmat && (
          <View style={styles.segRow}>
            <Text style={styles.rowLabel}>Tunnel category</Text>
            <SegmentedControl
              options={TUNNEL_OPTIONS}
              value={tunnel}
              onChange={(t) =>
                onChange({ ...value, tunnelCode: t === "none" ? undefined : t })
              }
              testID="truck-tunnel"
            />
          </View>
        )}

        <Button label="Done" variant="primary" onPress={onClose} style={styles.done} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  scrim: { ...StyleSheet.absoluteFill, backgroundColor: "rgba(16,24,42,0.28)" },
  sheet: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: theme.surface,
    borderTopLeftRadius: radius.lg,
    borderTopRightRadius: radius.lg,
    paddingHorizontal: spacing[5],
    paddingTop: spacing[3],
    paddingBottom: spacing[10],
    gap: spacing[2],
  },
  handle: {
    alignSelf: "center",
    width: 40,
    height: 4,
    borderRadius: 2,
    backgroundColor: theme.border,
    marginBottom: spacing[2],
  },
  title: { ...typeScale.title, color: theme.textPrimary },
  caption: { ...typeScale.caption, color: theme.textSecondary, marginBottom: spacing[2] },
  section: { ...typeScale.label, color: theme.textSecondary, marginTop: spacing[1] },
  chipRow: { flexDirection: "row", flexWrap: "wrap", gap: spacing[2] },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingVertical: spacing[2],
  },
  segRow: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    gap: spacing[3],
    paddingVertical: spacing[1],
  },
  rowLabel: { ...typeScale.body, color: theme.textPrimary },
  done: { marginTop: spacing[3] },
});
