import React from 'react';
import {
  AbsoluteFill,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
  Composition,
  registerRoot
} from 'remotion';

// ==========================================
// LOGO POLISPORTIVA APB IN VETTORIALE (Ricostruito fedelmente)
// ==========================================
const APBLogoSVG: React.FC<{ scale: number }> = ({ scale }: { scale: number }) => {
  return (
    <svg
      viewBox="0 0 120 140"
      style={{
        width: 150,
        height: 175,
        transform: `scale(${scale})`,
        filter: 'drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.2))',
        marginBottom: 30,
      }}
    >
      {/* Profilo dello scudo azzurro esterno */}
      <path
        d="M 10 40 Q 60 20 110 40 Q 110 80 60 130 Q 10 80 10 40 Z"
        fill="#00a3e0" /* Azzurro Polisportiva */
        stroke="#1e293b"
        strokeWidth="4"
      />
      {/* Inserto giallo centrale */}
      <path
        d="M 45 30 L 75 30 L 75 115 Q 60 130 45 115 Z"
        fill="#fdeb00" /* Giallo Polisportiva */
      />
      {/* Lettere "A P B" */}
      <text x="28" y="65" fontFamily="system-ui" fontSize="24" fontWeight="900" fill="#ffffff" textAnchor="middle">A</text>
      <text x="60" y="62" fontFamily="system-ui" fontSize="24" fontWeight="900" fill="#ffffff" textAnchor="middle" stroke="#8c8c8c" strokeWidth="1">P</text>
      <text x="92" y="65" fontFamily="system-ui" fontSize="24" fontWeight="900" fill="#ffffff" textAnchor="middle">B</text>

      {/* Foglia verde stilizzata (Foglia di betulla) */}
      <path
        d="M 60 70 C 45 80, 40 110, 60 120 C 80 110, 75 80, 60 70 Z"
        fill="#109848" /* Verde Foglia */
        stroke="#1e293b"
        strokeWidth="2"
      />
      {/* Venature foglia */}
      <line x1="60" y1="70" x2="60" y2="120" stroke="#1e293b" strokeWidth="2.5" />
      <line x1="60" y1="85" x2="50" y2="80" stroke="#1e293b" strokeWidth="2" />
      <line x1="60" y1="85" x2="70" y2="80" stroke="#1e293b" strokeWidth="2" />
      <line x1="60" y1="98" x2="48" y2="92" stroke="#1e293b" strokeWidth="2" />
      <line x1="60" y1="98" x2="72" y2="92" stroke="#1e293b" strokeWidth="2" />
      <line x1="60" y1="110" x2="52" y2="105" stroke="#1e293b" strokeWidth="2" />
      <line x1="60" y1="110" x2="68" y2="105" stroke="#1e293b" strokeWidth="2" />
    </svg>
  );
};

// ==========================================
// DECORAZIONI FESTA (Bandierine in alto)
// ==========================================
const SagraBunting: React.FC = () => {
  return (
    <svg viewBox="0 0 1920 120" style={{ width: '100%', height: 'auto', position: 'absolute', top: 0, left: 0, zIndex: 8 }}>
      <path d="M 0 20 Q 480 80, 960 30 Q 1440 80, 1920 20" fill="none" stroke="#1e293b" strokeWidth="4" />
      <polygon points="80,24 130,28 105,90" fill="#ef4444" stroke="#1e293b" strokeWidth="3" />
      <polygon points="240,32 290,36 265,95" fill="#facc15" stroke="#1e293b" strokeWidth="3" />
      <polygon points="400,38 450,40 425,100" fill="#3b82f6" stroke="#1e293b" strokeWidth="3" />
      <polygon points="560,40 610,38 585,98" fill="#22c55e" stroke="#1e293b" strokeWidth="3" />
      <polygon points="720,36 770,32 745,92" fill="#ec4899" stroke="#1e293b" strokeWidth="3" />
      <polygon points="1120,30 1170,34 1145,94" fill="#a855f7" stroke="#1e293b" strokeWidth="3" />
      <polygon points="1280,36 1330,40 1305,100" fill="#f97316" stroke="#1e293b" strokeWidth="3" />
      <polygon points="1440,40 1490,38 1465,98" fill="#06b6d4" stroke="#1e293b" strokeWidth="3" />
      <polygon points="1600,34 1650,30 1625,90" fill="#84cc16" stroke="#1e293b" strokeWidth="3" />
      <polygon points="1760,26 1810,22 1785,82" fill="#ef4444" stroke="#1e293b" strokeWidth="3" />
    </svg>
  );
};

