import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Image,
  Dimensions,
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { Property } from '../types';
import { apiService } from '../services/apiService';
import PropertyCard from '../components/PropertyCard';

const { width } = Dimensions.get('window');

export default function HomeScreen({ navigation }: any) {
  const [properties, setProperties] = useState<Property[]>([]);
  const [stats, setStats] = useState({
    totalProperties: 0,
    totalMovingServices: 0,
    totalBookings: 0,
  });

  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      const [propertiesData, movingServicesData] = await Promise.all([
        apiService.getProperties({ limit: 6 }),
        apiService.getMovingServices(),
      ]);
      
      setProperties(propertiesData);
      setStats({
        totalProperties: propertiesData.length,
        totalMovingServices: movingServicesData.length,
        totalBookings: 0, // This would come from bookings API
      });
    } catch (error) {
      console.error('Failed to load home data:', error);
    }
  };

  const QuickAction = ({ title, icon, onPress, color }: any) => (
    <TouchableOpacity style={[styles.quickAction, { backgroundColor: color }]} onPress={onPress}>
      <Icon name={icon} size={24} color="#fff" />
      <Text style={styles.quickActionText}>{title}</Text>
    </TouchableOpacity>
  );

  const StatCard = ({ title, value, icon, color }: any) => (
    <View style={[styles.statCard, { borderLeftColor: color }]}>
      <View style={styles.statContent}>
        <Text style={styles.statValue}>{value}</Text>
        <Text style={styles.statTitle}>{title}</Text>
      </View>
      <Icon name={icon} size={32} color={color} />
    </View>
  );

  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      {/* Hero Section */}
      <View style={styles.hero}>
        <View style={styles.heroContent}>
          <Text style={styles.heroTitle}>Find Your Perfect Property in Mogadishu</Text>
          <Text style={styles.heroSubtitle}>
            Discover properties and moving services all in one place
          </Text>
        </View>
        <View style={styles.heroImage}>
          <Icon name="home" size={80} color="#BAF4F0" />
        </View>
      </View>

      {/* Quick Actions */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Quick Actions</Text>
        <View style={styles.quickActions}>
          <QuickAction
            title="Browse Properties"
            icon="business-outline"
            color="#0091B9"
            onPress={() => navigation.navigate('Properties')}
          />
          <QuickAction
            title="View on Map"
            icon="map-outline"
            color="#004F9B"
            onPress={() => navigation.navigate('Map')}
          />
          <QuickAction
            title="Moving Services"
            icon="car-outline"
            color="#FF6500"
            onPress={() => navigation.navigate('Moving')}
          />
          <QuickAction
            title="Contact Us"
            icon="call-outline"
            color="#FFD500"
            onPress={() => {/* Handle contact */}}
          />
        </View>
      </View>

      {/* Statistics */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>Platform Statistics</Text>
        <View style={styles.statsContainer}>
          <StatCard
            title="Properties Available"
            value={stats.totalProperties}
            icon="business-outline"
            color="#0091B9"
          />
          <StatCard
            title="Moving Services"
            value={stats.totalMovingServices}
            icon="car-outline"
            color="#FF6500"
          />
          <StatCard
            title="Happy Customers"
            value="150+"
            icon="people-outline"
            color="#004F9B"
          />
        </View>
      </View>

      {/* Featured Properties */}
      <View style={styles.section}>
        <View style={styles.sectionHeader}>
          <Text style={styles.sectionTitle}>Featured Properties</Text>
          <TouchableOpacity onPress={() => navigation.navigate('Properties')}>
            <Text style={styles.viewAllText}>View All</Text>
          </TouchableOpacity>
        </View>
        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
          <View style={styles.propertiesRow}>
            {properties.slice(0, 3).map((property) => (
              <View key={property.id} style={styles.featuredProperty}>
                <PropertyCard
                  property={property}
                  onPress={() => navigation.navigate('Properties', {
                    screen: 'PropertyDetail',
                    params: { property }
                  })}
                  compact
                />
              </View>
            ))}
          </View>
        </ScrollView>
      </View>

      {/* Contact Info */}
      <View style={styles.section}>
        <View style={styles.contactCard}>
          <View style={styles.contactHeader}>
            <Icon name="call" size={24} color="#0091B9" />
            <Text style={styles.contactTitle}>Need Help?</Text>
          </View>
          <Text style={styles.contactText}>
            Contact our support team for any assistance
          </Text>
          <View style={styles.contactMethods}>
            <TouchableOpacity style={styles.contactMethod}>
              <Icon name="call" size={16} color="#0091B9" />
              <Text style={styles.contactMethodText}>+252 61 234 5678</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.contactMethod}>
              <Icon name="mail" size={16} color="#0091B9" />
              <Text style={styles.contactMethodText}>support@kiroservices.com</Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  hero: {
    backgroundColor: '#0091B9',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingVertical: 30,
    borderBottomLeftRadius: 25,
    borderBottomRightRadius: 25,
  },
  heroContent: {
    flex: 1,
  },
  heroTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 8,
  },
  heroSubtitle: {
    fontSize: 16,
    color: '#BAF4F0',
    lineHeight: 24,
  },
  heroImage: {
    marginLeft: 20,
  },
  section: {
    paddingHorizontal: 20,
    paddingVertical: 20,
  },
  sectionHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 15,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#004F9B',
    marginBottom: 15,
  },
  viewAllText: {
    color: '#0091B9',
    fontSize: 16,
    fontWeight: '600',
  },
  quickActions: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  quickAction: {
    width: '48%',
    paddingVertical: 20,
    paddingHorizontal: 15,
    borderRadius: 12,
    alignItems: 'center',
    marginBottom: 15,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  quickActionText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
    marginTop: 8,
    textAlign: 'center',
  },
  statsContainer: {
    gap: 15,
  },
  statCard: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderLeftWidth: 4,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  statContent: {
    flex: 1,
  },
  statValue: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#004F9B',
  },
  statTitle: {
    fontSize: 14,
    color: '#666',
    marginTop: 4,
  },
  propertiesRow: {
    flexDirection: 'row',
    paddingRight: 20,
  },
  featuredProperty: {
    marginRight: 15,
    width: width * 0.75,
  },
  contactCard: {
    backgroundColor: '#fff',
    padding: 20,
    borderRadius: 12,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  contactHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
  },
  contactTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#004F9B',
    marginLeft: 10,
  },
  contactText: {
    fontSize: 14,
    color: '#666',
    marginBottom: 15,
  },
  contactMethods: {
    gap: 10,
  },
  contactMethod: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  contactMethodText: {
    marginLeft: 10,
    fontSize: 14,
    color: '#0091B9',
    fontWeight: '500',
  },
});