import React, { Dispatch, SetStateAction, useState } from 'react';
import { View, Text, TouchableOpacity, Image, Linking } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import moment from 'moment';

import { API_HOST } from 'src/constants';
import { Colors } from 'src/theme';
import { NAVIGATION_PAGES } from 'src/types';
import { styles } from './styles';
import { FixersData } from '../../utils/types';
import { Star } from '../Star';

interface FixerItemProps {
  item: FixersData;
  setSelectedFixer: Dispatch<SetStateAction<FixersData | null>>;
  country: { id: number; country: string; flag: string };
  setIsWarningModalVisible: Dispatch<SetStateAction<boolean>>;
}

const FixerItem = ({
  item,
  setSelectedFixer,
  country,
  setIsWarningModalVisible
}: FixerItemProps) => {
  const navigation = useNavigation();

  const formatDate = (month: number) => {
    const formatedMonth = moment(month, 'MM').format('MMMM');
    return `${item.year} ${formatedMonth}`;
  };

  const renderRatingStars = (ratings: { rate: string; name: string; comment: string }[]) => {
    const total = ratings.reduce((sum, rating) => sum + parseFloat(rating.rate), 0);
    const rating = (total / ratings.length).toFixed(4);
    const stars = [];

    for (let i = 0; i < 5; i++) {
      const filled = Math.min(Math.max(+rating - i, 0), 1);
      stars.push(<Star key={i} filled={filled} />);
    }
    return (
      <TouchableOpacity
        style={styles.ratingContainer}
        onPress={() =>
          navigation.navigate(
            ...([
              NAVIGATION_PAGES.FIXERS_COMMENTS,
              { comments: item.ratings, name: item.name }
            ] as never)
          )
        }
      >
        {stars}
        <Text style={styles.labelText}>({item.ratings.length})</Text>
      </TouchableOpacity>
    );
  };

  const openURLWithPrefix = async (url: string) => {
    const prefixedURL = url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
    const supported = await Linking.canOpenURL(prefixedURL);
  
    if (supported) {
      Linking.openURL(prefixedURL);
    }
  };

  return (
    <View style={styles.fixerItemContainer}>
      <View style={styles.fixerHeaderContainer}>
        <View style={styles.fixerCountryContainer}>
          <Image source={{ uri: API_HOST + country.flag }} style={styles.flagIcon} />
          <Text style={styles.fixerCountryText}>{country.country}</Text>
        </View>
      </View>

      <View style={styles.divider} />

      <View style={styles.detailContainer}>
        {item.name && (
          <View style={styles.rowContent}>
            <Text style={styles.labelText}>Name:</Text>
            <Text style={styles.valueText}>{item.name}</Text>
          </View>
        )}

        <View style={styles.rowContent}>
          <Text style={styles.labelText}>Date:</Text>
          <Text style={[styles.valueText, { color: Colors.DARK_BLUE }]}>
            {formatDate(item.month)}
          </Text>
        </View>

        {item.email && (
          <View style={styles.rowContent}>
            <Text style={styles.labelText}>Email:</Text>
            <Text
              style={styles.valueText}
              onPress={() => Linking.openURL(`mailto:${item.email}`)}
              selectable
            >
              {item.email}
            </Text>
          </View>
        )}

        {item.phone && (
          <View style={styles.rowContent}>
            <Text style={styles.labelText}>Phone:</Text>
            <Text
              style={styles.valueText}
              onPress={() => {
                Linking.openURL(`tel:${item.phone}`);
              }}
              selectable
            >
              {item.phone}
            </Text>
          </View>
        )}

        {item.web && (
          <View style={styles.rowContent}>
            <Text style={styles.labelText}>Website:</Text>
            <TouchableOpacity style={{ flex: 4 }} onPress={() => openURLWithPrefix(item.web)}>
              <Text style={[styles.linkText]} selectable>{item.web}</Text>
            </TouchableOpacity>
          </View>
        )}

        {item.comment && <CommentText text={item.comment} />}

        {item.ratings.length ? (
          <View style={styles.rowContent}>
            <Text style={styles.labelText}>Rating:</Text>
            {renderRatingStars(item.ratings)}
          </View>
        ) : null}

        <View style={styles.rowContent}>
          <Text style={styles.labelText}>Added by:</Text>
          <TouchableOpacity
            onPress={() =>
              navigation.navigate(
                ...([NAVIGATION_PAGES.PUBLIC_PROFILE_VIEW, { userId: item.added_by_uid }] as never)
              )
            }
            disabled={item.added_by_uid === 0}
            style={{ flex: 4 }}
          >
            <Text style={[styles.valueText, { color: Colors.DARK_BLUE, flex: 0 }]}>
              {item.added_by_name}
            </Text>
          </TouchableOpacity>
        </View>
      </View>

      <View style={styles.divider} />

      <View style={{ justifyContent: 'flex-end', flexDirection: 'row', gap: 12 }}>
        <TouchableOpacity
          style={styles.rateButton}
          onPress={() => {
            if (item.can_rate) {
              setSelectedFixer(item);
            } else {
              setIsWarningModalVisible(true);
            }
          }}
        >
          <Text style={styles.rateButtonText}>Rate</Text>
        </TouchableOpacity>

        {item.can_edit ? (
          <TouchableOpacity
            style={styles.rateButton}
            onPress={() => {
              navigation.navigate(
                ...([NAVIGATION_PAGES.ADD_FIXER, { fixer: item, un_id: country.id }] as never)
              );
            }}
          >
            <Text style={styles.rateButtonText}>Edit</Text>
          </TouchableOpacity>
        ) : null}
      </View>
    </View>
  );
};

const CommentText = ({ text }: { text: string }) => {
  const [showFullComment, setShowFullComment] = useState(false);
  const [textMoreThanThreeLines, setTextMoreThanThreeLines] = useState(false);

  return (
    <View style={{ gap: 6 }}>
      <Text style={styles.labelText}>Comment:</Text>
      <View>
        <Text
          style={[styles.valueText, { color: Colors.DARK_BLUE }]}
          numberOfLines={textMoreThanThreeLines && !showFullComment ? 3 : undefined}
          onTextLayout={(e) => {
            if (!textMoreThanThreeLines) {
              const { lines } = e.nativeEvent;
              if (lines.length > 3) {
                setTextMoreThanThreeLines(true);
              }
            }
          }}
        >
          {text}
        </Text>

        {textMoreThanThreeLines && (
          <TouchableOpacity onPress={() => setShowFullComment(!showFullComment)}>
            <Text style={styles.linkText}>{showFullComment ? 'Show less' : 'Show more'}</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

export default FixerItem;
