import { useState } from 'react';
import { View, Text, TouchableOpacity, LayoutAnimation, Platform, UIManager } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useColors } from '../../lib/theme';

if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export type ApprovedDomain = {
  domain: string;
  approvedAt: string;
};

type Props = {
  domains: ApprovedDomain[];
  loading?: boolean;
};

export function ApprovedDomainsList({ domains, loading }: Props) {
  const colors = useColors();
  const [expanded, setExpanded] = useState(false);

  function toggle() {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpanded((v) => !v);
  }

  return (
    <View style={{ marginHorizontal: 16, marginTop: 12 }}>
      <TouchableOpacity
        onPress={toggle}
        activeOpacity={0.7}
      >
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            backgroundColor: colors.card,
            borderWidth: 1,
            borderColor: colors.border,
            borderRadius: 14,
            padding: 16,
          }}
        >
          <View style={{ flex: 1 }}>
            <Text style={{ fontSize: 13, color: colors.text, fontFamily: 'Nunito_600SemiBold' }}>
              Approved Domains{' '}
              <Text style={{ color: colors.textMuted, fontFamily: 'Nunito_400Regular' }}>
                ({domains.length})
              </Text>
            </Text>
          </View>
          <Ionicons
            name={expanded ? 'chevron-up' : 'chevron-down'}
            size={18}
            color={colors.textMuted}
          />
        </View>
      </TouchableOpacity>

      {expanded ? (
        <View
          style={{
            marginTop: 6,
            backgroundColor: colors.card,
            borderWidth: 1,
            borderColor: colors.border,
            borderRadius: 12,
            paddingVertical: 4,
          }}
        >
          {loading ? (
            <View style={{ padding: 16 }}>
              <SkeletonRow />
              <SkeletonRow />
              <SkeletonRow />
            </View>
          ) : domains.length === 0 ? (
            <Text
              style={{
                paddingVertical: 16,
                paddingHorizontal: 14,
                fontSize: 12,
                color: colors.textMuted,
                fontFamily: 'Nunito_400Regular',
              }}
            >
              Noch keine approved Domains. Submit deine erste in der Community.
            </Text>
          ) : (
            domains.map((d, idx) => (
              <View
                key={d.domain}
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  paddingVertical: 10,
                  paddingHorizontal: 14,
                  borderTopWidth: idx === 0 ? 0 : 1,
                  borderTopColor: colors.border,
                }}
              >
                <Text style={{ fontSize: 13, color: colors.text, fontFamily: 'Nunito_600SemiBold' }}>
                  {d.domain}
                </Text>
                <Text
                  style={{ fontSize: 11, color: colors.textMuted, fontFamily: 'Nunito_400Regular' }}
                >
                  {d.approvedAt}
                </Text>
              </View>
            ))
          )}
        </View>
      ) : null}
    </View>
  );
}

function SkeletonRow() {
  const colors = useColors();
  return (
    <View
      style={{
        height: 14,
        backgroundColor: colors.surfaceElevated,
        borderRadius: 4,
        marginVertical: 6,
      }}
    />
  );
}