'use client';

/**
 * CMS Vimeo Video — mirrors cms-element-vimeo-video.html.twig
 *
 * Supported config fields (Shopware admin "Element settings"):
 *   videoID          : Vimeo video ID
 *   videoTitle       : accessible iframe title
 *   autoplay         : boolean — play automatically
 *   loop             : boolean — play in a loop
 *   controls         : boolean — show player controls (default true)
 *   doNotTrack       : boolean — Advanced privacy mode (dnt=1)
 *   color            : hex string — player controls colour (without #)
 *   byLine           : boolean — show video creator (default true)
 *   portrait         : boolean — show picture of the creator (default true)
 *   title            : boolean — show video title (default true)
 *   needsConfirmation: boolean — show consent overlay before loading
 */

import { useState } from 'react';
import type { CmsSlot } from '@/components/cms/types';

export default function CmsElementVimeoVideo({ slot }: { slot: CmsSlot }) {
  const cfg = slot.config ?? {};

  const videoId       = cfg.videoID?.value      ?? slot.data?.videoId ?? '';
  const videoTitle    = cfg.videoTitle?.value   ?? 'Vimeo video';
  const autoplay      = cfg.autoplay?.value      ?? false;
  const loop          = cfg.loop?.value          ?? false;
  const showControls  = cfg.controls?.value      ?? true;
  const doNotTrack    = cfg.doNotTrack?.value    ?? false;
  const color         = (cfg.color?.value ?? '').replace('#', '');
  const showByLine    = cfg.byLine?.value        ?? true;
  const showPortrait  = cfg.portrait?.value      ?? true;
  const showTitle     = cfg.title?.value         ?? true;
  const needsConfirm  = cfg.needsConfirmation?.value ?? false;

  const [confirmed, setConfirmed] = useState(!needsConfirm);

  if (!videoId) return null;

  // ── Build embed URL ────────────────────────────────────────────────────────
  const params = new URLSearchParams({
    keyboard: 'false',
    fullscreen: 'true',
  });

  if (color)        params.set('color',    color);
  if (doNotTrack)   params.set('dnt',      'true');
  if (loop)         params.set('loop',     'true');
  if (autoplay)     params.set('autoplay', 'true');
  if (!showControls) params.set('controls', 'false');
  if (!showByLine)   params.set('byline',   'false');
  if (!showTitle)    params.set('title',    'false');
  if (!showPortrait) params.set('portrait', 'false');

  const src = `https://player.vimeo.com/video/${videoId}?${params.toString()}`;

  // ── Consent overlay ────────────────────────────────────────────────────────
  if (!confirmed) {
    const previewMedia = slot.data?.media;
    return (
      <div className="relative w-full aspect-video rounded-xl overflow-hidden bg-surface-900">
        {previewMedia?.url && (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={previewMedia.url}
            alt=""
            className="absolute inset-0 w-full h-full object-cover opacity-40"
          />
        )}

        <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-6 text-center bg-black/60 rounded-xl">
          {/* Vimeo logo */}
          <svg className="w-14 h-14 text-white/70" viewBox="0 0 24 24" fill="currentColor">
            <path d="M23.977 6.416c-.105 2.338-1.739 5.543-4.894 9.609-3.268 4.247-6.026 6.37-8.29 6.37-1.409 0-2.578-1.294-3.553-3.881L5.322 11.4C4.603 8.813 3.834 7.518 3.01 7.518c-.179 0-.806.378-1.881 1.132L0 7.197a315.065 315.065 0 003.501-3.128C5.08 2.701 6.266 1.984 7.055 1.91c1.867-.18 3.016 1.1 3.447 3.838.465 2.953.789 4.789.971 5.507.539 2.45 1.131 3.674 1.776 3.674.502 0 1.256-.796 2.265-2.385 1.004-1.589 1.54-2.797 1.612-3.628.144-1.371-.395-2.061-1.614-2.061-.574 0-1.167.121-1.777.391 1.186-3.868 3.434-5.757 6.762-5.637 2.473.06 3.628 1.664 3.48 4.807z"/>
          </svg>

          <p className="text-white text-sm max-w-xs">
            This video is hosted by Vimeo. By loading it you agree to Vimeo&apos;s privacy policy.
          </p>

          <button
            onClick={() => setConfirmed(true)}
            className="px-6 py-2 bg-white text-surface-900 font-semibold rounded-lg hover:bg-surface-100 transition"
          >
            Load video
          </button>
        </div>
      </div>
    );
  }

  // ── Iframe ─────────────────────────────────────────────────────────────────
  return (
    <div className="relative w-full aspect-video rounded-xl overflow-hidden">
      <iframe
        src={src}
        title={videoTitle}
        allow="autoplay; fullscreen; picture-in-picture"
        allowFullScreen
        className="absolute inset-0 w-full h-full"
      />
    </div>
  );
}