import React from 'react';
import { differentialState } from '../../../animations/mechanics';
import type { MachineAnimationModule } from '../../../animations/types';
import {
  MachinePart,
  Shaft,
  ToothedGear,
} from './primitives';
import {
  EngineeringBaseplate,
  PartLabels,
  getPartVisualProps,
} from './proceduralSceneHelpers';
import type {
  ProceduralMachineDefinition,
  ProceduralMachineModule,
  ProceduralMachineSceneProps,
} from './types';

const definition: ProceduralMachineDefinition = {
  id: 'differential-gear',
  slug: 'differential-gear',
  title: 'Differential Gear',
  subtitle: 'Torque split with speed difference during cornering',
  category: 'Gearboxes & Drives',
  difficulty: 'Intermediate',
  summary: 'A bevel-gear differential showing ring input, rotating carrier, spider gears, and unequal axle speeds.',
  description:
    'The differential lets drive wheels rotate at different speeds while still transmitting torque. During straight-line travel both side gears rotate together; during a turn spider gears rotate on their pin and allow one axle to overrun the other.',
  keywords: ['differential', 'bevel gear', 'axle', 'cornering', 'torque split'],
  complexity: 7,
  dateAdded: '2025-02-04',
  typicalRpm: 'Wheel speed 0–1,500 RPM',
  facts: [
    {
      label: 'Purpose',
      value: 'Equal torque, variable speed',
      detail: 'An open differential sends equal torque to both axles while allowing different angular speeds.',
    },
    {
      label: 'Key event',
      value: 'Spider gears spin only with speed difference',
      detail: 'When both wheels rotate equally the spider gears orbit without spinning on their own axes.',
    },
    {
      label: 'Common location',
      value: 'Drive axle final drive',
      detail: 'Used in rear axles, front transaxles, and transfer cases.',
    },
    {
      label: 'Limitation',
      value: 'Low-traction wheel limits torque',
      detail: 'Limited-slip or locking differentials address this open-differential drawback.',
    },
  ],
  parts: [
    {
      id: 'ring-gear',
      name: 'Crown ring gear',
      description: 'Large bevel/crown gear driven by the pinion, rotating the differential carrier.',
      labelPosition: [0.1, 1.25, 0.9],
      material: 'Case-hardened steel',
    },
    {
      id: 'pinion-gear',
      name: 'Drive pinion',
      description: 'Small input gear from the prop shaft that drives the ring gear.',
      labelPosition: [-1.55, -0.72, 0.75],
    },
    {
      id: 'carrier',
      name: 'Differential carrier',
      description: 'Rotating cage that holds the spider pin and carries the ring gear.',
      labelPosition: [0, -1.28, 0.85],
    },
    {
      id: 'left-side-gear',
      name: 'Left side gear',
      description: 'Bevel gear splined to the left axle shaft.',
      labelPosition: [-1.32, 0.45, 0.75],
    },
    {
      id: 'right-side-gear',
      name: 'Right side gear',
      description: 'Bevel gear splined to the right axle shaft.',
      labelPosition: [1.32, 0.45, 0.75],
    },
    {
      id: 'spider-gears',
      name: 'Spider gears',
      description: 'Small bevel gears carried by the rotating cage that mediate axle speed difference.',
      labelPosition: [0.15, 0.72, 0.95],
    },
    {
      id: 'left-axle',
      name: 'Left axle',
      description: 'Output shaft to the left wheel.',
      labelPosition: [-2.2, -0.35, 0.62],
    },
    {
      id: 'right-axle',
      name: 'Right axle',
      description: 'Output shaft to the right wheel.',
      labelPosition: [2.2, -0.35, 0.62],
    },
    {
      id: 'housing',
      name: 'Axle housing',
      description: 'Stationary casing and bearings supporting the final drive.',
      labelPosition: [0, -1.7, 0.5],
      defaultOpacity: 0.34,
    },
  ],
  cameraPresets: [
    { id: 'iso', label: 'Isometric', position: [4.4, 2.5, 4.1], target: [0, 0, 0], fov: 42 },
    { id: 'front', label: 'Axle split', position: [0, 0.8, 5.4], target: [0, 0, 0], fov: 38 },
    { id: 'pinion', label: 'Pinion mesh', position: [-4.4, 1.2, 2.6], target: [-0.2, 0, 0], fov: 42 },
  ],
  tour: {
    id: 'tour-differential-gear',
    machineId: 'differential-gear',
    title: 'Why wheels need a differential',
    description: 'Observe the carrier, side gears, and spider gears during straight-line and cornering states.',
    steps: [
      {
        id: 'final-drive',
        title: 'Pinion drives the ring',
        body: 'Input torque arrives through the pinion and turns the ring gear bolted to the carrier.',
        durationSeconds: 4,
        partIds: ['pinion-gear', 'ring-gear', 'carrier'],
        camera: { position: [-3.8, 1.5, 3.2], target: [0, 0, 0], duration: 1.1 },
        rpm: 180,
      },
      {
        id: 'straight',
        title: 'Straight-line travel',
        body: 'Both side gears rotate together, so the spider gears mainly orbit with the carrier.',
        durationSeconds: 4.5,
        partIds: ['left-side-gear', 'right-side-gear', 'spider-gears'],
        phaseRange: [0.02, 0.24],
        camera: { position: [0, 1.4, 5.1], target: [0, 0, 0], duration: 1.1 },
      },
      {
        id: 'cornering',
        title: 'Cornering speed difference',
        body: 'The spider gears spin on their own axes, allowing the outside axle to rotate faster.',
        durationSeconds: 5,
        partIds: ['spider-gears', 'left-axle', 'right-axle'],
        phaseRange: [0.34, 0.72],
        camera: { position: [3.6, 2.0, 3.3], target: [0, 0, 0], duration: 1.1 },
      },
    ],
  },
  relatedMachineIds: ['planetary-gearbox', 'ball-bearing', 'disc-brake-caliper'],
};

