import AsyncStorage from "@react-native-async-storage/async-storage";
import { LinearGradient } from "expo-linear-gradient";
import { StatusBar } from "expo-status-bar";
import React, { useEffect, useMemo, useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Pressable,
  SafeAreaView,
  ScrollView,
  Share,
  StyleSheet,
  Switch,
  Text,
  TextInput,
  View,
  useWindowDimensions,
} from "react-native";
import {
  Activity,
  Apple,
  Bell,
  Bot,
  Camera,
  Check,
  ChevronRight,
  CircleUserRound,
  Download,
  Droplets,
  Footprints,
  HeartPulse,
  Home,
  Lightbulb,
  Minus,
  Moon,
  Plus,
  Scale,
  Send,
  ShieldCheck,
  Sparkles,
  Sprout,
  TrendingUp,
  UserRound,
  Utensils,
} from "lucide-react-native";

type LucideIcon = any;

type Tab = "today" | "journal" | "progress" | "coach" | "profile";
type Entry = {
  date: string;
  iso?: string;
  weight: number;
  water: number;
  steps: number;
  glucose?: number;
  sleep?: number;
  meals?: number;
  mood?: string;
};
type ProfileData = {
  name: string;
  goal: string;
  journey: string;
  glucoseUnit: "mg/dL" | "mmol/L";
  reminders: boolean;
  complete: boolean;
};
type ChatMessage = { id: string; role: "user" | "assistant"; content: string };
const C = {
  ink: "#15211c",
  muted: "#637169",
  cream: "#f6f7f2",
  white: "#fff",
  green: "#1d6b50",
  mint: "#dcefe5",
  coral: "#ef835f",
  yellow: "#f4d58d",
  line: "#e5e9e3",
};
const seed: Entry[] = [
  { date: "Lun", weight: 91.4, water: 1500, steps: 6100, glucose: 112 },
  { date: "Mar", weight: 91.2, water: 1800, steps: 7400, glucose: 108 },
  { date: "Mer", weight: 91.1, water: 1600, steps: 6900, glucose: 110 },
  { date: "Jeu", weight: 90.9, water: 2000, steps: 8200, glucose: 105 },
  { date: "Ven", weight: 90.8, water: 2100, steps: 8600, glucose: 104 },
  { date: "Sam", weight: 90.7, water: 1750, steps: 7200, glucose: 107 },
  { date: "Auj.", weight: 90.6, water: 1250, steps: 6240, glucose: 103 },
];

function Card({ children, style }: any) {
  return <View style={[s.card, style]}>{children}</View>;
}
function Pill({ children, tone = "green" }: any) {
  return (
    <View
      style={[
        s.pill,
        { backgroundColor: tone === "coral" ? "#fff0eb" : C.mint },
      ]}
    >
      <Text
        style={[s.pillText, { color: tone === "coral" ? "#9b432a" : C.green }]}
      >
        {children}
      </Text>
    </View>
  );
}
function IconTile({
  icon: Icon,
  color = C.green,
  bg = C.mint,
  size = 22,
}: any) {
  return (
    <View style={[s.iconTile, { backgroundColor: bg }]}>
      <Icon size={size} color={color} strokeWidth={2.2} />
    </View>
  );
}
function Metric({ icon, label, value, sub, onPress }: any) {
  const content = (
    <>
      <IconTile icon={icon} />
      <Text style={s.metricLabel}>{label}</Text>
      <Text style={s.metricValue}>{value}</Text>
      <Text style={s.metricSub}>{sub}</Text>
    </>
  );
  return onPress ? (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={`${label}, ${value}. Ajouter`}
      onPress={onPress}
      style={({ pressed }) => [s.metric, pressed && s.pressed]}
    >
      {content}
    </Pressable>
  ) : (
    <View accessibilityLabel={`${label}, ${value}, ${sub}`} style={s.metric}>
      {content}
    </View>
  );
}
function ProgressBar({ value, color = C.green }: any) {
  return (
    <View style={s.track}>
      <View
        style={[
          s.fill,
          { width: `${Math.min(value, 100)}%`, backgroundColor: color },
        ]}
      />
    </View>
  );
}
function Nav({ tab, setTab }: any) {
  const items: any[] = [
    ["today", Home, "Aujourd’hui"],
    ["journal", Plus, "Journal"],
    ["progress", TrendingUp, "Progrès"],
    ["coach", Sparkles, "Coach"],
    ["profile", CircleUserRound, "Profil"],
  ];
  return (
    <View accessibilityRole="tablist" style={s.nav}>
      {items.map(([id, Icon, label]) => {
        const active = tab === id;
        return (
          <Pressable
            accessibilityLabel={label}
            accessibilityRole="tab"
            accessibilityState={{ selected: active }}
            key={id}
            onPress={() => setTab(id)}
            style={({ pressed }) => [
              s.navItem,
              active && s.navItemActive,
              pressed && s.pressed,
            ]}
          >
            <Icon
              size={22}
              color={active ? C.green : "#829087"}
              strokeWidth={active ? 2.6 : 2}
            />
            <Text style={[s.navLabel, active && s.active]}>{label}</Text>
          </Pressable>
        );
      })}
    </View>
  );
}

