import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import FeatureCard from "./FeatureCard";
import BrandLogo from "../../shared/BrandLogo";

export type HomeCard = {
  key: string;
  icon: string;
  title: string;
  subtitle?: string;
  badge?: number | null;
  comingSoon?: boolean;
  onPress?: () => void;
};

type Props = {
  appDisplayName: string;
  brandColor: string;
  logoUrl?: string | null;
  userName?: string | null;
  isOnline: boolean;
  cards: HomeCard[];
  onChangeInstance: () => void;
  onLogout: () => void;
};

// Page d'accueil "hub" : equivalent mobile du tableau de bord tech coolcare
// (dashboard.php). Chaque carte ouvre une section. L'ecran d'accueil masque le
// header natif et porte son propre header : une bande blanche surelevee (logo
// tenant + nom de l'app + liens Instance / Deconnexion), visuellement separee
// du corps. Les sous-ecrans, eux, utilisent le header natif (bouton retour).
export default function HomeHub({
  appDisplayName,
  brandColor,
  logoUrl,
  userName,
  isOnline,
  cards,
  onChangeInstance,
  onLogout,
}: Readonly<Props>) {
  return (
    <SafeAreaView style={styles.screen} edges={["top", "left", "right"]}>
      <StatusBar style="dark" />

      <View style={styles.header}>
        <View style={styles.brandBlock}>
          <BrandLogo
            logoUrl={logoUrl}
            name={appDisplayName}
            brandColor={brandColor}
            size={40}
            radius={10}
            style={styles.logo}
          />
          <View style={styles.titleBlock}>
            <Text style={[styles.appName, { color: brandColor }]} numberOfLines={1}>
              {appDisplayName}
            </Text>
            {userName ? (
              <Text style={styles.welcome} numberOfLines={1}>
                Bonjour {userName}
              </Text>
            ) : null}
          </View>
        </View>
        <View style={styles.headerActions}>
          <Text style={styles.headerLink} onPress={onChangeInstance}>
            Instance
          </Text>
          <Text style={styles.headerLink} onPress={onLogout}>
            Deconnexion
          </Text>
        </View>
      </View>

      <View style={styles.body}>
        <View style={styles.sectionRow}>
          <Text style={styles.sectionTitle}>Tableau de bord</Text>
          <View
            style={[
              styles.netDot,
              { backgroundColor: isOnline ? "#16a34a" : "#dc2626" },
            ]}
          />
        </View>

        <ScrollView
          contentContainerStyle={styles.grid}
          showsVerticalScrollIndicator={false}
        >
          {cards.map((card) => (
            <FeatureCard
              key={card.key}
              icon={card.icon}
              title={card.title}
              subtitle={card.subtitle}
              brandColor={brandColor}
              badge={card.badge}
              comingSoon={card.comingSoon}
              onPress={card.onPress}
            />
          ))}
        </ScrollView>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    backgroundColor: "#edf2f8",
  },
  // Bande de header blanche, separee du corps par une bordure + ombre douce.
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 12,
    paddingHorizontal: 16,
    paddingVertical: 12,
    backgroundColor: "#ffffff",
    borderBottomWidth: 1,
    borderBottomColor: "#e2e8f0",
    // Ombre douce pour decoller le header du corps (iOS + Android).
    shadowColor: "#0f2d6b",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 6,
    elevation: 3,
  },
  brandBlock: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    gap: 10,
  },
  // Fond/bordure du logo ; taille/rayon poses par BrandLogo.
  logo: {
    backgroundColor: "#f1f5f9",
    borderWidth: 1,
    borderColor: "#e2e8f0",
  },
  titleBlock: {
    flex: 1,
  },
  appName: {
    fontSize: 18,
    fontWeight: "800",
  },
  welcome: {
    color: "#6a7a96",
    fontWeight: "600",
    fontSize: 12,
    marginTop: 1,
  },
  headerActions: {
    flexDirection: "row",
    gap: 14,
  },
  headerLink: {
    color: "#1e56a8",
    fontWeight: "700",
    fontSize: 13,
  },
  body: {
    flex: 1,
    padding: 16,
    gap: 12,
  },
  sectionRow: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "700",
    color: "#16325c",
  },
  netDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
  },
  grid: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 12,
    paddingBottom: 24,
  },
});