'use client';

import { motion } from 'framer-motion';

interface TrenchLayingAnimationProps {
  className?: string;
  invert?: boolean;
}

/**
 * TrenchLayingAnimation
 * 
 * Visualizes open trench construction (Offene Bauweise / Graben).
 * 1. A trench is cut into the earth line.
 * 2. A thick orange conduit pipe (Leerrohr) is laid into the trench.
 * 3. The trench is backfilled with earth.
 * 
 * This directly ties to E-TIB's core services, showing the process
 * of laying cables rather than just abstract geometry.
 */
export function TrenchLayingAnimation({ className = '', invert = false }: TrenchLayingAnimationProps) {
  const color = invert ? '#0a3d28' : '#0e7a5c';
  const earthColor = invert ? 'rgba(10, 61, 40, 0.4)' : 'rgba(14, 122, 92, 0.4)';
  const pipeColor = '#ff6b00'; 
  
  // The trench profile: flat, 45-deg drop, flat bottom, 45-deg rise, flat
  const trenchPath = "M 50 100 L 300 100 L 350 200 L 850 200 L 900 100 L 1150 100";
  // The dug out area (used for the backfill animation)
  const trenchFill = "M 300 100 L 350 200 L 850 200 L 900 100 Z"; 
  // Length of the polyline is approx 1300
  const pathLen = 1300;

  return (
    <svg 
      viewBox="0 0 1200 300" 
      preserveAspectRatio="none"
      className={`absolute pointer-events-none select-none w-full ${className}`}
      aria-hidden="true"
    >
      {/* Ground surface line (always visible outside the trench) */}
      <line x1="0" y1="100" x2="1200" y2="100" stroke={color} strokeWidth="2" opacity={0.3} />

      {/* Step 1: Trench cutting Left -> Right */}
      <motion.path
        d={trenchPath}
        stroke={color}
        strokeWidth="3"
        fill="none"
        strokeLinejoin="round"
        strokeDasharray={`${pathLen} ${pathLen}`}
        animate={{
          strokeDashoffset: [pathLen, 0, 0, 0, pathLen]
        }}
        transition={{ 
          duration: 10, 
          repeat: Infinity, 
          times: [0, 0.25, 0.8, 0.9, 1], // Cuts quickly (0-2.5s), stays open, closes at 9s
          ease: "linear"
        }}
      />

      {/* Step 2: Pipe Laying (Drops into trench closely behind the cut) */}
      <motion.path
        d={trenchPath}
        stroke={pipeColor}
        strokeWidth="6"
        fill="none"
        strokeLinejoin="round"
        strokeLinecap="round"
        strokeDasharray={`${pathLen} ${pathLen}`}
        animate={{
          strokeDashoffset: [pathLen, pathLen, 0, 0, pathLen],
          opacity: [0, 1, 1, 0, 0]
        }}
        transition={{ 
          duration: 10, 
          repeat: Infinity, 
          times: [0, 0.1, 0.4, 0.8, 1], // Starts unspooling at 1s, finishes laying at 4s
          ease: "linear"
        }}
      />

      {/* Step 3: Sand/Earth backfill (Fades in over the pipe) */}
      <motion.path
        d={trenchFill}
        fill={earthColor}
        initial={{ opacity: 0 }}
        animate={{
          opacity: [0, 0, 1, 1, 0]
        }}
        transition={{ 
          duration: 10, 
          repeat: Infinity, 
          times: [0, 0.4, 0.5, 0.8, 1], // Fades in between 4s and 5s, covers the pipe
          ease: "easeInOut"
        }}
      />
    </svg>
  );
}