import React, { useEffect, useState } from 'react';
import {
  View, Text, ScrollView, StyleSheet,
  TouchableOpacity, ActivityIndicator,
} from 'react-native';
import { getStoredUser, logout } from '../../services/api';
import { User } from '../../types';

export default function HomeScreen({ navigation }: any) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    getStoredUser().then(setUser);
  }, []);

  const handleLogout = async () => {
    await logout();
    navigation.replace('Login');
  };

  return (
    <ScrollView style={styles.bg} contentContainerStyle={styles.container}>
      {/* Hero */}
      <View style={styles.hero}>
        <Text style={styles.heroEmoji}>🔥</Text>
        <Text style={styles.heroTitle}>Stile Energy</Text>
        <Text style={styles.heroSub}>
          Nigeria's Most Trusted LPG Delivery
        </Text>
        {user && (
          <Text style={styles.greeting}>Welcome back, {user.name}! 👋</Text>
        )}
      </View>

      {/* Quick actions */}
      <Text style={styles.sectionTitle}>Quick Actions</Text>
      <View style={styles.grid}>
        <TouchableOpacity style={styles.card} onPress={() => navigation.navigate('Products')}>
          <Text style={styles.cardEmoji}>🛒</Text>
          <Text style={styles.cardTitle}>Order Gas</Text>
          <Text style={styles.cardSub}>Browse our LPG products</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.card} onPress={() => navigation.navigate('MyOrders')}>
          <Text style={styles.cardEmoji}>📦</Text>
          <Text style={styles.cardTitle}>My Orders</Text>
          <Text style={styles.cardSub}>Track your deliveries</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.card} onPress={() => navigation.navigate('Profile')}>
          <Text style={styles.cardEmoji}>👤</Text>
          <Text style={styles.cardTitle}>My Profile</Text>
          <Text style={styles.cardSub}>Manage your account</Text>
        </TouchableOpacity>
        <TouchableOpacity style={[styles.card, styles.cardDanger]} onPress={handleLogout}>
          <Text style={styles.cardEmoji}>🚪</Text>
          <Text style={styles.cardTitle}>Logout</Text>
          <Text style={styles.cardSub}>Sign out of the app</Text>
        </TouchableOpacity>
      </View>

      {/* Info strip */}
      <View style={styles.infoStrip}>
        <Text style={styles.infoItem}>✅ Same-day delivery</Text>
        <Text style={styles.infoItem}>💵 Cash on Delivery</Text>
        <Text style={styles.infoItem}>🔒 Safe & Certified</Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  bg:           { flex: 1, backgroundColor: '#0f172a' },
  container:    { padding: 20 },
  hero:         {
    backgroundColor: '#1e293b', borderRadius: 16, padding: 28,
    alignItems: 'center', marginBottom: 24,
  },
  heroEmoji:    { fontSize: 48, marginBottom: 8 },
  heroTitle:    { fontSize: 28, fontWeight: '800', color: '#fff' },
  heroSub:      { fontSize: 14, color: '#94a3b8', marginTop: 4, textAlign: 'center' },
  greeting:     { fontSize: 15, color: '#f97316', marginTop: 12, fontWeight: '600' },
  sectionTitle: { fontSize: 18, fontWeight: '700', color: '#fff', marginBottom: 12 },
  grid:         { flexDirection: 'row', flexWrap: 'wrap', gap: 12, marginBottom: 24 },
  card:         {
    width: '47%', backgroundColor: '#1e293b', borderRadius: 14,
    padding: 18, alignItems: 'center',
  },
  cardDanger:   { borderWidth: 1, borderColor: '#ef4444' },
  cardEmoji:    { fontSize: 28, marginBottom: 8 },
  cardTitle:    { fontSize: 15, fontWeight: '700', color: '#fff' },
  cardSub:      { fontSize: 12, color: '#64748b', textAlign: 'center', marginTop: 4 },
  infoStrip:    {
    backgroundColor: '#1e293b', borderRadius: 12, padding: 16, gap: 8,
  },
  infoItem:     { color: '#94a3b8', fontSize: 14 },
});
