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

import { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Pressable,
  TouchableOpacity,
  Image,
  ActivityIndicator,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { useTranslation } from 'react-i18next';
import {
  isValidDomain,
  normalizeDomain,
  type Tier,
} from '../../hooks/useCustomDomains';
import { useColors } from '../../lib/theme';
import { KeyboardAwareSheet } from '../KeyboardAwareSheet';

const COLLAPSED_HEIGHT = 600;

type Props = {
  visible: boolean;
  tier: Tier;
  onClose: () => void;
  onAdd: (domain: string) => Promise<{ ok: boolean; error?: string; alreadyGlobal?: boolean }>;
};

export function AddDomainSheet({ visible, tier, onClose, onAdd }: Props) {
  const { t } = useTranslation();
  const colors = useColors();
  const insets = useSafeAreaInsets();
  const [input, setInput] = useState('');
  const [confirmPermanent, setConfirmPermanent] = useState(false);
  const [adding, setAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);

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

  function close() {
    setInput('');
    setConfirmPermanent(false);
    setError(null);
    onClose();
  }

  async function handleAdd() {
    if (!valid || !confirmPermanent || adding) return;
    setAdding(true);
    setError(null);
    const result = await onAdd(input);
    setAdding(false);
    if (result.ok) {
      close();
      return;
    }
    if (result.alreadyGlobal) {
      setError(t('blocker.add_sheet_already_global', { domain: normalized }));
    } else {
      setError(result.error ?? t('blocker.add_sheet_add_failed'));
    }
  }

  const warningText =
    tier.plan === 'free'
      ? t('blocker.add_sheet_warning_free')
      : t('blocker.add_sheet_warning_pro');

  const header = (
    <View
      style={{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingTop: 6,
        paddingBottom: 12,
        borderBottomWidth: 1,
        borderBottomColor: colors.border,
      }}
    >
      <Pressable onPress={close} hitSlop={10}>
        <Text style={{ fontSize: 16, fontFamily: 'Nunito_400Regular', color: colors.textMuted }}>
          {t('common.cancel')}
        </Text>
      </Pressable>
      <Text style={{ fontSize: 16, fontFamily: 'Nunito_700Bold', color: colors.text }}>
        {t('blocker.add_sheet_title')}
      </Text>
      <View style={{ width: 60 }} />
    </View>
  );

  return (
    <KeyboardAwareSheet
      visible={visible}
      onClose={close}
      collapsedHeight={COLLAPSED_HEIGHT}
      header={header}
      pushChildrenToBottom={false}
    >
      <View style={{ flex: 1, padding: 20, gap: 14 }}>
        {/* Input */}
        <View>
          <Text
            style={{
              fontSize: 12,
              fontFamily: 'Nunito_600SemiBold',
              color: colors.textMuted,
              marginBottom: 6,
            }}
          >
            {t('blocker.add_sheet_label')}
          </Text>
          <TextInput
            value={input}
            onChangeText={(v) => {
              setInput(v);
              setError(null);
            }}
            placeholder={t('blocker.add_sheet_placeholder')}
            placeholderTextColor={colors.textMuted}
            autoCapitalize="none"
            autoCorrect={false}
            autoFocus
            keyboardType="url"
            returnKeyType="done"
            onSubmitEditing={handleAdd}
            style={{
              backgroundColor: colors.surfaceElevated,
              borderRadius: 12,
              paddingHorizontal: 14,
              paddingVertical: 12,
              fontSize: 15,
              fontFamily: 'Nunito_400Regular',
              color: colors.text,
            }}
          />
          {input && !valid && (
            <Text
              style={{
                fontSize: 12,
                fontFamily: 'Nunito_400Regular',
                color: '#dc2626',
                marginTop: 6,
              }}
            >
              {t('blocker.add_sheet_invalid')}
            </Text>
          )}
        </View>

        {/* Preview */}
        {valid && (
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 10,
              padding: 12,
              backgroundColor: colors.surfaceElevated,
              borderRadius: 12,
            }}
          >
            <Image
              source={{
                uri: `https://www.google.com/s2/favicons?domain=${normalized}&sz=64`,
              }}
              style={{ width: 24, height: 24, borderRadius: 4 }}
            />
            <Text
              style={{
                flex: 1,
                fontSize: 14,
                fontFamily: 'Nunito_600SemiBold',
                color: colors.text,
              }}
              numberOfLines={1}
            >
              {normalized}
            </Text>
          </View>
        )}

        {/* Warning */}
        {valid && (
          <View
            style={{
              flexDirection: 'row',
              gap: 10,
              padding: 12,
              backgroundColor: '#fef3c7',
              borderRadius: 12,
              borderWidth: 1,
              borderColor: '#fcd34d',
            }}
          >
            <Ionicons name="lock-closed" size={18} color="#92400e" />
            <Text
              style={{
                flex: 1,
                fontSize: 12,
                fontFamily: 'Nunito_400Regular',
                color: '#92400e',
                lineHeight: 17,
              }}
            >
              {warningText}
            </Text>
          </View>
        )}

        {/* Confirm-Checkbox */}
        {valid && (
          <Pressable
            onPress={() => setConfirmPermanent((v) => !v)}
            style={{
              flexDirection: 'row',
              alignItems: 'flex-start',
              gap: 10,
              paddingVertical: 4,
            }}
          >
            <View
              style={{
                width: 22,
                height: 22,
                borderRadius: 6,
                borderWidth: 1.5,
                borderColor: confirmPermanent ? colors.success : colors.border,
                backgroundColor: confirmPermanent ? colors.success : colors.bg,
                alignItems: 'center',
                justifyContent: 'center',
                marginTop: 1,
              }}
            >
              {confirmPermanent && <Ionicons name="checkmark" size={16} color="#fff" />}
            </View>
            <Text
              style={{
                flex: 1,
                fontSize: 13,
                fontFamily: 'Nunito_400Regular',
                color: colors.text,
                lineHeight: 18,
              }}
            >
              {t('blocker.add_sheet_confirm_permanent')}
            </Text>
          </Pressable>
        )}

        {/* Error */}
        {error && (
          <Text style={{ fontSize: 13, fontFamily: 'Nunito_400Regular', color: '#dc2626' }}>
            {error}
          </Text>
        )}

        <View style={{ flex: 1 }} />

        {/* Add-Button */}
        <TouchableOpacity
          onPress={handleAdd}
          disabled={!valid || !confirmPermanent || adding}
          activeOpacity={0.85}
          style={{ marginBottom: insets.bottom > 0 ? 8 : 12 }}
        >
          <View
            style={{
              backgroundColor: !valid || !confirmPermanent ? '#d4d4d4' : '#dc2626',
              borderRadius: 14,
              paddingVertical: 14,
              alignItems: 'center',
            }}
          >
            {adding ? (
              <ActivityIndicator color="#fff" />
            ) : (
              <Text style={{ fontSize: 15, fontFamily: 'Nunito_700Bold', color: '#fff' }}>
                {t('blocker.add_sheet_title')}
              </Text>
            )}
          </View>
        </TouchableOpacity>
      </View>
    </KeyboardAwareSheet>
  );
}