import React from 'react';
import { View, StyleSheet, ScrollView,Text  } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';

import { cards } from '../../constants/data';
import { COLORS } from '../../constants/color';
import  Header from '../../components/header';
import  SiteHealthCard  from '../../components/siteHealthCard';
import  ActionGrid  from '../../components/actionGrid';
import  StatCard  from '../../components/statCard';
import  BottomTabBar  from '../../navigation/bottonTabBar';
import Card from '../../utils/card';
import Ionicons from 'react-native-vector-icons/Ionicons';

export default function HomeScreen()  {
  return (
    <SafeAreaProvider style={{ flex: 1, backgroundColor: COLORS.background }}>
      
      {/* 2. Main container needs flex: 1 */}
      <View style={{ flex: 1, backgroundColor: COLORS.background }}>
        <ScrollView contentContainerStyle={styles.scrollContent}>
          {/* Your content */}
        <Header
            userName="Arjun"
            locationName="Godrej One — Vikhroli"
            badgeCount={3}
          />
          <SiteHealthCard/>
          <ActionGrid/>
         
<View style={styles.gridRow}>
  {cards.slice(2, 4).map((card) => (
    <StatCard
      key={card.title}
      title={card.title.toUpperCase()}
      icon={card.icon}
      iconColor={card.color}
      value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
      subValue={
        card.unit
          ? card.unit
          : card.value.includes('/')
          ? `/ ${card.value.split('/')[1].trim()}`
          : undefined
      }
      highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
    />
  ))}
</View>

        <View style={styles.gridRow}>
  {cards.slice(0, 2).map((card) => (
    <StatCard
      key={card.title}
      title={card.title.toUpperCase()}
      icon={card.icon}
      iconColor={card.color}
      value={card.value.includes('/') ? card.value.split('/')[0].trim() : card.value}
      subValue={
        card.unit
          ? card.unit
          : card.value.includes('/')
          ? `/ ${card.value.split('/')[1].trim()}`
          : undefined
      }
      highlightValueColor={card.title === 'Air Quality' ? COLORS.orange : undefined}
    />
  ))}
</View>
 <Card style={styles.card}>

      <View style={styles.header}>

        <Ionicons
          name="sparkles-outline"
          size={22}
          color={COLORS.orange}
        />

        <Text style={styles.title}>
          OPTIX AI RECOMMENDATION
        </Text>

      </View>

      <Text style={styles.message}>
        Chiller CH-02 running 14% below efficiency curve.
        Shifting load to CH-01 saves ≈ ₹8,400/day.
      </Text>

    </Card>

        </ScrollView>

        <BottomTabBar />
      
        
        
      </View>
  
      </SafeAreaProvider>
    
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: COLORS.background,
  },
  scrollContent: {
    paddingHorizontal: 16,
    paddingTop: 16,
    paddingBottom: 20,
  },
  gridRow: {
    
    flexDirection: 'row',
    flexGrow:1,
    
    marginBottom: 8,
    gap:10
  },
  card: {

    borderColor: COLORS.orange,

    marginHorizontal: 10,

    marginTop: 10,

    marginBottom: 20,
  },

  header: {
    flexDirection: 'row',

    alignItems: 'center',

    marginBottom: 10,
  },

  title: {
    color: COLORS.orange,

    fontSize: 18,

    fontWeight: 'bold',

    marginLeft: 8,
  },

  message: {
    color: COLORS.textPrimary,

    fontSize: 16,

    lineHeight: 24,

    marginLeft: 20,
  },
});
