import type { CSSProperties, ComponentPropsWithoutRef } from "react";

export interface MaritimeLoaderProps extends Omit<
  ComponentPropsWithoutRef<"span">,
  "children" | "color"
> {
  /** Standalone size. Mantine's Loader size is used automatically when omitted. */
  size?: number | string;
  /** Standalone CSS color. Mantine's Loader color is used automatically when omitted. */
  color?: string;
  /** Accessible status text. */
  label?: string;
}

const styles = `
  .ema-loader {
    position: relative;
    display: inline-block;
    width: calc(var(--ema-size, var(--loader-size, 80px)) * 1.88);
    color: var(--ema-color, var(--loader-color, #075985));
    vertical-align: middle;
  }

  .ema-loader__svg {
    display: block;
    width: 100%;
    height: var(--ema-size, var(--loader-size, 80px));
    overflow: visible;
    filter: drop-shadow(
      0 calc(var(--ema-size, var(--loader-size, 80px)) * 0.035)
      calc(var(--ema-size, var(--loader-size, 80px)) * 0.04)
      rgb(7 39 58 / 18%)
    );
  }

  .ema-loader__ship {
    transform-box: fill-box;
    transform-origin: 50% 82%;
    animation: ema-ship-float 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .ema-loader__shadow {
    fill: currentColor;
    opacity: 0.12;
    transform-box: fill-box;
    transform-origin: center;
    animation: ema-shadow-breathe 2.55s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .ema-loader__deck {
    fill: currentColor;
    opacity: 0.82;
  }

  .ema-loader__superstructure > path:first-child,
  .ema-loader__bridge-top {
    fill: #f8fbfc;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linejoin: round;
  }

  .ema-loader__bridge-top { stroke-width: 2; }

  .ema-loader__window {
    fill: #bfe9ff;
    stroke: currentColor;
    stroke-width: 0.7;
  }

  .ema-loader__cabin-line {
    fill: currentColor;
    opacity: 0.35;
  }

  .ema-loader__funnel > path:first-child {
    fill: #eef3f5;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
  }

  .ema-loader__green { fill: #078930; }
  .ema-loader__yellow { fill: #fcd116; }
  .ema-loader__red { fill: #da121a; }

  .ema-loader__mast {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ema-loader__flag-pole {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
  }

  .ema-loader__flag {
    transform-box: fill-box;
    transform-origin: left center;
    animation: ema-flag-wave 0.95s ease-in-out infinite alternate;
  }

  .ema-loader__hull {
    fill: #f8fbfc;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linejoin: round;
  }

  .ema-loader__lower-hull {
    fill: currentColor;
    opacity: 0.92;
  }

  .ema-loader__waterline {
    fill: none;
    stroke: rgb(255 255 255 / 52%);
    stroke-width: 2.4;
    stroke-linecap: round;
  }

  .ema-loader__bow-highlight {
    fill: none;
    stroke: rgb(255 255 255 / 46%);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ema-loader__portholes {
    fill: #d7f2ff;
    stroke: currentColor;
    stroke-width: 0.8;
  }

  .ema-loader__cargo path {
    fill: none;
    stroke: rgb(255 255 255 / 22%);
    stroke-width: 1;
  }

  .ema-loader__container-dark rect { fill: #3f4a52; }
  .ema-loader__container-muted rect { fill: #7d8991; }
  .ema-loader__container-steel rect { fill: #59656d; }
  .ema-loader__container-light rect { fill: #aab2b8; }
  .ema-loader__container-medium rect { fill: #6c7880; }

  .ema-loader__water-back,
  .ema-loader__water-front,
  .ema-loader__foam {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ema-loader__water-back {
    stroke: currentColor;
    stroke-width: 5;
    opacity: 0.28;
    stroke-dasharray: 58 12;
    animation: ema-water-back 2.8s linear infinite;
  }

  .ema-loader__water-front {
    stroke: currentColor;
    stroke-width: 6;
    opacity: 0.55;
    stroke-dasharray: 70 10;
    animation: ema-water-front 1.9s linear infinite;
  }

  .ema-loader__foam {
    stroke: rgb(255 255 255 / 78%);
    stroke-width: 3;
    stroke-dasharray: 11 7;
    animation: ema-foam-drift 1.65s linear infinite;
  }

  @keyframes ema-ship-float {
    0%, 100% { transform: translateY(1.5px) rotate(-0.65deg); }
    50% { transform: translateY(-3px) rotate(0.65deg); }
  }

  @keyframes ema-shadow-breathe {
    0%, 100% { transform: scaleX(1.02); opacity: 0.14; }
    50% { transform: scaleX(0.9); opacity: 0.08; }
  }

  @keyframes ema-flag-wave {
    from { transform: skewY(-3deg) scaleX(0.94); }
    to { transform: skewY(3deg) scaleX(1.04); }
  }

  @keyframes ema-water-back {
    to { stroke-dashoffset: -140; }
  }

  @keyframes ema-water-front {
    to { stroke-dashoffset: 160; }
  }

  @keyframes ema-foam-drift {
    to { stroke-dashoffset: -36; }
  }

  @media (prefers-reduced-motion: reduce) {
    .ema-loader__ship,
    .ema-loader__shadow,
    .ema-loader__flag,
    .ema-loader__water-back,
    .ema-loader__water-front,
    .ema-loader__foam {
      animation: none;
    }
  }

@media (forced-colors: active) {
     .ema-loader__green,
     .ema-loader__yellow,
     .ema-loader__red,
     .ema-loader__container-dark rect,
     .ema-loader__container-muted rect,
     .ema-loader__container-steel rect,
     .ema-loader__container-light rect,
     .ema-loader__container-medium rect {
       fill: currentColor;
     }
   }

.ema-loader__label {
      display: block;
      text-align: center;
      font-size: 12px;
      line-height: 1.2;
      margin-top: 4px;
      color: currentColor;
    }
 `;