// ==========================================
// COMPONENTE SCHERMATA CARTELLETTA GUIDA (Layout A4 adattato a schermo diviso)
// ==========================================
interface PaginaGuidaProps {
  passo: string;
  flussoBadge: string;
  titolo: string;
  testoIstruzione: string;
  icona: string;
  bannerTesto: string;
  colorePrimary: string;
  coloreBgLight: string;
  springVal: number;
}

const PaginaGuida: React.FC<PaginaGuidaProps> = ({
  passo,
  flussoBadge,
  titolo,
  testoIstruzione,
  icona,
  bannerTesto,
  colorePrimary,
  coloreBgLight,
  springVal,
}: PaginaGuidaProps) => {
  return (
    <div
      style={{
        transform: `scale(${springVal})`,
        width: '100%',
        height: '100%',
        backgroundColor: '#ffffff',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        padding: '50px 60px 40px 60px',
        boxSizing: 'border-box',
        position: 'relative',
        borderTop: `36px solid ${colorePrimary}`,
        borderBottom: `36px solid ${colorePrimary}`,
      }}
    >
      {/* Intestazione */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderBottom: `8px solid ${colorePrimary}`,
          paddingBottom: '20px',
          width: '100%',
        }}
      >
        <span
          style={{
            backgroundColor: colorePrimary,
            color: '#ffffff',
            fontSize: '36px',
            fontWeight: 900,
            padding: '12px 40px',
            borderRadius: '16px',
            textTransform: 'uppercase',
            border: '4px solid #1e293b',
          }}
        >
          {passo}
        </span>
        <span
          style={{
            fontSize: '32px',
            fontWeight: 900,
            color: colorePrimary,
            textTransform: 'uppercase',
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
          }}
        >
          {flussoBadge}
        </span>
      </div>

      {/* Titolo Principale */}
      <h3
        style={{
          fontSize: '56px',
          fontWeight: 950,
          color: '#0f172a',
          textTransform: 'uppercase',
          lineHeight: 1.1,
          margin: '30px 0 20px 0',
          textAlign: 'left',
          letterSpacing: '-1px',
        }}
      >
        {titolo}
      </h3>

      {/* Istruzione Centrale */}
      <div
        style={{
          display: 'flex',
          gap: '40px',
          alignItems: 'center',
          margin: '20px 0',
          textAlign: 'left',
          flexGrow: 1,
        }}
      >
        <span style={{ fontSize: '130px', lineHeight: 1 }}>{icona}</span>
        <p
          style={{
            fontSize: '32px',
            lineHeight: 1.45,
            color: '#334155',
            fontWeight: 800,
            margin: 0,
          }}
          dangerouslySetInnerHTML={{ __html: testoIstruzione }}
        />
      </div>

      {/* Banner Inferiore */}
      <div
        style={{
          backgroundColor: coloreBgLight,
          border: `5px solid ${colorePrimary}`,
          borderRadius: '24px',
          padding: '28px 36px',
          fontSize: '26px',
          fontWeight: 900,
          color: colorePrimary,
          textTransform: 'uppercase',
          boxShadow: `0 8px 0px ${colorePrimary}`,
          textAlign: 'left',
          margin: '20px 0 0 0',
          lineHeight: 1.3,
        }}
      >
        {bannerTesto}
      </div>
    </div>
  );
};

