rebreak-monorepo/apps/rebreak-native/components/blocker/SuggestCuratedSheet.tsx

import { useState } from 'react';
import {
  ActivityIndicator,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import { normalizeDomain, isValidDomain } from '../../hooks/useCustomDomains';
import { resolveVipCountry } from '../../hooks/useWebContentDomains';
import { useCuratedSuggest } from '../../hooks/useCuratedSuggest';
import { useColors } from '../../lib/theme';
import { FormSheet } from '../FormSheet';

type Props = {
  visible: boolean;
  onClose: () => void;
};

export function SuggestCuratedSheet({ visible, onClose }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const [input, setInput] = useState('');
  const { state, suggest, reset } = useCuratedSuggest();

  const loading = state === 'loading';
  const done = state === 'success';

  const normalized = normalizeDomain(input);
  const inputValid = isValidDomain(input);

  function close() {
    setInput('');
    reset();
    onClose();
  }

  async function handleSubmit() {
    if (!inputValid || loading) return;
    const country = resolveVipCountry();
    await suggest(normalized, country);
  }

  const errorMessage: string | null = (() => {
    switch (state) {
      case 'invalid_domain': return t('blocker.suggest_curated_error_invalid_domain');
      case 'already_suggested': return t('blocker.suggest_curated_error_already_suggested');
      case 'already_approved': return t('blocker.suggest_curated_error_already_approved');
      case 'already_rejected': return t('blocker.suggest_curated_error_already_rejected');
      case 'error': return t('blocker.suggest_curated_error_generic');
      default: return null;
    }
  })();

  const ctaEnabled = inputValid && !loading && !done;

  return (
    <FormSheet
      visible={visible}
      onClose={close}
      title={t('blocker.suggest_curated_title')}
      growWithKeyboard
    >
      <View style={{ padding: 16, gap: 14 }}>
        {done ? (
          <View
            style={{
              gap: 10,
              paddingVertical: 24,
              alignItems: 'center',
            }}
          >
            <View
              style={{
                width: 48,
                height: 48,
                borderRadius: 24,
                backgroundColor: '#dcfce7',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Ionicons name="checkmark" size={26} color="#16a34a" />
            </View>
            <Text
              style={{
                fontSize: 15,
                fontFamily: 'Nunito_700Bold',
                color: colors.text,
                textAlign: 'center',
              }}
            >
              {t('blocker.suggest_curated_success_title')}
            </Text>
            <Text
              style={{
                fontSize: 13,
                fontFamily: 'Nunito_400Regular',
                color: colors.textMuted,
                textAlign: 'center',
                lineHeight: 18,
              }}
            >
              {t('blocker.suggest_curated_success_body')}
            </Text>
            <TouchableOpacity
              onPress={close}
              activeOpacity={0.8}
              style={{
                marginTop: 8,
                backgroundColor: colors.brandOrange,
                borderRadius: 14,
                paddingVertical: 13,
                paddingHorizontal: 32,
              }}
            >
              <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                {t('common.ok')}
              </Text>
            </TouchableOpacity>
          </View>
        ) : (
          <>
            {/* Explanation card */}
            <View
              style={{
                flexDirection: 'row',
                gap: 10,
                padding: 12,
                backgroundColor: colors.surfaceElevated,
                borderRadius: 12,
              }}
            >
              <Ionicons
                name="information-circle-outline"
                size={16}
                color={colors.textMuted}
                style={{ marginTop: 1 }}
              />
              <Text
                style={{
                  flex: 1,
                  fontSize: 12,
                  fontFamily: 'Nunito_400Regular',
                  color: colors.textMuted,
                  lineHeight: 17,
                }}
              >
                {t('blocker.suggest_curated_explanation')}
              </Text>
            </View>

            {/* Input */}
            <View style={{ gap: 6 }}>
              <Text style={{ fontSize: 13, fontFamily: 'Nunito_600SemiBold', color: colors.text }}>
                {t('blocker.suggest_curated_input_label')}
              </Text>
              <TextInput
                value={input}
                onChangeText={(v) => {
                  setInput(v);
                  if (state !== 'idle' && state !== 'loading') reset();
                }}
                placeholder={t('blocker.suggest_curated_input_placeholder')}
                placeholderTextColor={colors.textMuted}
                keyboardType="url"
                autoCapitalize="none"
                autoCorrect={false}
                style={{
                  backgroundColor: colors.surfaceElevated,
                  borderRadius: 10,
                  padding: 12,
                  fontSize: 14,
                  fontFamily: 'Nunito_400Regular',
                  color: colors.text,
                  borderWidth: 1,
                  borderColor: errorMessage ? '#dc2626' : colors.border,
                }}
              />
              {errorMessage && (
                <Text style={{ fontSize: 12, fontFamily: 'Nunito_400Regular', color: '#dc2626' }}>
                  {errorMessage}
                </Text>
              )}
            </View>

            {/* CTA row */}
            <View style={{ flexDirection: 'row', gap: 10, marginTop: 4 }}>
              <TouchableOpacity onPress={close} activeOpacity={0.8} style={{ flex: 1 }}>
                <View
                  style={{
                    borderRadius: 14,
                    paddingVertical: 14,
                    alignItems: 'center',
                    backgroundColor: colors.surfaceElevated,
                    borderWidth: 1,
                    borderColor: colors.border,
                  }}
                >
                  <Text style={{ fontSize: 15, fontFamily: 'Nunito_600SemiBold', color: colors.textMuted }}>
                    {t('common.cancel')}
                  </Text>
                </View>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={handleSubmit}
                disabled={!ctaEnabled}
                activeOpacity={0.85}
                style={{ flex: 2 }}
              >
                <View
                  style={{
                    backgroundColor: ctaEnabled ? colors.brandOrange : '#d4d4d4',
                    borderRadius: 14,
                    paddingVertical: 14,
                    alignItems: 'center',
                  }}
                >
                  {loading ? (
                    <ActivityIndicator color="#fff" />
                  ) : (
                    <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                      {t('blocker.suggest_curated_cta')}
                    </Text>
                  )}
                </View>
              </TouchableOpacity>
            </View>
          </>
        )}
      </View>
    </FormSheet>
  );
}