function toCssSize(value: number | string | undefined) {
  return typeof value === "number" ? `${value}px` : value;
}

export function MaritimeLoader({
  size,
  color,
  label = "Loading maritime services",
  className,
  style,
  ...props
}: MaritimeLoaderProps) {
  const cssVariables = {
    ...(size ? { "--ema-size": toCssSize(size) } : {}),
    ...(color ? { "--ema-color": color } : {}),
    ...style,
  } as CSSProperties;

  return (
    <span
      {...props}
      className={["ema-loader", className].filter(Boolean).join(" ")}
      style={cssVariables}
      role="status"
      aria-label={label}
    >
      <style>{styles}</style>

      <svg
        className="ema-loader__svg"
        viewBox="0 0 260 138"
        aria-hidden="true"
        focusable="false"
      >
        <g className="ema-loader__shadow">
          <ellipse cx="132" cy="113" rx="78" ry="7" />
        </g>

        <g className="ema-loader__ship">
          <g className="ema-loader__cargo">
            <g className="ema-loader__container-dark">
              <rect x="60" y="54" width="27" height="17" rx="1.5" />
              <path d="M66 56v13M73 56v13M80 56v13" />
            </g>
            <g className="ema-loader__container-steel">
              <rect x="89" y="54" width="27" height="17" rx="1.5" />
              <path d="M95 56v13M102 56v13M109 56v13" />
            </g>
            <g className="ema-loader__container-light">
              <rect x="118" y="54" width="27" height="17" rx="1.5" />
              <path d="M124 56v13M131 56v13M138 56v13" />
            </g>
            <g className="ema-loader__container-medium">
              <rect x="147" y="54" width="27" height="17" rx="1.5" />
              <path d="M153 56v13M160 56v13M167 56v13" />
            </g>
            <g className="ema-loader__container-dark">
              <rect x="76" y="35" width="27" height="17" rx="1.5" />
              <path d="M82 37v13M89 37v13M96 37v13" />
            </g>
            <g className="ema-loader__container-muted">
              <rect x="105" y="35" width="27" height="17" rx="1.5" />
              <path d="M111 37v13M118 37v13M125 37v13" />
            </g>
            <g className="ema-loader__container-dark">
              <rect x="134" y="35" width="27" height="17" rx="1.5" />
              <path d="M140 37v13M147 37v13M154 37v13" />
            </g>
          </g>

          <path className="ema-loader__deck" d="M42 72H214l-4 6H48z" />

          <g className="ema-loader__superstructure">
            <path d="M174 41h27l10 31h-42z" />
            <path className="ema-loader__bridge-top" d="M178 32h20l5 9h-27z" />
            <rect
              className="ema-loader__window"
              x="179"
              y="45"
              width="7"
              height="7"
              rx="1"
            />
            <rect
              className="ema-loader__window"
              x="188"
              y="45"
              width="7"
              height="7"
              rx="1"
            />
            <rect
              className="ema-loader__window"
              x="197"
              y="45"
              width="7"
              height="7"
              rx="1"
            />
            <rect
              className="ema-loader__cabin-line"
              x="180"
              y="58"
              width="20"
              height="2.5"
              rx="1.25"
            />
          </g>

          <g className="ema-loader__funnel">
            <path d="M166 25h10l3 17h-15z" />
            <path
              className="ema-loader__green"
              d="M166.9 29h9.9l.6 3.5h-11.1z"
            />
            <path
              className="ema-loader__yellow"
              d="M166.2 32.5h11.2l.6 3.5h-12.4z"
            />
            <path
              className="ema-loader__red"
              d="M165.6 36h12.4l.6 3.5h-13.6z"
            />
          </g>

          <g className="ema-loader__mast">
            <path d="M194 31V12M188 20h12M194 13l11 8M194 13l-9 8" />
            <circle cx="194" cy="11" r="2" />
          </g>

          <g>
            <path className="ema-loader__flag-pole" d="M184 20V8" />
            <g className="ema-loader__flag">
              <path
                className="ema-loader__green"
                d="M184 8c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
              />
              <path
                className="ema-loader__yellow"
                d="M184 12c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
              />
              <path
                className="ema-loader__red"
                d="M184 16c7-3 11 3 18 0v4c-7 3-11-3-18 0z"
              />
            </g>
          </g>

          <path
            className="ema-loader__hull"
            d="M28 76h205l-15 18c-8 10-20 15-33 15H66c-13 0-24-5-31-15L23 80c-2-2 0-4 5-4z"
          />
          <path
            className="ema-loader__lower-hull"
            d="M34 88h190l-6 6c-8 10-20 15-33 15H66c-13 0-24-5-31-15z"
          />
          <path className="ema-loader__waterline" d="M36 87h188" />
          <path className="ema-loader__bow-highlight" d="M206 81l15 1-8 9" />

          <g className="ema-loader__portholes">
            <circle cx="66" cy="91" r="2.2" />
            <circle cx="78" cy="91" r="2.2" />
            <circle cx="90" cy="91" r="2.2" />
          </g>
        </g>

        <g className="ema-loader__water-back">
          <path d="M3 112c17-8 30-8 47 0s30 8 47 0 30-8 47 0 30 8 47 0 30-8 47 0 30 8 47 0" />
        </g>
        <g className="ema-loader__water-front">
          <path d="M-8 121c19-9 34-9 53 0s34 9 53 0 34-9 53 0 34 9 53 0 34-9 53 0 34 9 53 0" />
        </g>
        <g className="ema-loader__foam">
          <path d="M29 106c13 4 25 5 38 3" />
          <path d="M200 108c14 1 24-1 35-5" />
        </g>
      </svg>
      {label && <span className="ema-loader__label">{label}</span>}
    </span>
  );
}

export default MaritimeLoader;

// how to use this component.
// <Center style={{ width: "90vw", height: "90vh" }}>
//     <MaritimeLoader
//       size={120}
//       color="#075985"
//       label="Loading Maritime Services..."
//     />
//   </Center>