// ==========================================
// COMPONENTE PRINCIPALE VIDEO
// ==========================================
export const BivioSagraVideo: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 1. Molle Intro (0-150 frame = 5 secondi)
  const introTitleSpring = spring({
    frame,
    fps,
    config: { damping: 11, mass: 0.8, stiffness: 90 },
  });

  const introSubtitleSpring = spring({
    frame: frame - 20,
    fps,
    config: { damping: 12, mass: 0.8, stiffness: 85 },
  });

  const logoSpring = spring({
    frame: frame - 10,
    fps,
    config: { damping: 11, mass: 0.8, stiffness: 95 },
  });

  // 2. Transizione Split-Screen (Inizia al frame 150)
  const transitionStart = 150;
  const transitionEnd = 170;

  const splitProgress = interpolate(frame, [transitionStart, transitionEnd], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  // 3. Calcolo dell'indice della Tappa corrente
  const tappaDuration = 750; 
  const currentTappaIndex = Math.min(4, Math.floor(Math.max(0, frame - transitionStart) / tappaDuration));

  // Molla per il cambio pagina
  const currentTappaFrame = Math.max(0, frame - transitionStart) % tappaDuration;
  const pageSpring = spring({
    frame: currentTappaFrame,
    fps,
    config: { damping: 12, stiffness: 120 },
  });

  // DATI DEL PERCORSO TRADIZIONALE
  const tappeTradizionali = [
    {
      passo: "Inizio",
      flussoBadge: "🚶 Flusso Tradizionale",
      titolo: "Percorso Tradizionale",
      testoIstruzione: "Se preferisci ordinare e pagare alla cassa in modo classico, segui questo percorso.",
      icona: "🚶‍♂️",
      bannerTesto: "🛒 Cassa classica, pagamento e piatti subito in preparazione.",
      colorePrimary: "#0284c7",
      coloreBgLight: "#f0f9ff",
    },
    {
      passo: "Passo 1",
      flussoBadge: "🚶 Cliente Tradizionale",
      titolo: "Fai la fila e ordina alla cassa",
      testoIstruzione: "Fai la coda alla cassa tradizionale, ordina i piatti al cassiere e paga. Ritira lo scontrino cartaceo con il tuo numero di chiamata.",
      icona: "🚶‍♂️",
      bannerTesto: "⚠️ Gli ordini via smartphone hanno la precedenza di convalida e pagamento alla cassa SMART!",
      colorePrimary: "#0284c7",
      coloreBgLight: "#f0f9ff",
    },
    {
      passo: "Passo 2",
      flussoBadge: "🚶 Cliente Tradizionale",
      titolo: "I tuoi piatti partono subito in preparazione",
      testoIstruzione: "Dopo il pagamento alla cassa, i tuoi piatti sono <strong>SBLOCCATI</strong> in automatico (partono subito in coda in cucina). Se hai chiesto esplicitamente un piatto con \"Servi dopo\" (HOLD), consegna lo scontrino al reparto per farlo iniziare quando preferisci.",
      icona: "🔓",
      bannerTesto: "🚀 Non devi consegnare biglietti per i piatti normali, sono già in preparazione!",
      colorePrimary: "#0284c7",
      coloreBgLight: "#f0f9ff",
    },
    {
      passo: "Passo 3",
      flussoBadge: "🚶 Cliente Tradizionale",
      titolo: "Controlla i monitor",
      testoIstruzione: "Monitora il tabellone degli ordini. Aspetta che il numero stampato sullo scontrino compaia sotto la voce \"PRONTI AL RITIRO\".",
      icona: "📺",
      bannerTesto: "⚠️ Evita di affollare il banco consegna finché il numero non appare a schermo!",
      colorePrimary: "#0284c7",
      coloreBgLight: "#f0f9ff",
    },
    {
      passo: "Passo 4",
      flussoBadge: "🚶 Cliente Tradizionale",
      titolo: "Mostra lo scontrino e ritira",
      testoIstruzione: "Recati al banco del reparto corrispondente (Pizzeria, Cucina, ecc.), consegna lo scontrino cartaceo al personale e ritira i tuoi piatti pronti.",
      icona: "🍽️",
      bannerTesto: "⭐ Grazie per l'attesa e buon appetito!",
      colorePrimary: "#0284c7",
      coloreBgLight: "#f0f9ff",
    }
  ];

  // DATI DEL PERCORSO SMART
  const tappeSmart = [
    {
      passo: "Inizio",
      flussoBadge: "📱 Ordine Smart (Web)",
      titolo: "Percorso Smart",
      testoIstruzione: "Se desideri ordinare direttamente dal tavolo con lo smartphone e pagare velocemente alla Cassa Smart, segui questo percorso.",
      icona: "📱",
      bannerTesto: "🚀 Evita la fila principale, fai l'ordine online e paga alla cassa SMART!",
      colorePrimary: "#10b981",
      coloreBgLight: "#f0fdf4",
    },
    {
      passo: "Passo 1",
      flussoBadge: "📱 Ordine Smart (Web)",
      titolo: "Inquadra il QR Code al tavolo",
      testoIstruzione: "Apri la fotocamera del tuo cellulare, inquadra il QR Code stampato sul tavolo e componi l'ordine direttamente via web.",
      icona: "📸",
      bannerTesto: "⚠️ Per attivare l'ordine, mostralo in Cassa (Corsia Prioritaria) ed effettua il pagamento.",
      colorePrimary: "#10b981",
      coloreBgLight: "#f0fdf4",
    },
    {
      passo: "Passo 2",
      flussoBadge: "📱 Ordine Smart (Web)",
      titolo: "I tuoi piatti sono subito pronti",
      testoIstruzione: "In automatico i tuoi piatti sono <strong>SBLOCCATI</strong> (partono subito). Dal telefono puoi bloccare temporaneamente alcuni piatti per mangiarli caldi in un secondo momento.",
      icona: "🔓",
      bannerTesto: "🚀 Gestisci tu i tempi: sblocca i piatti successivi quando vuoi!",
      colorePrimary: "#10b981",
      coloreBgLight: "#f0fdf4",
    },
    {
      passo: "Passo 3",
      flussoBadge: "📱 Ordine Smart (Web)",
      titolo: "Controlla lo stato dal tavolo",
      testoIstruzione: "Rimani comodamente seduto al tavolo a bere e chiacchierare. Puoi verificare lo stato di preparazione dell'ordine direttamente dal tuo smartphone.",
      icona: "🍻",
      bannerTesto: "📱 Monitora lo stato dei tuoi piatti in tempo reale direttamente dalla pagina web o sui monitor!",
      colorePrimary: "#10b981",
      coloreBgLight: "#f0fdf4",
    },
    {
      passo: "Passo 4",
      flussoBadge: "📱 Ordine Smart (Web)",
      titolo: "Ritira mostrando lo smartphone",
      testoIstruzione: "Appena vedi il tuo ordine nello stato \"Pronto\", recati al banco corrispondente, mostra lo smartphone o lo scontrino cartaceo ricevuto in cassa e ritira i tuoi piatti caldi.",
      icona: "🍽️",
      bannerTesto: "⭐ Grazie per aver ordinato online e buon appetito!",
      colorePrimary: "#10b981",
      coloreBgLight: "#f0fdf4",
    }
  ];

  const currentTradizionale = tappeTradizionali[currentTappaIndex];
  const currentSmart = tappeSmart[currentTappaIndex];

  // Colori conformi al logo APB per la prima slide:
  // - Background: Azzurro Polisportiva (#00a3e0)
  // - Banner: Giallo Polisportiva (#fdeb00) con testo scuro per forte contrasto
  const introBgColor = "#00a3e0"; 

  return (
    <AbsoluteFill style={{ backgroundColor: '#fbbf24', fontFamily: '"Outfit", "Inter", sans-serif', overflow: 'hidden' }}>
      
      {/* ==========================================
          SCENA 1: INTRO (0 - 150 frame = 5 secondi)
          Colori coordinati Polisportiva APB (Azzurro / Giallo / Verde)
         ========================================== */}
      {frame < transitionEnd + 10 && (
        <AbsoluteFill
          style={{
            backgroundColor: introBgColor,
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            opacity: 1 - splitProgress,
            transform: `scale(${1 - splitProgress * 0.15})`,
            zIndex: 10,
          }}
        >
          {/* Bandierine inserite in alto all'interno del blocco intro */}
          <SagraBunting />

          {/* Logo APB ricostruito in vettoriale */}
          <APBLogoSVG scale={logoSpring} />

          {/* Banner con i titoli */}
          <div
            style={{
              background: '#fdeb00', /* Giallo Polisportiva */
              border: '8px solid #1e293b',
              borderRadius: 32,
              padding: '40px 70px',
              textAlign: 'center',
              boxShadow: '0 20px 0 #15803d', /* Ombra verde scura coordinata */
              transform: `scale(${introTitleSpring})`,
            }}
          >
            <h1
              style={{
                fontSize: 80,
                fontWeight: 950,
                color: '#1e293b', /* Testo scuro per contrastare col giallo */
                margin: 0,
                letterSpacing: 2,
                textShadow: '2px 2px 0 #ffffff',
              }}
            >
              IL BIVIO DELLA SAGRA
            </h1>
            
            <div
              style={{
                fontSize: 38,
                fontWeight: 900,
                color: '#109848', /* Verde Polisportiva */
                marginTop: 20,
                transform: `scale(${introSubtitleSpring})`,
                textShadow: '2px 2px 0 #ffffff',
              }}
            >
              Tu che cliente sei?
            </div>
          </div>
        </AbsoluteFill>
      )}

      {/* ==========================================
          SCENE 2: IL CONFRONTO
         ========================================== */}
      {frame >= transitionStart && (
        <AbsoluteFill style={{ display: 'flex', flexDirection: 'row', zIndex: 5 }}>
          
          {/* LATO SINISTRA: FLUSSO TRADIZIONALE */}
          <div
            style={{
              position: 'absolute',
              left: 0,
              width: `${50 * splitProgress}%`,
              height: '100%',
              backgroundColor: '#ffffff',
              borderRight: '8px solid #1e293b',
              boxSizing: 'border-box',
              opacity: splitProgress,
            }}
          >
            <PaginaGuida
              passo={currentTradizionale.passo}
              flussoBadge={currentTradizionale.flussoBadge}
              titolo={currentTradizionale.titolo}
              testoIstruzione={currentTradizionale.testoIstruzione}
              icona={currentTradizionale.icona}
              bannerTesto={currentTradizionale.bannerTesto}
              colorePrimary={currentTradizionale.colorePrimary}
              coloreBgLight={currentTradizionale.coloreBgLight}
              springVal={pageSpring}
            />
          </div>

          {/* LATO DESTRA: FLUSSO SMART */}
          <div
            style={{
              position: 'absolute',
              right: 0,
              width: `${50 * splitProgress}%`,
              height: '100%',
              backgroundColor: '#ffffff',
              boxSizing: 'border-box',
              opacity: splitProgress,
            }}
          >
            <PaginaGuida
              passo={currentSmart.passo}
              flussoBadge={currentSmart.flussoBadge}
              titolo={currentSmart.titolo}
              testoIstruzione={currentSmart.testoIstruzione}
              icona={currentSmart.icona}
              bannerTesto={currentSmart.bannerTesto}
              colorePrimary={currentSmart.colorePrimary}
              coloreBgLight={currentSmart.coloreBgLight}
              springVal={pageSpring}
            />
          </div>

        </AbsoluteFill>
      )}
    </AbsoluteFill>
  );
};

// Registrazione del Root
export const BivioSagra: React.FC = () => {
  return (
    <>
      <Composition
        id="BivioSagra"
        component={BivioSagraVideo}
        durationInFrames={3900}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

registerRoot(BivioSagra);
