// Smart App City — Dashboard Screen (detailed view with charts)
import React from 'react';
import { View, Text, ScrollView, StyleSheet } from 'react-native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { Colors, Typography, Spacing, BorderRadius } from '../../../../src/theme/colors';
import { useIoTStore } from '../../../stores/iotStore';
import LineChart from '../../charts/LineChart';
import BarChart from '../../charts/BarChart';
import GaugeChart from '../../charts/GaugeChart';
import SectionHeader from '../../common/Header';

type Props = { navigation: NativeStackNavigationProp<any> };

const TEMP_DATA = [
  { label: '6h', value: 22 }, { label: '8h', value: 23 }, { label: '10h', value: 25 },
  { label: '12h', value: 27 }, { label: '14h', value: 29 }, { label: '16h', value: 28 },
  { label: '18h', value: 26 }, { label: '20h', value: 24 },
];

export default function DashboardScreen({ navigation }: Props) {
  const sensors = useIoTStore((s) => s.sensors);

  return (
    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
      <View style={styles.header}>
        <Text style={styles.title}>Dashboard Analytics</Text>
      </View>

      {/* Gauges */}
      <View style={styles.section}>
        <SectionHeader title="Vue d'ensemble" />
        <View style={styles.gaugesRow}>
          <GaugeChart value={28.3} max={50} label="Température" unit="°C" />
          <GaugeChart value={72} max={100} label="Humidité" unit="%" />
          <GaugeChart value={85} max={200} label="Qualité Air" unit="AQI" color={Colors.warning} />
        </View>
      </View>

      {/* Line chart */}
      <View style={styles.section}>
        <SectionHeader title="Température — 24h" />
        <LineChart data={TEMP_DATA} color={Colors.ocean[500]} height={160} />
      </View>

      {/* Bar chart */}
      <View style={styles.section}>
        <SectionHeader title="Énergie par zone (kWh)" />
        <BarChart
          data={[
            { label: 'Centre', value: 2340, color: Colors.primary[500] },
            { label: 'Schoelcher', value: 1890, color: Colors.ocean[500] },
            { label: 'Nord', value: 3120, color: Colors.indigo[500] },
          ]}
          height={140}
        />
      </View>

      <View style={{ height: 80 }} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: Colors.neutral50 },
  header: {
    backgroundColor: Colors.primary[500],
    paddingTop: 50, paddingBottom: Spacing.base,
    paddingHorizontal: Spacing.base,
  },
  title: { fontSize: Typography.sizes.lg, fontWeight: Typography.weights.bold, color: Colors.white },
  section: { padding: Spacing.base },
  gaugesRow: { flexDirection: 'row', justifyContent: 'space-around', marginTop: Spacing.base },
});