/**
 * Il telefono passa di mano in mano. Per ogni giocatore tre momenti:
 * l'avviso («non farti vedere»), il ruolo segreto, la conferma. Fra un giocatore
 * e l'altro un conto alla rovescia di 3 secondi; dopo l'ultimo parte il timer.
 */
import { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Image } from 'expo-image';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

import { ruoloDi } from '../../gioco.ts';
import { FOTO_LUOGHI, FOTO_SPIA } from '../../immagini.ts';
import { suona } from '../../suoni.ts';
import { nomeLuogo, nomeRuolo } from '../../testi/index.ts';
import { COLORI, Pulsante, Riquadro, Sfondo, testi, useBloccaIndietro } from '../componenti.tsx';
import type { Schermate } from '../navigazione.ts';
import { useStato } from '../stato.tsx';

type Fase = 'avviso' | 'ruolo' | 'conferma';

export function Giro({ navigation }: NativeStackScreenProps<Schermate, 'Giro'>) {
  const { t, lingua, imp, partita } = useStato();
  const [giocatore, setGiocatore] = useState(0);
  const [fase, setFase] = useState<Fase>('avviso');
  const [conto, setConto] = useState<number | null>(null);
  useBloccaIndietro();

  useEffect(() => {
    if (conto === null) return;
    const id = setTimeout(() => {
      if (conto > 1) {
        suona('tick');
        setConto(conto - 1);
      } else {
        setConto(null);
        setGiocatore((g) => g + 1);
        setFase('avviso');
      }
    }, 1000);
    return () => clearTimeout(id);
  }, [conto]);

  if (!partita) return null;

  if (fase === 'avviso') {
    return (
      <Sfondo>
        <View style={st.centro}>
          <Riquadro>
            <Text style={testi.desc}>{t('avviso.desc')}</Text>
          </Riquadro>
        </View>
        <Pulsante titolo={t('avviso.mostra')} suono="page" onPress={() => setFase('ruolo')} />
      </Sfondo>
    );
  }

  if (fase === 'ruolo') {
    const r = ruoloDi(partita, giocatore);
    const spia = r === 'spia';
    return (
      <Sfondo>
        <Riquadro>
          <Text style={testi.etichetta}>{t('ruolo.luogo')}</Text>
          <Text style={testi.grande}>{spia ? '? ? ? ?' : nomeLuogo(lingua, partita.luogo)}</Text>
        </Riquadro>
        <View style={st.centro}>
          <Image
            source={spia ? FOTO_SPIA[imp.stile] : FOTO_LUOGHI[imp.stile][partita.luogo]}
            style={st.foto}
            contentFit="cover"
          />
        </View>
        <Riquadro>
          <Text style={testi.etichetta}>{t('ruolo.ruolo')}</Text>
          <Text style={testi.grande}>{spia ? t('ruolo.spia') : nomeRuolo(lingua, partita.luogo, r)}</Text>
        </Riquadro>
        <Pulsante titolo={t('ruolo.ricevuto')} onPress={() => setFase('conferma')} />
      </Sfondo>
    );
  }

  const fatto = () => {
    if (giocatore < partita.giocatori - 1) setConto(3);
    else navigation.replace('Timer');
  };
  return (
    <Sfondo>
      <View style={st.centro}>
        <Riquadro>
          <Text style={testi.desc}>{t('conferma.desc')}</Text>
        </Riquadro>
      </View>
      <Pulsante
        titolo={conto === null ? t('conferma.fatto') : `${conto}...`}
        suono={null}
        disattivo={conto !== null}
        onPress={fatto}
      />
    </Sfondo>
  );
}

const st = StyleSheet.create({
  centro: { flex: 1, justifyContent: 'center' },
  foto: { width: '100%', aspectRatio: 4 / 3, borderRadius: 5, borderWidth: 2, borderColor: COLORI.grigio },
});