// workflow_v2_icons.jsx — drawable SVG icons with stroke-dash reveal support.
// Each icon renders at 80x80 viewBox. The `progress` prop (0..1) controls a
// stroke-dash reveal. Filled details fade in on the tail end of progress.

const V2_TEAL = '#5EEAD4';       // mint accent
const V2_TEAL_DEEP = '#14B8A6';
const V2_LILAC = '#A78BFA';      // secondary glow
const V2_INK = '#E7EDF3';

// helper — path with dash reveal
function DashPath({ d, progress, stroke = V2_TEAL, strokeWidth = 2.2, pathLength = 100, delay = 0, linecap = 'round', linejoin = 'round' }) {
  const local = clamp((progress - delay) / (1 - delay), 0, 1);
  const dash = pathLength;
  const offset = pathLength * (1 - local);
  return (
    <path
      d={d}
      stroke={stroke}
      strokeWidth={strokeWidth}
      strokeLinecap={linecap}
      strokeLinejoin={linejoin}
      fill="none"
      pathLength={pathLength}
      strokeDasharray={`${dash} ${dash}`}
      strokeDashoffset={offset}
    />
  );
}

function FillFade({ children, progress, start = 0.55 }) {
  const t = clamp((progress - start) / (1 - start), 0, 1);
  return <g opacity={Easing.easeOutCubic(t)}>{children}</g>;
}

function IconV2Clipboard({ progress }) {
  return (
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <FillFade progress={progress} start={0.6}>
        <rect x="30" y="12" width="20" height="10" rx="2.5" fill={V2_TEAL} />
      </FillFade>
      <DashPath d="M20 20 L20 68 L60 68 L60 20 L50 20 M30 20 L20 20" progress={progress} />
      <DashPath d="M28 36 L52 36" progress={progress} delay={0.2} />
      <DashPath d="M28 46 L52 46" progress={progress} delay={0.28} />
      <DashPath d="M28 56 L44 56" progress={progress} delay={0.36} />
    </svg>
  );
}

function IconV2Scale({ progress }) {
  return (
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <DashPath d="M40 16 L40 66" progress={progress} />
      <DashPath d="M16 22 L64 22" progress={progress} delay={0.15} />
      <DashPath d="M28 66 L52 66" progress={progress} delay={0.25} />
      {/* Left pan */}
      <DashPath d="M10 30 L28 30 L22 44 Q19 50 16 50 Q13 50 10 44 Z" progress={progress} delay={0.3} />
      <DashPath d="M19 22 L19 30" progress={progress} delay={0.35} />
      {/* Right pan */}
      <DashPath d="M52 30 L70 30 L64 44 Q61 50 58 50 Q55 50 52 44 Z" progress={progress} delay={0.4} />
      <DashPath d="M61 22 L61 30" progress={progress} delay={0.45} />
      <FillFade progress={progress} start={0.7}>
        <circle cx="40" cy="16" r="3" fill={V2_TEAL} />
      </FillFade>
    </svg>
  );
}

function IconV2Send({ progress }) {
  return (
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <DashPath d="M12 42 L66 16 L52 66 L40 46 L12 42 Z" progress={progress} pathLength={200} />
      <DashPath d="M40 46 L66 16" progress={progress} delay={0.4} />
      <FillFade progress={progress} start={0.7}>
        <path d="M12 42 L66 16 L52 66 L40 46 Z" fill={V2_TEAL} opacity="0.22"/>
      </FillFade>
    </svg>
  );
}

function IconV2Bot({ progress }) {
  return (
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <DashPath d="M40 10 L40 20" progress={progress} />
      <DashPath d="M18 20 L62 20 Q68 20 68 26 L68 54 Q68 60 62 60 L18 60 Q12 60 12 54 L12 26 Q12 20 18 20 Z" progress={progress} delay={0.15} pathLength={200} />
      <DashPath d="M8 32 L8 48" progress={progress} delay={0.3} />
      <DashPath d="M72 32 L72 48" progress={progress} delay={0.3} />
      <DashPath d="M26 64 L26 70" progress={progress} delay={0.45} />
      <DashPath d="M54 64 L54 70" progress={progress} delay={0.45} />
      <FillFade progress={progress} start={0.55}>
        <circle cx="40" cy="10" r="2.5" fill={V2_TEAL} />
        <circle cx="30" cy="38" r="3.5" fill={V2_TEAL} />
        <circle cx="50" cy="38" r="3.5" fill={V2_TEAL} />
        <rect x="30" y="48" width="20" height="3" rx="1.5" fill={V2_TEAL} />
      </FillFade>
    </svg>
  );
}

function IconV2Review({ progress }) {
  return (
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <DashPath d="M32 28 m-10 0 a10 10 0 1 1 20 0 a10 10 0 1 1 -20 0" progress={progress} />
      <DashPath d="M14 64 Q14 46 32 46 Q44 46 48 54" progress={progress} delay={0.2} />
      <DashPath d="M56 56 m-12 0 a12 12 0 1 1 24 0 a12 12 0 1 1 -24 0" progress={progress} delay={0.4} />
      <DashPath d="M50 56 L55 61 L64 51" progress={progress} delay={0.65} />
      <FillFade progress={progress} start={0.7}>
        <circle cx="56" cy="56" r="12" fill={V2_TEAL} opacity="0.15"/>
      </FillFade>
    </svg>
  );
}

function IconV2Bars({ progress }) {
  return (
    <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
      <DashPath d="M14 14 L14 66 L66 66" progress={progress} />
      <DashPath d="M24 50 L24 62" progress={progress} delay={0.2} />
      <DashPath d="M38 38 L38 62" progress={progress} delay={0.28} />
      <DashPath d="M52 22 L52 62" progress={progress} delay={0.36} />
      <FillFade progress={progress} start={0.6}>
        <rect x="21" y="50" width="6" height="12" rx="1" fill={V2_TEAL} />
        <rect x="35" y="38" width="6" height="24" rx="1" fill={V2_TEAL} />
        <rect x="49" y="22" width="6" height="40" rx="1" fill={V2_TEAL} />
      </FillFade>
    </svg>
  );
}

Object.assign(window, {
  V2_TEAL, V2_TEAL_DEEP, V2_LILAC, V2_INK,
  IconV2Clipboard, IconV2Scale, IconV2Send, IconV2Bot, IconV2Review, IconV2Bars,
});