export default function App() {
  const [tab, setTab] = useState<Tab>("today");
  const [entries, setEntries] = useState(seed);
  const [water, setWater] = useState(1250);
  const [steps, setSteps] = useState(6240);
  const [weight, setWeight] = useState("90.6");
  const [glucose, setGlucose] = useState("103");
  const [sleep, setSleep] = useState("7.2");
  const [meals, setMeals] = useState(2);
  const [mood, setMood] = useState("🙂");
  const [saved, setSaved] = useState(false);
  const [loaded, setLoaded] = useState(false);
  const [profile, setProfile] = useState<ProfileData>({
    name: "",
    goal: "Retrouver mon équilibre",
    journey: "Prévention",
    glucoseUnit: "mg/dL",
    reminders: false,
    complete: false,
  });
  const { width } = useWindowDimensions();
  useEffect(() => {
    AsyncStorage.getItem("metabloom-v2")
      .then((v) => {
        if (v) {
          const d = JSON.parse(v);
          setEntries(
            Array.isArray(d.entries) && d.entries.length ? d.entries : seed,
          );
          setWater(typeof d.water === "number" ? d.water : 1250);
          setSteps(typeof d.steps === "number" ? d.steps : 6240);
          setProfile(d.profile || profile);
        }
      })
      .catch(() => {})
      .finally(() => setLoaded(true));
  }, []);
  useEffect(() => {
    if (loaded)
      AsyncStorage.setItem(
        "metabloom-v2",
        JSON.stringify({ entries, water, steps, profile }),
      ).catch(() => {});
  }, [entries, water, steps, profile, loaded]);
  const score = Math.round(
    (Math.min(water / 2000, 1) + Math.min(steps / 8000, 1) + 0.82 + 0.75) * 25,
  );
  const save = () => {
    const w = parseFloat(weight.replace(",", "."));
    const g = parseFloat(glucose.replace(",", "."));
    const sl = parseFloat(sleep.replace(",", "."));
    if (!Number.isFinite(w) || w < 30 || w > 300) {
      Alert.alert(
        "Valeur à vérifier",
        "Saisis un poids compris entre 30 et 300 kg.",
      );
      return;
    }
    const glucoseBounds =
      profile.glucoseUnit === "mmol/L" ? [1.1, 33.3] : [20, 600];
    if (
      glucose.trim() &&
      (!Number.isFinite(g) || g < glucoseBounds[0] || g > glucoseBounds[1])
    ) {
      Alert.alert(
        "Valeur à vérifier",
        "La glycémie saisie semble hors de la plage de saisie autorisée. Vérifie l’unité et la valeur.",
      );
      return;
    }
    if (!Number.isFinite(sl) || sl < 0 || sl > 24) {
      Alert.alert(
        "Valeur à vérifier",
        "Le sommeil doit être compris entre 0 et 24 heures.",
      );
      return;
    }
    const now = new Date();
    setEntries((x) => [
      ...x.slice(-29),
      {
        date: "Auj.",
        iso: now.toISOString(),
        weight: w,
        water,
        steps,
        glucose: Number.isFinite(g) ? g : undefined,
        sleep: sl,
        meals,
        mood,
      },
    ]);
    setSaved(true);
    setTimeout(() => setSaved(false), 2200);
  };
  const reset = () => {
    setEntries(seed);
    setWater(1250);
    setSteps(6240);
    setProfile({ ...profile, complete: false });
    AsyncStorage.removeItem("metabloom-v2");
  };
  const content = useMemo(
    () =>
      tab === "today" ? (
        <Today
          name={profile.name}
          score={score}
          water={water}
          setWater={setWater}
          steps={steps}
          setSteps={setSteps}
          go={setTab}
        />
      ) : tab === "journal" ? (
        <Journal
          weight={weight}
          setWeight={setWeight}
          glucose={glucose}
          setGlucose={setGlucose}
          glucoseUnit={profile.glucoseUnit}
          water={water}
          setWater={setWater}
          steps={steps}
          setSteps={setSteps}
          sleep={sleep}
          setSleep={setSleep}
          meals={meals}
          setMeals={setMeals}
          mood={mood}
          setMood={setMood}
          save={save}
          saved={saved}
        />
      ) : tab === "progress" ? (
        <Progress entries={entries} />
      ) : tab === "coach" ? (
        <Coach journey={profile.journey} />
      ) : (
        <Profile
          profile={profile}
          setProfile={setProfile}
          entries={entries}
          reset={reset}
        />
      ),
    [
      tab,
      score,
      water,
      steps,
      weight,
      glucose,
      sleep,
      meals,
      mood,
      saved,
      entries,
      profile,
    ],
  );
  if (!loaded) return <SafeAreaView style={s.safe} />;
  if (!profile.complete)
    return <Onboarding profile={profile} setProfile={setProfile} />;
  return (
    <SafeAreaView style={s.safe}>
      <StatusBar style="dark" />
      <View style={[s.shell, { maxWidth: width > 900 ? 1120 : 680 }]}>
        {content}
        <Nav tab={tab} setTab={setTab} />
      </View>
    </SafeAreaView>
  );
}

