/**
 * Il foglio dove si incolla un elenco di ingredienti.
 *
 * Prima il riquadro dell'incolla stava sempre in mezzo alla pagina, 140 punti,
 * anche quando si correggeva una ricetta finita, e il suo bottone spento era
 * grigio come un'etichetta. Adesso compare solo quando lo si chiede («Incolla
 * un elenco»), come Paolo ha chiesto il 28/09: si incolla, si conferma, il
 * foglio si chiude e gli ingredienti sono nella lista.
 *
 * Mentre si incolla, sotto il riquadro si vede cosa ne uscirà: quanti
 * ingredienti, quante sezioni, quanti da controllare. Il bottone dice il
 * numero, «Aggiungi 13 ingredienti», ed è spento finché non ne esce almeno
 * uno. I numeri li conta anteprimaIncolla con lo stesso lettore che poi
 * scrive le righe, quindi dicono il vero.
 *
 * Chiuderlo col velo o col tasto indietro, con degli ingredienti dentro, chiede
 * se aggiungerli (chiusuraIncolla): è lavoro dell'utente. «Annulla» invece è
 * una scelta esplicita e chiude senza chiedere.
 *
 * I colori non si scrivono qui: vengono da tema.ts, come nelle altre schermate.
 */
import { useMemo, useRef, useState } from 'react';
import { Alert, StyleSheet, Text, TextInput, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import type { Lingua } from '../../domain/lingua/index.ts';
import { useApp } from '../contesto.ts';
import type { Bozza } from '../bozza.ts';
import { anteprimaIncolla, bottoneIncolla, chiusuraIncolla, esitoIncolla } from '../logica-modifica.ts';
import type { Colori } from '../tema.ts';
import { RAGGIO, SPAZIO, TESTO, useColori } from '../tema.ts';
import { BottonePrincipale } from './Bottoni.tsx';
import { Foglio } from './Foglio.tsx';
import { TestaFoglio } from './TestaFoglio.tsx';

export type PropsFoglioIncolla = {
  visibile: boolean;
  bozza: Bozza;
  lingua: Lingua;
  /**
   * Il testo da leggere, non la bozza già letta: chi lo riceve lo applica alla
   * bozza di quel momento. Con la domanda aperta la bozza può cambiare (una
   * foto che finisce di comprimersi), e una bozza letta prima la riscriverebbe.
   */
  onAggiungi: (testo: string) => void;
  onChiudi: () => void;
};

export function FoglioIncolla({ visibile, bozza, lingua, onAggiungi, onChiudi }: PropsFoglioIncolla) {
  const { testo } = useApp();
  const colori = useColori();
  const stili = useMemo(() => creaStili(colori), [colori]);
  const sotto = useSafeAreaInsets().bottom;
  const [incollato, setIncollato] = useState('');
  const riquadro = useRef<TextInput>(null);

  // Ogni apertura riparte da capo già nel primo disegno (stato derivato), non
  // un attimo dopo come farebbe un effetto.
  const [apertoPrima, setApertoPrima] = useState(visibile);
  if (visibile !== apertoPrima) {
    setApertoPrima(visibile);
    if (visibile) setIncollato('');
  }

  const conti = anteprimaIncolla(incollato);
  const bottone = bottoneIncolla(conti.ingredienti);
  const nienteDaLeggere = esitoIncolla(bozza, incollato, lingua).niente;

  const aggiungi = () => {
    const esito = esitoIncolla(bozza, incollato, lingua);
    if (!esito.letto) return;
    onAggiungi(incollato);
    onChiudi();
  };

  // Il velo o il tasto indietro: se si perderebbe qualcosa, si chiede.
  const chiudiChiedendo = () => {
    if (chiusuraIncolla(incollato) === 'chiudi') {
      onChiudi();
      return;
    }
    Alert.alert(testo('incolla.chiudi.titolo'), testo('incolla.chiudi.messaggio'), [
      { text: testo('incolla.chiudi.lascia'), style: 'destructive', onPress: onChiudi },
      { text: testo('incolla.chiudi.aggiungi'), style: 'default', isPreferred: true, onPress: aggiungi },
    ]);
  };

  const parti: string[] = [];
  if (conti.ingredienti > 0) {
    parti.push(
      conti.ingredienti === 1
        ? testo('incolla.conta.ingredienti.uno')
        : testo('incolla.conta.ingredienti.molti', { conteggio: String(conti.ingredienti) }),
    );
    if (conti.sezioni > 0) {
      parti.push(
        conti.sezioni === 1
          ? testo('incolla.conta.sezioni.una')
          : testo('incolla.conta.sezioni.molte', { conteggio: String(conti.sezioni) }),
      );
    }
  }

  return (
    <Foglio visibile={visibile} onChiudi={chiudiChiedendo} evitaTastiera onAperto={() => riquadro.current?.focus()}>
      <View style={[stili.foglio, { paddingBottom: SPAZIO.l + sotto }]}>
        <TestaFoglio titolo={testo('incolla.titolo')} sinistra={{ testo: testo('modifica.annulla'), onPress: onChiudi }} />
        <View style={stili.dentro}>
          <Text style={stili.spiega}>{testo('modifica.incolla')}</Text>
          <TextInput
            style={stili.riquadro}
            value={incollato}
            onChangeText={setIncollato}
            ref={riquadro}
            multiline
            textAlignVertical="top"
            accessibilityLabel={testo('incolla.titolo')}
            placeholderTextColor={colori.testoTenue}
          />
          {nienteDaLeggere ? (
            <Text style={stili.niente}>{testo('modifica.incolla.niente')}</Text>
          ) : parti.length > 0 ? (
            <View style={stili.anteprima} accessibilityLiveRegion="polite">
              <Text style={stili.anteprimaTesto}>{parti.join(' · ')}</Text>
              {conti.incerte > 0 ? (
                <View style={stili.incerte}>
                  <View style={stili.pallino} />
                  <Text style={stili.anteprimaTesto}>
                    {testo('incolla.conta.incerte', { conteggio: String(conti.incerte) })}
                  </Text>
                </View>
              ) : null}
            </View>
          ) : null}
          <BottonePrincipale
            testo={testo(bottone.chiave, bottone.conteggio === undefined ? undefined : { conteggio: bottone.conteggio })}
            onPress={aggiungi}
            spento={conti.ingredienti === 0}
          />
        </View>
      </View>
    </Foglio>
  );
}

const creaStili = (colori: Colori) =>
  StyleSheet.create({
    foglio: {
      backgroundColor: colori.fondo,
      borderTopLeftRadius: 22,
      borderTopRightRadius: 22,
      flexShrink: 1,
    },
    dentro: { paddingHorizontal: SPAZIO.l, paddingTop: SPAZIO.s, gap: SPAZIO.m, flexShrink: 1 },
    spiega: { ...TESTO.etichetta, color: colori.testoTenue, lineHeight: 20 },
    riquadro: {
      minHeight: 160,
      height: 220,
      flexShrink: 1,
      borderRadius: RAGGIO.campo,
      borderWidth: 2,
      borderColor: colori.accento,
      backgroundColor: colori.superficie,
      paddingHorizontal: 13,
      paddingTop: 10,
      paddingBottom: 10,
      ...TESTO.etichetta,
      lineHeight: 21,
      color: colori.testo,
    },
    niente: { ...TESTO.piccolo, color: colori.attenzione },
    anteprima: { flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', columnGap: SPAZIO.m, rowGap: 4 },
    anteprimaTesto: { ...TESTO.piccolo, color: colori.testoTenue },
    incerte: { flexDirection: 'row', alignItems: 'center', gap: 6 },
    pallino: { width: 8, height: 8, borderRadius: 4, backgroundColor: colori.attenzione },
  });