function partProps(
  partId: string,
  props: ProceduralMachineSceneProps,
  explodeDirection: [number, number, number] = [0, 0, 0],
) {
  return {
    partId,
    registerPart: props.registerPart,
    explodeDirection,
    explodedDistance: props.explodedDistance ?? 0,
    onSelectPart: props.onSelectPart,
    onHoverPart: props.onHoverPart,
    ...getPartVisualProps(partId, props),
  };
}

export const differentialGearAnimation: MachineAnimationModule = {
  id: 'differential-cornering-cycle',
  machineId: 'differential-gear',
  label: 'Open differential cornering animation',
  version: '1.0.0',
  defaultRpm: 180,
  minRpm: 15,
  maxRpm: 1200,
  cycleRevolutions: 1,
  cycleSteps: 20,
  loop: true,
  supportsReverse: true,
  reducedMotionStrategy: 'slow',
  update(context) {
    const state = differentialState(context.shaftAngle, context.cycleProgress);

    const ring = context.getPart('ring-gear');
    if (ring) ring.rotation.z = -state.ringAngle;

    const carrier = context.getPart('carrier');
    if (carrier) carrier.rotation.z = -state.carrierAngle;

    const pinion = context.getPart('pinion-gear');
    if (pinion) pinion.rotation.x = state.ringAngle * 3.2;

    const leftGear = context.getPart('left-side-gear');
    if (leftGear) leftGear.rotation.x = -state.leftAxleAngle;

    const rightGear = context.getPart('right-side-gear');
    if (rightGear) rightGear.rotation.x = state.rightAxleAngle;

    const leftAxle = context.getPart('left-axle');
    if (leftAxle) leftAxle.rotation.x = -state.leftAxleAngle;

    const rightAxle = context.getPart('right-axle');
    if (rightAxle) rightAxle.rotation.x = state.rightAxleAngle;

    const spiders = context.getPart('spider-gears');
    if (spiders) {
      spiders.rotation.z = -state.carrierAngle;
      spiders.rotation.x = state.spiderAngle;
    }

    const biasPercent = Math.round(Math.abs(state.corneringBias) * 100);
    context.setPhaseLabel(
      biasPercent < 4
        ? 'Straight-line travel — axles rotate together'
        : `Cornering — outside axle running about ${biasPercent}% faster`,
    );

    context.clearHighlights();
    if (biasPercent < 4) context.highlightParts(['carrier', 'left-side-gear', 'right-side-gear'], 0.7);
    else context.highlightParts(['spider-gears', 'left-axle', 'right-axle'], 0.85);
  },
};