function Onboarding({ profile, setProfile }: any) {
  const [step, setStep] = useState(0);
  const journeys: [[string, LucideIcon]] | any = [
    ["Prévention", Sprout],
    ["Perte de poids", Scale],
    ["Diabète type 2", HeartPulse],
    ["Traitement GLP-1", Sparkles],
  ];
  return (
    <SafeAreaView style={s.safe}>
      <StatusBar style="dark" />
      <ScrollView contentContainerStyle={s.onboard}>
        <View style={s.logo}>
          <Sprout size={28} color={C.white} />
        </View>
        <Text style={s.eyebrow}>BIENVENUE SUR METABLOOM</Text>
        <Text style={s.onboardTitle}>
          {step === 0
            ? "Prenons soin de toi, simplement."
            : "Quel parcours te ressemble ?"}
        </Text>
        <Text style={s.lead}>
          {step === 0
            ? "Quelques informations suffisent pour personnaliser ton expérience. Tu gardes le contrôle de tes données."
            : "Tu pourras modifier ce choix à tout moment. MetaBloom ne pose aucun diagnostic."}
        </Text>
        {step === 0 ? (
          <>
            <Text style={s.inputLabel}>
              Comment souhaites-tu être appelé·e ?
            </Text>
            <View style={s.inputRow}>
              <TextInput
                accessibilityLabel="Prénom ou pseudonyme"
                placeholder="Prénom ou pseudonyme"
                value={profile.name}
                onChangeText={(name) => setProfile({ ...profile, name })}
                style={s.input}
              />
            </View>
            {!profile.name.trim() && (
              <Text style={s.helper}>
                Ce nom permettra de personnaliser ton accueil.
              </Text>
            )}
            <Text style={s.inputLabel}>Ton objectif principal</Text>
            <View style={s.inputRow}>
              <TextInput
                accessibilityLabel="Objectif principal"
                value={profile.goal}
                onChangeText={(goal) => setProfile({ ...profile, goal })}
                style={s.input}
              />
            </View>
          </>
        ) : (
          <View style={{ gap: 10 }}>
            {journeys.map(([j, Icon]: [string, LucideIcon]) => (
              <Pressable
                key={j}
                accessibilityRole="radio"
                accessibilityState={{ selected: profile.journey === j }}
                onPress={() => setProfile({ ...profile, journey: j })}
                style={({ pressed }) => [
                  s.choice,
                  profile.journey === j && s.choiceActive,
                  pressed && s.pressed,
                ]}
              >
                <IconTile icon={Icon} />
                <View style={{ flex: 1 }}>
                  <Text style={s.tipTitle}>{j}</Text>
                  <Text style={s.body}>
                    Conseils éducatifs et habitudes adaptés
                  </Text>
                </View>
                {profile.journey === j ? (
                  <Check size={22} color={C.green} />
                ) : (
                  <View style={{ width: 22 }} />
                )}
              </Pressable>
            ))}
          </View>
        )}
        <Card style={s.safety}>
          <Text style={s.tipTag}>À SAVOIR</Text>
          <Text style={s.body}>
            MetaBloom est un outil de bien-être. Il ne remplace pas un
            professionnel de santé et ne modifie jamais un traitement.
          </Text>
        </Card>
        <Pressable
          disabled={step === 0 && !profile.name.trim()}
          onPress={() =>
            step === 0 ? setStep(1) : setProfile({ ...profile, complete: true })
          }
          style={({ pressed }) => [
            s.primary,
            step === 0 && !profile.name.trim() && { opacity: 0.4 },
            pressed && s.pressed,
          ]}
        >
          <Text style={s.primaryText}>
            {step === 0 ? "Continuer" : "Accepter et commencer"}
          </Text>
        </Pressable>
        {step === 1 && (
          <Pressable onPress={() => setStep(0)} style={s.secondary}>
            <Text style={s.secondaryText}>Retour</Text>
          </Pressable>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

function Header({ eyebrow, title, right }: any) {
  return (
    <View style={s.header}>
      <View style={s.headerCopy}>
        <Text style={s.eyebrow}>{eyebrow}</Text>
        <Text style={s.title}>{title}</Text>
      </View>
      {right && <View style={s.headerAction}>{right}</View>}
    </View>
  );
}
function Today({ name, score, water, setWater, steps, setSteps, go }: any) {
  const date = new Intl.DateTimeFormat("fr-FR", {
    weekday: "long",
    day: "numeric",
    month: "long",
  })
    .format(new Date())
    .toUpperCase();
  return (
    <ScrollView
      contentContainerStyle={s.page}
      showsVerticalScrollIndicator={false}
    >
      <Header
        eyebrow={date}
        title={`Bonjour ${name}`}
        right={
          <View style={s.avatar}>
            <Text style={s.avatarText}>{name[0]?.toUpperCase()}</Text>
          </View>
        }
      />
      <LinearGradient colors={["#1d6b50", "#2d8063"]} style={s.hero}>
        <View style={{ flex: 1 }}>
          <Pill>Aujourd’hui</Pill>
          <Text style={s.heroTitle}>Chaque petit pas compte.</Text>
          <Text style={s.heroText}>
            Tu avances à ton rythme, sans pression. Encore une action douce pour
            compléter ta journée.
          </Text>
          <Pressable onPress={() => go("journal")} style={s.heroButton}>
            <Text style={s.heroButtonText}>Ajouter une donnée →</Text>
          </Pressable>
        </View>
        <View style={s.ring}>
          <Text style={s.ringBig}>{score}</Text>
          <Text style={s.ringSmall}>/ 100</Text>
        </View>
      </LinearGradient>
      <View style={s.sectionHead}>
        <Text style={s.h2}>Mes essentiels</Text>
        <Text style={s.caption}>Objectifs ajustables</Text>
      </View>
      <View style={s.grid}>
        <Metric
          icon={Droplets}
          label="Hydratation"
          value={`${water / 1000} L`}
          sub="sur 2 L"
          onPress={() => setWater((x: number) => Math.min(x + 250, 2500))}
        />
        <Metric
          icon={Footprints}
          label="Mouvement"
          value={steps.toLocaleString("fr-FR")}
          sub="sur 8 000 pas"
          onPress={() => setSteps((x: number) => x + 500)}
        />
        <Metric
          icon={Utensils}
          label="Repas équilibrés"
          value="2 / 3"
          sub="très bien"
        />
        <Metric icon={Moon} label="Sommeil" value="7 h 12" sub="objectif 8 h" />
      </View>
      <Card style={s.tip}>
        <IconTile icon={Lightbulb} bg={C.yellow} />
        <View style={{ flex: 1 }}>
          <Text style={s.tipTag}>PETIT CONSEIL DU JOUR</Text>
          <Text style={s.tipTitle}>
            Une marche de 10 minutes après le repas ?
          </Text>
          <Text style={s.body}>
            Un peu de mouvement aide à se sentir mieux. Adapte toujours l’effort
            à ta situation.
          </Text>
        </View>
      </Card>
      <Text style={s.disclaimer}>
        MetaBloom accompagne vos habitudes. Il ne remplace ni un diagnostic, ni
        un professionnel de santé.
      </Text>
    </ScrollView>
  );
}

function Journal({
  weight,
  setWeight,
  glucose,
  setGlucose,
  glucoseUnit,
  water,
  setWater,
  steps,
  setSteps,
  sleep,
  setSleep,
  meals,
  setMeals,
  mood,
  setMood,
  save,
  saved,
}: any) {
  return (
    <ScrollView
      contentContainerStyle={s.page}
      keyboardShouldPersistTaps="handled"
    >
      <Header
        eyebrow="SUIVI COMPLET"
        title="Mon journal"
        right={<Pill>Hors ligne</Pill>}
      />
      <Text style={s.lead}>
        Le poids et le sommeil sont nécessaires pour enregistrer la journée. Le
        reste est facultatif.
      </Text>
      <Card>
        <Text style={s.h2}>Mesures du jour</Text>
        <Text style={s.inputLabel}>Poids</Text>
        <View style={s.inputRow}>
          <TextInput
            accessibilityLabel="Poids en kilogrammes, requis"
            value={weight}
            onChangeText={setWeight}
            keyboardType="decimal-pad"
            style={s.input}
          />
          <Text style={s.unit}>kg</Text>
        </View>
        <Text style={s.inputLabel}>
          Glycémie <Text style={s.optional}>facultatif · saisie manuelle</Text>
        </Text>
        <View style={s.inputRow}>
          <TextInput
            accessibilityLabel="Glycémie facultative"
            value={glucose}
            onChangeText={setGlucose}
            keyboardType="decimal-pad"
            style={s.input}
          />
          <Text style={s.unit}>{glucoseUnit}</Text>
        </View>
        <Text style={s.helper}>
          Ces valeurs servent uniquement à ton suivi personnel. Aucune
          interprétation médicale n’est fournie.
        </Text>
      </Card>
      <Card>
        <Text style={s.h2}>Habitudes</Text>
        <Stepper
          icon="💧"
          label="Eau"
          value={`${water} ml`}
          minus={() => setWater(Math.max(0, water - 250))}
          plus={() => setWater(water + 250)}
        />
        <Stepper
          icon="👟"
          label="Pas"
          value={steps.toLocaleString("fr-FR")}
          minus={() => setSteps(Math.max(0, steps - 500))}
          plus={() => setSteps(steps + 500)}
        />
      </Card>
      <Card>
        <Text style={s.h2}>Bien-être</Text>
        <Text style={s.inputLabel}>Sommeil</Text>
        <View style={s.inputRow}>
          <TextInput
            accessibilityLabel="Durée de sommeil"
            value={sleep}
            onChangeText={setSleep}
            keyboardType="decimal-pad"
            style={s.input}
          />
          <Text style={s.unit}>heures</Text>
        </View>
        <Text style={s.inputLabel}>Repas équilibrés</Text>
        <View style={s.segment}>
          {[0, 1, 2, 3].map((n) => (
            <Pressable
              accessibilityLabel={`${n} repas équilibrés`}
              key={n}
              onPress={() => setMeals(n)}
              style={[s.segmentItem, meals === n && s.segmentActive]}
            >
              <Text style={[s.segmentText, meals === n && { color: C.white }]}>
                {n}
              </Text>
            </Pressable>
          ))}
        </View>
        <Text style={s.inputLabel}>Humeur</Text>
        <View style={s.segment}>
          {["😔", "😐", "🙂", "😄"].map((x) => (
            <Pressable
              accessibilityLabel={`Humeur ${x}`}
              key={x}
              onPress={() => setMood(x)}
              style={[s.segmentItem, mood === x && s.segmentActive]}
            >
              <Text style={{ fontSize: 21 }}>{x}</Text>
            </Pressable>
          ))}
        </View>
      </Card>
      <Card style={s.scan}>
        <IconTile icon={Camera} bg="#fff0d7" color="#9b6327" />
        <Text style={s.tipTag}>REPAS</Text>
        <Text style={s.tipTitle}>Scanner ou photographier un repas</Text>
        <Text style={s.body}>
          La confirmation des aliments restera toujours nécessaire. L’analyse
          automatique arrivera avec une base nutritionnelle validée.
        </Text>
      </Card>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={
          saved ? "Journée enregistrée" : "Enregistrer la journée"
        }
        onPress={save}
        style={({ pressed }) => [s.primary, pressed && s.pressed]}
      >
        {saved && <Check size={20} color={C.white} />}
        <Text style={s.primaryText}>
          {saved ? "Journée enregistrée" : "Enregistrer la journée"}
        </Text>
      </Pressable>
    </ScrollView>
  );
}
function Stepper({ icon, label, value, minus, plus }: any) {
  const Icon = icon === "💧" ? Droplets : Footprints;
  return (
    <View style={s.stepper}>
      <IconTile icon={Icon} />
      <View style={{ flexGrow: 1, flexShrink: 1, minWidth: 70 }}>
        <Text style={s.metricLabel}>{label}</Text>
        <Text style={s.stepValue}>{value}</Text>
      </View>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={`Diminuer ${label}`}
        onPress={minus}
        style={({ pressed }) => [s.stepBtn, pressed && s.pressed]}
      >
        <Minus size={20} color={C.green} />
      </Pressable>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel={`Augmenter ${label}`}
        onPress={plus}
        style={({ pressed }) => [s.stepBtn, pressed && s.pressed]}
      >
        <Plus size={20} color={C.green} />
      </Pressable>
    </View>
  );
}

function Progress({ entries }: any) {
  const recent: Entry[] = entries.slice(-7);
  if (recent.length === 0)
    return (
      <ScrollView contentContainerStyle={s.page}>
        <Header eyebrow="MES TENDANCES" title="Mes progrès" />
        <Card style={s.empty}>
          <IconTile icon={TrendingUp} />
          <Text style={s.tipTitle}>Tes tendances apparaîtront ici</Text>
          <Text style={s.body}>
            Ajoute au moins deux journées pour suivre ton évolution, sans
            pression.
          </Text>
        </Card>
      </ScrollView>
    );
  const weights = recent.map((e) => e.weight).filter(Number.isFinite);
  const min = Math.min(...weights);
  const max = Math.max(...weights);
  const avg = (key: "water" | "steps") =>
    Math.round(
      recent.reduce((a, e) => a + (Number(e[key]) || 0), 0) / recent.length,
    );
  const rawDelta =
    recent.length > 1 ? recent.at(-1)!.weight - recent[0].weight : 0;
  return (
    <ScrollView contentContainerStyle={s.page}>
      <Header
        eyebrow="7 DERNIERS JOURS"
        title="Mes progrès"
        right={
          <Pill tone="coral">
            {rawDelta <= 0 ? "Baisse" : "Hausse"}{" "}
            {Math.abs(rawDelta).toFixed(1).replace(".", ",")} kg
          </Pill>
        }
      />
      <Text style={s.lead}>Observe les tendances, pas la perfection.</Text>
      <Card>
        <View style={s.sectionHead}>
          <View style={{ flex: 1 }}>
            <Text style={s.metricLabel}>Tendance de poids</Text>
            <Text style={s.bigNumber}>
              {recent.at(-1)!.weight} <Text style={s.bigUnit}>kg</Text>
            </Text>
          </View>
          <Pill>Données personnelles</Pill>
        </View>
        <View style={s.chart}>
          {recent.map((e, i) => (
            <View key={`${e.date}-${i}`} style={s.barCol}>
              <Text style={s.barValue}>{e.weight}</Text>
              <View
                style={[
                  s.bar,
                  { height: 58 + ((max - e.weight) / (max - min || 1)) * 55 },
                ]}
              />
              <Text style={s.barLabel}>{e.date}</Text>
            </View>
          ))}
        </View>
      </Card>
      <View style={s.grid}>
        <Card style={s.stat}>
          <IconTile icon={Droplets} />
          <Text style={s.bigNumber}>
            {(avg("water") / 1000).toFixed(1).replace(".", ",")} L
          </Text>
          <Text style={s.body}>moyenne d’eau</Text>
        </Card>
        <Card style={s.stat}>
          <IconTile icon={Footprints} />
          <Text style={s.bigNumber}>
            {avg("steps").toLocaleString("fr-FR")}
          </Text>
          <Text style={s.body}>pas en moyenne</Text>
        </Card>
      </View>
      <Card style={s.insight}>
        <Text style={s.tipTag}>À RETENIR</Text>
        <Text style={s.tipTitle}>Une semaine régulière 🌱</Text>
        <Text style={s.body}>
          Tu as bougé au moins 6 000 pas chaque jour. Cette régularité compte
          davantage qu’une journée parfaite.
        </Text>
      </Card>
    </ScrollView>
  );
}

function Coach({ journey }: any) {
  const lessons: [[LucideIcon, string, string]] | any = [
    [Utensils, "Composer une assiette rassasiante", "4 min"],
    [Footprints, "Bouger après un repas, à ton rythme", "3 min"],
    [Lightbulb, "Sortir du tout ou rien", "5 min"],
  ];
  return (
    <ScrollView
      contentContainerStyle={s.page}
      keyboardShouldPersistTaps="handled"
    >
      <Header
        eyebrow="COACHING PERSONNALISÉ"
        title="Peg, ton coach IA"
        right={<Pill>{journey}</Pill>}
      />
      <PegChat journey={journey} />
      <Text style={s.h2}>Pour aller plus loin</Text>
      {lessons.map(([Icon, title, duration]: [LucideIcon, string, string]) => (
        <Pressable
          key={title}
          accessibilityRole="button"
          accessibilityLabel={`${title}, ${duration}`}
          style={({ pressed }) => [s.card, s.lesson, pressed && s.pressed]}
        >
          <IconTile icon={Icon} />
          <View style={s.flexCopy}>
            <Text style={s.tipTitle}>{title}</Text>
            <Text style={s.body}>{duration} · contenu éducatif</Text>
          </View>
          <ChevronRight size={22} color={C.muted} />
        </Pressable>
      ))}
      <Card>
        <IconTile icon={Apple} />
        <Text style={s.tipTag}>CONNEXIONS SANTÉ</Text>
        <Text style={s.tipTitle}>Apple Santé & Health Connect</Text>
        <Text style={s.body}>
          Disponible prochainement après activation des autorisations natives.
        </Text>
      </Card>
    </ScrollView>
  );
}

function PegChat({ journey }: { journey: string }) {
  const apiBase = (
    process.env.EXPO_PUBLIC_API_URL || "http://localhost:8000"
  ).replace(/\/$/, "");
  const [messages, setMessages] = useState<ChatMessage[]>([
    {
      id: "welcome",
      role: "assistant",
      content: `Bonjour, je suis Peg. Je peux t’aider à trouver de petites actions adaptées à ton parcours ${journey}, sans jugement. De quoi aimerais-tu parler aujourd’hui ?`,
    },
  ]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const suggestions = [
    "Une idée de petit-déjeuner",
    "Comment rester motivé·e ?",
    "Une action simple aujourd’hui",
  ];
  const send = async (text = input) => {
    const clean = text.trim();
    if (!clean || loading) return;
    const userMessage: ChatMessage = {
      id: `u-${Date.now()}`,
      role: "user",
      content: clean,
    };
    const next = [...messages, userMessage];
    setMessages(next);
    setInput("");
    setLoading(true);
    try {
      const createGuestToken = async () => {
        const guestResponse = await fetch(`${apiBase}/auth/guest`, {
          method: "POST",
        });
        if (!guestResponse.ok) throw new Error("session indisponible");
        const guest = await guestResponse.json();
        const guestToken = String(guest.access_token || "");
        if (!guestToken) throw new Error("jeton absent");
        await AsyncStorage.setItem("metabloom-auth-token", guestToken);
        return guestToken;
      };
      let token = await AsyncStorage.getItem("metabloom-auth-token");
      if (!token) {
        token = await createGuestToken();
      }
      const requestPeg = (accessToken: string) => fetch(`${apiBase}/coach/chat`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${accessToken}`,
        },
        body: JSON.stringify({
          message: clean,
          journey,
          history: next
            .slice(0, -1)
            .slice(-8)
            .map(({ role, content }) => ({ role, content })),
        })
      });
      let response = await requestPeg(token);
      if (response.status === 401) {
        await AsyncStorage.removeItem("metabloom-auth-token");
        token = await createGuestToken();
        response = await requestPeg(token);
      }
      if (!response.ok) throw new Error("service indisponible");
      const data = await response.json();
      const content = String(data.reply || data.message || "").trim();
      if (!content) throw new Error("réponse vide");
      setMessages((x) => [
        ...x,
        { id: `a-${Date.now()}`, role: "assistant", content },
      ]);
    } catch {
      setMessages((x) => [
        ...x,
        {
          id: `e-${Date.now()}`,
          role: "assistant",
          content:
            "Je ne peux pas joindre le moteur IA pour le moment. Tu peux réessayer plus tard ou consulter les micro-leçons ci-dessous. En cas de symptôme ou d’urgence, contacte un professionnel ou les services d’urgence.",
        },
      ]);
    } finally {
      setLoading(false);
    }
  };
  return (
    <View style={s.pegCard}>
      <View style={s.pegHeader}>
        <View style={s.pegAvatar}>
          <Bot size={24} color={C.white} />
        </View>
        <View style={s.flexCopy}>
          <Text style={s.pegName}>Peg</Text>
          <Text style={s.pegStatus}>Coach bien-être · conseils éducatifs</Text>
        </View>
        <ShieldCheck size={21} color={C.green} />
      </View>
      <View style={s.chatList}>
        {messages.map((message) => (
          <View
            key={message.id}
            style={[s.messageRow, message.role === "user" && s.messageRowUser]}
          >
            <View
              style={[
                s.messageAvatar,
                message.role === "user" && s.messageAvatarUser,
              ]}
            >
              {message.role === "assistant" ? (
                <Bot size={16} color={C.green} />
              ) : (
                <UserRound size={16} color="#7659a6" />
              )}
            </View>
            <View style={[s.bubble, message.role === "user" && s.bubbleUser]}>
              <Text
                style={[
                  s.bubbleText,
                  message.role === "user" && s.bubbleTextUser,
                ]}
              >
                {message.content}
              </Text>
            </View>
          </View>
        ))}
        {loading && (
          <View style={s.typing}>
            <ActivityIndicator color={C.green} />
            <Text style={s.pegStatus}>Peg réfléchit…</Text>
          </View>
        )}
      </View>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={s.suggestions}
      >
        {suggestions.map((item) => (
          <Pressable
            key={item}
            accessibilityRole="button"
            onPress={() => send(item)}
            style={({ pressed }) => [s.suggestion, pressed && s.pressed]}
          >
            <Text style={s.suggestionText}>{item}</Text>
          </Pressable>
        ))}
      </ScrollView>
      <View style={s.composer}>
        <TextInput
          accessibilityLabel="Message pour Peg"
          placeholder="Écris à Peg…"
          placeholderTextColor="#7b8880"
          value={input}
          onChangeText={setInput}
          multiline
          maxLength={500}
          style={s.chatInput}
        />
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Envoyer à Peg"
          disabled={!input.trim() || loading}
          onPress={() => send()}
          style={({ pressed }) => [
            s.sendButton,
            (!input.trim() || loading) && s.sendDisabled,
            pressed && s.pressed,
          ]}
        >
          <Send size={20} color={C.white} />
        </Pressable>
      </View>
      <Text style={s.pegDisclaimer}>
        Peg peut se tromper. Elle ne remplace pas un professionnel de santé et
        ne donne aucun diagnostic ni conseil de traitement.
      </Text>
    </View>
  );
}

function Profile({ profile, setProfile, entries, reset }: any) {
  const exportData = async () => {
    const csv = [
      "date,poids,eau_ml,pas,glycemie",
      ...entries.map((e: Entry) =>
        [e.iso || e.date, e.weight, e.water, e.steps, e.glucose || ""].join(
          ",",
        ),
      ),
    ].join("\n");
    await Share.share({ title: "Export MetaBloom", message: csv });
  };
  return (
    <ScrollView contentContainerStyle={s.page}>
      <Header eyebrow="MON ESPACE" title="Profil & sécurité" />
      <Card style={s.profile}>
        <View style={s.avatarLarge}>
          <Text style={s.avatarLargeText}>
            {profile.name[0]?.toUpperCase()}
          </Text>
        </View>
        <View style={{ flex: 1 }}>
          <Text style={s.tipTitle}>{profile.name}</Text>
          <Text style={s.body}>
            {profile.goal} · {profile.journey}
          </Text>
        </View>
      </Card>
      <Text style={s.h2}>Préférences</Text>
      <Card style={s.setting}>
        <IconTile icon={Activity} />
        <View style={{ flex: 1 }}>
          <Text style={s.metricLabel}>Unité glycémie</Text>
          <Text style={s.body}>{profile.glucoseUnit}</Text>
        </View>
        <Pressable
          accessibilityRole="button"
          accessibilityLabel="Changer l’unité de glycémie"
          onPress={() =>
            setProfile({
              ...profile,
              glucoseUnit: profile.glucoseUnit === "mg/dL" ? "mmol/L" : "mg/dL",
            })
          }
          style={({ pressed }) => [s.smallButton, pressed && s.pressed]}
        >
          <Text style={s.smallButtonText}>Changer</Text>
        </Pressable>
      </Card>
      <Card style={s.setting}>
        <IconTile icon={Bell} />
        <View style={{ flex: 1 }}>
          <Text style={s.metricLabel}>Rappels doux</Text>
          <Text style={s.body}>
            {profile.reminders ? "Activés à 19 h" : "Désactivés"}
          </Text>
        </View>
        <Switch
          accessibilityLabel="Activer les rappels"
          value={profile.reminders}
          onValueChange={(reminders) => setProfile({ ...profile, reminders })}
          trackColor={{ true: C.green }}
        />
      </Card>
      <Pressable
        accessibilityRole="button"
        accessibilityLabel="Exporter mes données CSV"
        onPress={exportData}
        style={({ pressed }) => [s.secondaryCard, pressed && s.pressed]}
      >
        <Download size={20} color={C.green} />
        <Text style={s.secondaryCardText}>Exporter mes données CSV</Text>
      </Pressable>
      <Card style={s.safety}>
        <IconTile icon={ShieldCheck} />
        <Text style={s.tipTag}>SÉCURITÉ & CONFIDENTIALITÉ</Text>
        <Text style={s.tipTitle}>Tes données restent sous ton contrôle.</Text>
        <Text style={s.body}>
          Tu peux les exporter ou les supprimer à tout moment. La
          synchronisation en ligne n’est pas activée dans cette version.
        </Text>
      </Card>
      <Pressable
        onPress={() =>
          Alert.alert(
            "Effacer les données locales ?",
            "Cette action supprime les données de cet appareil et réinitialise l’application.",
            [
              { text: "Annuler" },
              { text: "Effacer", style: "destructive", onPress: reset },
            ],
          )
        }
        style={s.danger}
      >
        <Text style={s.dangerText}>Effacer les données de cet appareil</Text>
      </Pressable>
      <Text style={s.disclaimer}>
        En cas de malaise ou d’urgence, contactez immédiatement les services
        d’urgence. MetaBloom ne fournit pas de conseil thérapeutique.
      </Text>
    </ScrollView>
  );
}

const s = StyleSheet.create({
  safe: { flex: 1, backgroundColor: C.cream },
  shell: { flex: 1, width: "100%", alignSelf: "center" },
  page: { padding: 20, paddingTop: 26, paddingBottom: 140, gap: 16 },
  pressed: { opacity: 0.72, transform: [{ scale: 0.98 }] },
  header: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 12,
    marginBottom: 4,
  },
  headerCopy: { flexGrow: 1, flexShrink: 1, minWidth: 180 },
  headerAction: { flexShrink: 1, maxWidth: "100%" },
  eyebrow: {
    fontSize: 11,
    fontWeight: "800",
    letterSpacing: 1.4,
    color: C.green,
    flexShrink: 1,
  },
  title: {
    fontSize: 28,
    lineHeight: 35,
    fontWeight: "800",
    color: C.ink,
    letterSpacing: -0.7,
    marginTop: 4,
    flexShrink: 1,
  },
  avatar: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: C.yellow,
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
  },
  avatarText: { fontWeight: "800", color: C.ink, fontSize: 17 },
  hero: {
    borderRadius: 28,
    padding: 22,
    minHeight: 230,
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 14,
    overflow: "hidden",
  },
  heroTitle: {
    fontSize: 27,
    lineHeight: 34,
    fontWeight: "800",
    color: C.white,
    marginTop: 18,
    maxWidth: 360,
    flexShrink: 1,
  },
  heroText: {
    fontSize: 14,
    lineHeight: 21,
    color: "#dcebe4",
    marginTop: 8,
    maxWidth: 400,
    flexShrink: 1,
  },
  heroButton: {
    backgroundColor: C.white,
    borderRadius: 14,
    paddingVertical: 14,
    paddingHorizontal: 16,
    alignSelf: "flex-start",
    marginTop: 18,
    minHeight: 48,
    justifyContent: "center",
    maxWidth: "100%",
  },
  heroButtonText: {
    color: C.green,
    fontWeight: "800",
    textAlign: "center",
    flexShrink: 1,
  },
  ring: {
    width: 96,
    height: 96,
    borderWidth: 8,
    borderColor: C.yellow,
    borderRadius: 50,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#ffffff13",
    flexShrink: 0,
  },
  ringBig: { color: C.white, fontWeight: "900", fontSize: 28 },
  ringSmall: { color: "#dcebe4", fontSize: 11 },
  pill: {
    borderRadius: 99,
    paddingHorizontal: 11,
    paddingVertical: 6,
    alignSelf: "flex-start",
    maxWidth: "100%",
    flexShrink: 1,
  },
  pillText: { fontSize: 11, lineHeight: 16, fontWeight: "800", flexShrink: 1 },
  sectionHead: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 6,
  },
  h2: {
    fontSize: 19,
    lineHeight: 25,
    fontWeight: "800",
    color: C.ink,
    flexShrink: 1,
  },
  caption: { fontSize: 12, lineHeight: 18, color: C.muted, flexShrink: 1 },
  grid: { flexDirection: "row", flexWrap: "wrap", gap: 12 },
  metric: {
    backgroundColor: C.white,
    borderRadius: 20,
    padding: 17,
    flexGrow: 1,
    flexBasis: 130,
    minWidth: 0,
    minHeight: 154,
    borderWidth: 1,
    borderColor: C.line,
  },
  iconTile: {
    width: 44,
    height: 44,
    borderRadius: 14,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 12,
    flexShrink: 0,
  },
  metricLabel: {
    fontSize: 12,
    lineHeight: 18,
    fontWeight: "700",
    color: C.muted,
    flexShrink: 1,
  },
  metricValue: {
    fontSize: 22,
    lineHeight: 29,
    fontWeight: "900",
    color: C.ink,
    marginTop: 3,
    flexShrink: 1,
  },
  metricSub: {
    fontSize: 11,
    lineHeight: 17,
    color: C.muted,
    marginTop: 3,
    flexShrink: 1,
  },
  card: {
    backgroundColor: C.white,
    borderRadius: 22,
    padding: 19,
    borderWidth: 1,
    borderColor: C.line,
    minWidth: 0,
  },
  tip: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 14,
    backgroundColor: "#fffaf0",
  },
  tipTag: {
    fontSize: 10,
    lineHeight: 16,
    fontWeight: "900",
    letterSpacing: 1.1,
    color: C.green,
    marginBottom: 6,
    flexShrink: 1,
  },
  tipTitle: {
    fontSize: 17,
    lineHeight: 23,
    fontWeight: "800",
    color: C.ink,
    marginBottom: 5,
    flexShrink: 1,
  },
  body: { fontSize: 13, lineHeight: 20, color: C.muted, flexShrink: 1 },
  disclaimer: {
    fontSize: 11,
    lineHeight: 17,
    textAlign: "center",
    color: C.muted,
    paddingHorizontal: 8,
    flexShrink: 1,
  },
  nav: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    minHeight: 86,
    backgroundColor: "#fffffffa",
    borderTopWidth: 1,
    borderColor: C.line,
    flexDirection: "row",
    alignItems: "stretch",
    paddingTop: 8,
    paddingBottom: 8,
    paddingHorizontal: 4,
  },
  navItem: {
    flex: 1,
    minWidth: 0,
    minHeight: 62,
    alignItems: "center",
    justifyContent: "center",
    gap: 4,
    borderRadius: 16,
    paddingHorizontal: 2,
  },
  navItemActive: { backgroundColor: "#edf7f1" },
  navLabel: {
    fontSize: 10,
    lineHeight: 14,
    fontWeight: "700",
    color: "#829087",
    textAlign: "center",
    flexShrink: 1,
  },
  active: { color: C.green },
  lead: {
    fontSize: 15,
    lineHeight: 23,
    color: C.muted,
    marginTop: -8,
    flexShrink: 1,
  },
  inputLabel: {
    fontSize: 13,
    lineHeight: 20,
    fontWeight: "800",
    color: C.ink,
    marginTop: 17,
    marginBottom: 7,
    flexShrink: 1,
  },
  optional: { fontWeight: "500", color: C.muted },
  inputRow: {
    minHeight: 56,
    borderWidth: 1.5,
    borderColor: "#d8ded8",
    borderRadius: 14,
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 15,
    backgroundColor: C.white,
    gap: 8,
  },
  input: {
    flexGrow: 1,
    flexShrink: 1,
    minWidth: 0,
    fontSize: 18,
    fontWeight: "800",
    color: C.ink,
    outlineStyle: "none",
  } as any,
  unit: {
    fontWeight: "700",
    color: C.muted,
    flexShrink: 0,
    textAlign: "right",
  },
  helper: {
    fontSize: 11,
    lineHeight: 17,
    color: C.muted,
    marginTop: 12,
    flexShrink: 1,
  },
  stepper: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 12,
    paddingVertical: 13,
    borderBottomWidth: 1,
    borderBottomColor: C.line,
  },
  stepValue: {
    fontSize: 17,
    lineHeight: 23,
    fontWeight: "800",
    color: C.ink,
    marginTop: 2,
    flexShrink: 1,
  },
  stepBtn: {
    width: 48,
    height: 48,
    borderRadius: 14,
    backgroundColor: C.mint,
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
  },
  stepBtnText: { fontSize: 24, color: C.green, fontWeight: "700" },
  primary: {
    backgroundColor: C.green,
    borderRadius: 16,
    minHeight: 54,
    padding: 16,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
    maxWidth: "100%",
  },
  primaryText: {
    color: C.white,
    fontSize: 15,
    lineHeight: 21,
    fontWeight: "900",
    textAlign: "center",
    flexShrink: 1,
  },
  track: {
    height: 8,
    borderRadius: 4,
    backgroundColor: "#ffffff3d",
    overflow: "hidden",
  },
  fill: { height: 8, borderRadius: 4 },
  bigNumber: {
    fontSize: 28,
    lineHeight: 36,
    fontWeight: "900",
    color: C.ink,
    marginTop: 4,
    flexShrink: 1,
  },
  bigUnit: { fontSize: 14, color: C.muted },
  chart: {
    height: 175,
    flexDirection: "row",
    alignItems: "flex-end",
    justifyContent: "space-between",
    marginTop: 20,
  },
  barCol: { flex: 1, minWidth: 0, alignItems: "center" },
  bar: {
    width: 18,
    maxWidth: "70%",
    backgroundColor: C.green,
    borderRadius: 8,
    marginVertical: 6,
  },
  barValue: { fontSize: 9, lineHeight: 13, color: C.muted },
  barLabel: {
    fontSize: 9,
    lineHeight: 13,
    color: C.muted,
    textAlign: "center",
  },
  stat: { flexGrow: 1, flexBasis: 130, minWidth: 0 },
  statIcon: { fontSize: 22 },
  empty: { alignItems: "center", paddingVertical: 34 },
  insight: { backgroundColor: C.mint },
  profile: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 15,
  },
  avatarLarge: {
    width: 62,
    height: 62,
    borderRadius: 22,
    backgroundColor: C.yellow,
    alignItems: "center",
    justifyContent: "center",
    flexShrink: 0,
  },
  avatarLargeText: { fontSize: 23, fontWeight: "900", color: C.ink },
  setting: {
    flexDirection: "row",
    flexWrap: "wrap",
    alignItems: "center",
    gap: 13,
    padding: 15,
  },
  chevron: { fontSize: 28, color: C.muted },
  safety: { backgroundColor: C.mint },
  danger: {
    minHeight: 48,
    padding: 16,
    alignItems: "center",
    justifyContent: "center",
  },
  dangerText: {
    color: "#a23d33",
    fontWeight: "800",
    textAlign: "center",
    flexShrink: 1,
  },
  onboard: {
    padding: 24,
    paddingTop: 54,
    paddingBottom: 50,
    gap: 16,
    maxWidth: 560,
    width: "100%",
    alignSelf: "center",
  },
  logo: {
    width: 58,
    height: 58,
    borderRadius: 20,
    backgroundColor: C.green,
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 8,
  },
  logoText: { color: C.white, fontSize: 28, fontWeight: "900" },
  onboardTitle: {
    fontSize: 34,
    lineHeight: 42,
    fontWeight: "900",
    color: C.ink,
    letterSpacing: -1,
    flexShrink: 1,
  },
  choice: {
    backgroundColor: C.white,
    borderWidth: 1,
    borderColor: C.line,
    borderRadius: 18,
    padding: 15,
    minHeight: 76,
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
  choiceActive: {
    borderWidth: 2,
    borderColor: C.green,
    backgroundColor: C.mint,
  },
  choiceEmoji: { fontSize: 24 },
  check: { fontSize: 18, fontWeight: "900", color: C.green },
  secondary: {
    minHeight: 48,
    padding: 14,
    alignItems: "center",
    justifyContent: "center",
  },
  secondaryText: { color: C.green, fontWeight: "800", textAlign: "center" },
  segment: { flexDirection: "row", gap: 8 },
  segmentItem: {
    minHeight: 48,
    flex: 1,
    minWidth: 0,
    borderRadius: 13,
    backgroundColor: C.cream,
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1,
    borderColor: C.line,
    paddingVertical: 8,
  },
  segmentActive: { backgroundColor: C.green, borderColor: C.green },
  segmentText: { fontWeight: "800", color: C.ink },
  scan: {
    backgroundColor: "#fff8ed",
    borderStyle: "dashed",
    borderColor: "#d8a960",
  },
  coachHero: { borderRadius: 26, padding: 22, gap: 14 },
  coachProgress: {
    fontSize: 12,
    lineHeight: 18,
    fontWeight: "700",
    color: "#eee8f7",
    flexShrink: 1,
  },
  lesson: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    minHeight: 82,
  },
  lessonIcon: {
    width: 48,
    height: 48,
    borderRadius: 15,
    backgroundColor: C.cream,
    alignItems: "center",
    justifyContent: "center",
  },
  smallButton: {
    minHeight: 44,
    paddingHorizontal: 12,
    paddingVertical: 9,
    borderRadius: 11,
    backgroundColor: C.mint,
    justifyContent: "center",
    maxWidth: "100%",
    flexShrink: 1,
  },
  smallButtonText: {
    color: C.green,
    fontWeight: "800",
    fontSize: 12,
    lineHeight: 18,
    textAlign: "center",
  },
  secondaryCard: {
    backgroundColor: C.white,
    borderRadius: 16,
    borderWidth: 1,
    borderColor: C.green,
    minHeight: 52,
    padding: 16,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  secondaryCardText: {
    color: C.green,
    fontWeight: "900",
    textAlign: "center",
    flexShrink: 1,
  },
  flexCopy: { flex: 1, minWidth: 0, flexShrink: 1 },
  pegCard: { backgroundColor: C.white, borderRadius: 24, borderWidth: 1, borderColor: C.line, overflow: "hidden" },
  pegHeader: { padding: 16, flexDirection: "row", alignItems: "center", gap: 12, borderBottomWidth: 1, borderBottomColor: C.line },
  pegAvatar: { width: 46, height: 46, borderRadius: 16, backgroundColor: "#7659a6", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  pegName: { fontSize: 18, lineHeight: 23, fontWeight: "900", color: C.ink },
  pegStatus: { fontSize: 11, lineHeight: 16, color: C.muted, flexShrink: 1 },
  chatList: { padding: 15, gap: 12, backgroundColor: "#fbfcfa" },
  messageRow: { flexDirection: "row", alignItems: "flex-end", gap: 8, maxWidth: "92%" },
  messageRowUser: { alignSelf: "flex-end", flexDirection: "row-reverse" },
  messageAvatar: { width: 28, height: 28, borderRadius: 10, backgroundColor: C.mint, alignItems: "center", justifyContent: "center", flexShrink: 0 },
  messageAvatarUser: { backgroundColor: "#eee8f7" },
  bubble: { backgroundColor: C.white, borderRadius: 16, borderBottomLeftRadius: 5, paddingHorizontal: 13, paddingVertical: 10, borderWidth: 1, borderColor: C.line, minWidth: 0, flexShrink: 1 },
  bubbleUser: { backgroundColor: "#7659a6", borderColor: "#7659a6", borderBottomLeftRadius: 16, borderBottomRightRadius: 5 },
  bubbleText: { fontSize: 14, lineHeight: 20, color: C.ink, flexShrink: 1 },
  bubbleTextUser: { color: C.white },
  typing: { flexDirection: "row", alignItems: "center", gap: 8, paddingLeft: 36 },
  suggestions: { gap: 8, paddingHorizontal: 15, paddingVertical: 12 },
  suggestion: { borderRadius: 99, borderWidth: 1, borderColor: "#cddfd5", backgroundColor: "#f4faf6", paddingHorizontal: 13, paddingVertical: 9, maxWidth: 220 },
  suggestionText: { fontSize: 12, lineHeight: 17, fontWeight: "700", color: C.green, flexShrink: 1 },
  composer: { marginHorizontal: 15, marginBottom: 10, minHeight: 54, borderWidth: 1.5, borderColor: "#d8ded8", borderRadius: 17, backgroundColor: C.white, flexDirection: "row", alignItems: "flex-end", gap: 8, padding: 6, paddingLeft: 13 },
  chatInput: { flex: 1, minWidth: 0, maxHeight: 110, fontSize: 15, lineHeight: 21, color: C.ink, paddingVertical: 9, outlineStyle: "none" } as any,
  sendButton: { width: 42, height: 42, borderRadius: 14, backgroundColor: "#7659a6", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  sendDisabled: { opacity: 0.4 },
  pegDisclaimer: { fontSize: 10, lineHeight: 15, color: C.muted, textAlign: "center", paddingHorizontal: 18, paddingBottom: 15, flexShrink: 1 },
});