export function DifferentialGearScene(props: ProceduralMachineSceneProps): JSX.Element {
  return (
    <group>
      <EngineeringBaseplate width={5.4} depth={3.2} />

      <MachinePart {...partProps('housing', props, [0, -0.24, -0.08])} opacity={props.partState?.housing?.opacity ?? 0.32}>
        <mesh position={[0, -0.05, -0.1]}>
          <boxGeometry args={[4.7, 1.55, 0.42]} />
          <meshStandardMaterial color="#1f2a3a" transparent opacity={0.33} metalness={0.32} roughness={0.56} />
        </mesh>
      </MachinePart>

      <MachinePart {...partProps('ring-gear', props, [0.12, 0.28, 0.18])}>
        <mesh>
          <torusGeometry args={[0.98, 0.1, 18, 96]} />
          <meshStandardMaterial color="#6f7c90" metalness={0.82} roughness={0.26} />
        </mesh>
      </MachinePart>

      <MachinePart {...partProps('carrier', props, [0, -0.22, 0.2])}>
        <mesh>
          <torusGeometry args={[0.62, 0.055, 14, 72]} />
          <meshStandardMaterial color="#4c8dff" metalness={0.74} roughness={0.32} />
        </mesh>
        <mesh rotation={[0, 0, Math.PI / 2]}>
          <boxGeometry args={[1.45, 0.09, 0.14]} />
          <meshStandardMaterial color="#4c8dff" metalness={0.74} roughness={0.32} />
        </mesh>
      </MachinePart>

      <MachinePart {...partProps('pinion-gear', props, [-0.46, -0.26, 0.2])} position={[-1.42, -0.68, 0]} rotation={[0, Math.PI / 2, 0]}>
        <ToothedGear radius={0.26} teeth={16} thickness={0.24} color="#ffb04c" accentColor="#ffd28e" />
      </MachinePart>

      <MachinePart {...partProps('left-side-gear', props, [-0.42, 0.08, 0.14])} position={[-0.55, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
        <ToothedGear radius={0.32} teeth={18} thickness={0.2} color="#9da8b8" accentColor="#ccd4df" />
      </MachinePart>

      <MachinePart {...partProps('right-side-gear', props, [0.42, 0.08, 0.14])} position={[0.55, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
        <ToothedGear radius={0.32} teeth={18} thickness={0.2} color="#9da8b8" accentColor="#ccd4df" />
      </MachinePart>

      <MachinePart {...partProps('spider-gears', props, [0, 0.34, 0.22])}>
        <group position={[0, 0.38, 0]} rotation={[Math.PI / 2, 0, 0]}>
          <ToothedGear radius={0.2} teeth={14} thickness={0.18} color="#c8b27d" accentColor="#ffe1a4" />
        </group>
        <group position={[0, -0.38, 0]} rotation={[Math.PI / 2, 0, 0]}>
          <ToothedGear radius={0.2} teeth={14} thickness={0.18} color="#c8b27d" accentColor="#ffe1a4" />
        </group>
      </MachinePart>

      <MachinePart {...partProps('left-axle', props, [-0.62, -0.08, 0.06])} position={[-1.62, 0, 0]}>
        <Shaft length={2.15} radius={0.075} axis="x" color="#9faabc" />
      </MachinePart>

      <MachinePart {...partProps('right-axle', props, [0.62, -0.08, 0.06])} position={[1.62, 0, 0]}>
        <Shaft length={2.15} radius={0.075} axis="x" color="#9faabc" />
      </MachinePart>

      <PartLabels parts={definition.parts} visible={props.labelsVisible} />
    </group>
  );
}

export const differentialGear: ProceduralMachineModule = {
  definition,
  animationModule: differentialGearAnimation,
  Scene: DifferentialGearScene,
};