import React, { useState, useRef, useCallback } from 'react';
import { View, Text, StyleSheet, Animated, Dimensions, Pressable, Modal } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import ScreenWrapper from '../components/ScreenWrapper';
import FadeIn from '../components/FadeIn';
import NovaAd from '../components/NovaAd';
import useIdentityStore from '../store/useIdentityStore';
import useHabitStore from '../store/useHabitStore';
import { colors, fonts, spacing, borderRadius } from '../utils/theme';
import { getDayPhase, formatDate } from '../utils/helpers';

// Motivational messages based on performance
function getMotivation(pct, streak) {
  if (pct >= 90) return { emoji: '🔥', msg: "You're on fire. Keep this energy!" };
  if (pct >= 70) return { emoji: '💪', msg: 'Solid progress. You are becoming someone new.' };
  if (pct >= 50) return { emoji: '🌱', msg: "Halfway there. Don't stop now." };
  if (streak >= 3) return { emoji: '⚡', msg: `${streak}-day streak! Momentum is building.` };
  if (pct >= 20) return { emoji: '🚀', msg: 'Every step forward counts. Keep going.' };
  return { emoji: '✨', msg: 'Your journey has begun. Show up today.' };
}

// Circular progress indicator
function CircleProgress({ value, max, size, color, label, icon }) {
  const pct = max > 0 ? Math.min(value / max, 1) : 0;
  const displayPct = Math.round(pct * 100);
  return (
    <View style={[cp.container, { width: size }]}>
      <View style={[cp.ring, { width: size, height: size, borderRadius: size / 2, borderColor: `${color}20` }]}>
        {/* Fill indicator */}
        <View style={[cp.fillBg, { width: size - 8, height: size - 8, borderRadius: (size - 8) / 2 }]}>
          <Text style={cp.icon}>{icon}</Text>
          <Text style={[cp.pct, { color }]}>{displayPct}%</Text>
        </View>
      </View>
      <Text style={cp.label}>{label}</Text>
      <Text style={[cp.value, { color }]}>{value}</Text>
    </View>
  );
}
const cp = StyleSheet.create({
  container: { alignItems: 'center' },
  ring: { borderWidth: 3, alignItems: 'center', justifyContent: 'center', marginBottom: 6 },
  fillBg: { backgroundColor: colors.surface, alignItems: 'center', justifyContent: 'center' },
  icon: { fontSize: 16, marginBottom: 2 },
  pct: { fontSize: fonts.sizes.sm, fontWeight: fonts.weights.bold },
  label: { color: colors.textSecondary, fontSize: 10, fontWeight: fonts.weights.medium },
  value: { fontSize: fonts.sizes.sm, fontWeight: fonts.weights.bold, marginTop: 1 },
});

const SCREEN_W = Dimensions.get('window').width;
const HEAT_PAD = spacing.md * 2 + spacing.md * 2; // scroll padding + card padding
const HEAT_GAP = 5;
const HEAT_COLS = 7;
const HEAT_CELL = Math.floor((SCREEN_W - HEAT_PAD - HEAT_GAP * (HEAT_COLS - 1)) / HEAT_COLS);

const MOOD_EMOJIS = { great: '😄', good: '🙂', okay: '😐', bad: '😔', terrible: '😞' };
const CHECK_LABELS = { yes: { text: 'Yes', color: colors.success }, almost: { text: 'Almost', color: colors.warning }, no: { text: 'No', color: colors.error } };

function HeatCell({ dayNum, log, currentDay, onPress }) {
  const check = log?.identity_check;
  const isCurrent = dayNum === currentDay;
  const isFuture = dayNum > currentDay;
  const hasData = !!check;
  const bg = check === 'yes' ? colors.success
    : check === 'almost' ? colors.warning
    : check === 'no' ? colors.error
    : isFuture ? 'rgba(28,35,69,0.4)' : colors.surfaceLight;

  const cell = (
    <View style={[hm.cell, { width: HEAT_CELL, height: HEAT_CELL, backgroundColor: bg }, isCurrent && hm.cellCurrent]}>
      <Text style={[hm.cellDay, isCurrent && hm.cellDayCurrent]}>{dayNum}</Text>
      {check && <Text style={hm.cellIcon}>{check === 'yes' ? '✓' : check === 'almost' ? '~' : '✗'}</Text>}
    </View>
  );

  if (hasData && onPress) {
    return <Pressable onPress={() => onPress(dayNum, log)} style={({ pressed }) => pressed && { opacity: 0.6 }}>{cell}</Pressable>;
  }
  return cell;
}

function WeekRow({ logs, weekNum, currentDay, onDayPress }) {
  return (
    <View style={hm.row}>
      {Array.from({ length: HEAT_COLS }, (_, i) => {
        const dayNum = weekNum * 7 + i + 1;
        if (dayNum > 40) return <View key={dayNum} style={[hm.cell, { width: HEAT_CELL, height: HEAT_CELL, backgroundColor: 'transparent' }]} />;
        const log = logs.find((l) => l.day_number === dayNum);
        return <HeatCell key={dayNum} dayNum={dayNum} log={log} currentDay={currentDay} onPress={onDayPress} />;
      })}
    </View>
  );
}

function DayDetailModal({ visible, log, onClose }) {
  if (!log) return null;
  const check = CHECK_LABELS[log.identity_check] || { text: '—', color: colors.textMuted };
  return (
    <Modal visible={visible} transparent animationType="fade" statusBarTranslucent onRequestClose={onClose}>
      <Pressable style={dm.overlay} onPress={onClose}>
        <Pressable style={dm.card} onPress={(e) => e.stopPropagation()}>
          {/* Header */}
          <View style={dm.header}>
            <Text style={dm.dayLabel}>DAY {log.day_number}</Text>
            <Text style={dm.date}>{log.date}</Text>
          </View>

          {/* Identity Check */}
          <View style={dm.row}>
            <Text style={dm.label}>Identity Check</Text>
            <Text style={[dm.value, { color: check.color }]}>{check.text}</Text>
          </View>

          {/* Mood */}
          {log.mood && (
            <View style={dm.row}>
              <Text style={dm.label}>Mood</Text>
              <Text style={dm.value}>{MOOD_EMOJIS[log.mood] || ''} {log.mood}</Text>
            </View>
          )}

          {/* AI Reflection */}
          {log.ai_title && (
            <View style={dm.aiCard}>
              <Text style={dm.aiLabel}>✦ AI Reflection</Text>
              <Text style={dm.aiTitle}>{log.ai_title}</Text>
              {log.ai_summary && <Text style={dm.aiSummary}>{log.ai_summary}</Text>}
              {log.ai_quote && <Text style={dm.aiQuote}>"{log.ai_quote}"</Text>}
            </View>
          )}

          {/* Journal entries */}
          {log.win && <JournalRow label="What went well" value={log.win} />}
          {log.struggle && <JournalRow label="What was difficult" value={log.struggle} />}
          {log.highlight && <JournalRow label="Highlight" value={log.highlight} />}
          {log.note && <JournalRow label="Reflection" value={log.note} />}

          {/* No journal data */}
          {!log.ai_title && !log.win && !log.note && (
            <Text style={dm.noData}>No journal entry for this day.</Text>
          )}

          {/* Close */}
          <Pressable style={dm.closeBtn} onPress={onClose}>
            <Text style={dm.closeBtnText}>Close</Text>
          </Pressable>
        </Pressable>
      </Pressable>
    </Modal>
  );
}

function JournalRow({ label, value }) {
  return (
    <View style={dm.journalRow}>
      <Text style={dm.journalLabel}>{label}</Text>
      <Text style={dm.journalValue}>{value}</Text>
    </View>
  );
}

const dm = StyleSheet.create({
  overlay: { flex: 1, backgroundColor: 'rgba(0,0,0,0.7)', alignItems: 'center', justifyContent: 'center', padding: spacing.lg },
  card: { backgroundColor: colors.surface, borderRadius: borderRadius.xl, padding: spacing.lg, width: '100%', maxWidth: 360, maxHeight: '80%', borderWidth: 1, borderColor: colors.border },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: spacing.lg },
  dayLabel: { color: colors.accent, fontSize: fonts.sizes.md, fontWeight: fonts.weights.bold, letterSpacing: 2 },
  date: { color: colors.textMuted, fontSize: fonts.sizes.sm },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingVertical: spacing.sm, borderBottomWidth: 1, borderBottomColor: colors.border },
  label: { color: colors.textSecondary, fontSize: fonts.sizes.sm },
  value: { color: colors.text, fontSize: fonts.sizes.sm, fontWeight: fonts.weights.semibold },
  aiCard: { backgroundColor: 'rgba(108,99,255,0.06)', borderRadius: borderRadius.md, padding: spacing.md, marginTop: spacing.md, borderWidth: 1, borderColor: 'rgba(108,99,255,0.15)' },
  aiLabel: { color: colors.primaryLight, fontSize: 10, fontWeight: fonts.weights.medium, marginBottom: spacing.sm },
  aiTitle: { color: colors.text, fontSize: fonts.sizes.md, fontWeight: fonts.weights.bold, marginBottom: spacing.xs },
  aiSummary: { color: colors.textSecondary, fontSize: fonts.sizes.sm, lineHeight: 20, marginBottom: spacing.sm },
  aiQuote: { color: colors.accent, fontSize: fonts.sizes.sm, fontStyle: 'italic', lineHeight: 20 },
  journalRow: { marginTop: spacing.md },
  journalLabel: { color: colors.textMuted, fontSize: 10, fontWeight: fonts.weights.medium, marginBottom: 3 },
  journalValue: { color: colors.textSecondary, fontSize: fonts.sizes.sm, lineHeight: 20 },
  noData: { color: colors.textMuted, fontSize: fonts.sizes.sm, fontStyle: 'italic', textAlign: 'center', marginTop: spacing.md },
  closeBtn: { marginTop: spacing.lg, backgroundColor: colors.primary, borderRadius: borderRadius.md, paddingVertical: spacing.md, alignItems: 'center' },
  closeBtnText: { color: colors.text, fontSize: fonts.sizes.md, fontWeight: fonts.weights.semibold },
});

const hm = StyleSheet.create({
  row: { flexDirection: 'row', gap: HEAT_GAP, marginBottom: HEAT_GAP },
  cell: { borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
  cellCurrent: { borderWidth: 2, borderColor: colors.accent },
  cellDay: { color: 'rgba(255,255,255,0.7)', fontSize: 10, fontWeight: fonts.weights.medium },
  cellDayCurrent: { color: colors.accent, fontWeight: fonts.weights.bold },
  cellIcon: { color: 'rgba(255,255,255,0.9)', fontSize: 8, marginTop: 1 },
});

export default function StatsScreen() {
  const identity = useIdentityStore((st) => st.identity);
  const currentDay = useIdentityStore((st) => st.currentDay);
  const loadStats = useIdentityStore((st) => st.loadStats);
  const loadDailyLogs = useIdentityStore((st) => st.loadDailyLogs);
  const habits = useHabitStore((st) => st.habits);
  const [stats, setStats] = useState(null);
  const [dailyLogs, setDailyLogs] = useState([]);
  const [loading, setLoading] = useState(true);
  const [focusCount, setFocusCount] = useState(0);
  const [selectedLog, setSelectedLog] = useState(null);
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useFocusEffect(
    useCallback(() => {
      let active = true;
      const load = async () => {
        setLoading(true);
        const [s, logs] = await Promise.all([loadStats(), loadDailyLogs()]);
        if (active) {
          setStats(s); setDailyLogs(logs); setLoading(false);
          setFocusCount((c) => c + 1);
          Animated.timing(fadeAnim, { toValue: 1, duration: 500, useNativeDriver: true }).start();
        }
      };
      load();
      return () => { active = false; };
    }, [])
  );

  const handleDayPress = useCallback((_dayNum, log) => {
    setSelectedLog(log);
  }, []);

  if (loading) {
    return (<ScreenWrapper><View style={st.loadWrap}><Text style={st.loadText}>Loading your progress...</Text></View></ScreenWrapper>);
  }

  const disc = stats?.discipline_score || 0;
  const foc = stats?.focus_score || 0;
  const cons = stats?.consistency_score || 0;
  const maxScore = Math.max(currentDay * 3, 1);
  const totalScore = disc + foc + cons;
  const totalMax = maxScore * 3;

  const yesCount = dailyLogs.filter((l) => l.identity_check === 'yes').length;
  const almostCount = dailyLogs.filter((l) => l.identity_check === 'almost').length;
  const noCount = dailyLogs.filter((l) => l.identity_check === 'no').length;
  const logged = dailyLogs.length;
  const loggedPct = currentDay > 0 ? Math.round((logged / currentDay) * 100) : 0;
  const alignPct = logged > 0 ? Math.round((yesCount / logged) * 100) : 0;

  const sorted = [...dailyLogs].sort((a, b) => b.day_number - a.day_number);
  let streak = 0;
  for (const log of sorted) {
    if (log.identity_check === 'yes' || log.identity_check === 'almost') streak++;
    else break;
  }

  const phase = getDayPhase(currentDay);
  const motivation = getMotivation(alignPct, streak);
  const weeks = Math.ceil(40 / 7);

  return (
    <ScreenWrapper>
      <Animated.ScrollView style={[st.flex, { opacity: fadeAnim }]} contentContainerStyle={st.scroll} showsVerticalScrollIndicator={false}>

        {/* ── Header ── */}
        <FadeIn delay={0} trigger={focusCount}>
          <View style={st.header}>
            <Text style={st.phase}>{phase.toUpperCase()} PHASE</Text>
            <Text style={st.title}>Day {currentDay} of 40</Text>
            {identity?.title && <Text style={st.identity}>{identity.title}</Text>}
          </View>
        </FadeIn>

        {/* ── Motivation ── */}
        <FadeIn delay={80} trigger={focusCount}>
          <View style={st.motivCard}>
            <Text style={st.motivEmoji}>{motivation.emoji}</Text>
            <Text style={st.motivMsg}>{motivation.msg}</Text>
          </View>
        </FadeIn>

        {/* ── Score Rings ── */}
        <FadeIn delay={160} trigger={focusCount}><View style={st.ringsRow}>
          <CircleProgress value={disc} max={maxScore} size={85} color={colors.primary} label="Discipline" icon="🎯" />
          <CircleProgress value={foc} max={maxScore} size={85} color={colors.accent} label="Focus" icon="🧠" />
          <CircleProgress value={cons} max={Math.max(currentDay * 2, 1)} size={85} color={colors.success} label="Consistency" icon="⚡" />
        </View></FadeIn>

        {/* ── Total Score ── */}
        <FadeIn delay={240} trigger={focusCount}><View style={st.totalCard}>
          <View>
            <Text style={st.totalLabel}>Total Score</Text>
            <Text style={st.totalSub}>{Math.round((totalScore / totalMax) * 100)}% of maximum</Text>
          </View>
          <Text style={st.totalValue}>{totalScore}</Text>
        </View></FadeIn>

        {/* ── Quick Stats Grid ── */}
        <FadeIn delay={320} trigger={focusCount}><View style={st.gridRow}>
          <View style={st.gridItem}>
            <Text style={st.gridEmoji}>🔥</Text>
            <Text style={st.gridValue}>{streak}</Text>
            <Text style={st.gridLabel}>Streak</Text>
          </View>
          <View style={st.gridItem}>
            <Text style={st.gridEmoji}>📅</Text>
            <Text style={st.gridValue}>{logged}</Text>
            <Text style={st.gridLabel}>Days Logged</Text>
          </View>
          <View style={st.gridItem}>
            <Text style={st.gridEmoji}>🎯</Text>
            <Text style={st.gridValue}>{loggedPct}%</Text>
            <Text style={st.gridLabel}>Show-up Rate</Text>
          </View>
          <View style={st.gridItem}>
            <Text style={st.gridEmoji}>📋</Text>
            <Text style={st.gridValue}>{habits.length}</Text>
            <Text style={st.gridLabel}>Habits</Text>
          </View>
        </View></FadeIn>

        <NovaAd />

        {/* ── Identity Alignment ── */}
        <FadeIn delay={400} trigger={focusCount}><View style={st.alignCard}>
          <Text style={st.alignTitle}>How aligned are you?</Text>
          <View style={st.alignBar}>
            {yesCount > 0 && <View style={[st.alignSeg, { flex: yesCount, backgroundColor: colors.success }]} />}
            {almostCount > 0 && <View style={[st.alignSeg, { flex: almostCount, backgroundColor: colors.warning }]} />}
            {noCount > 0 && <View style={[st.alignSeg, { flex: noCount, backgroundColor: colors.error }]} />}
            {logged === 0 && <View style={[st.alignSeg, { flex: 1, backgroundColor: colors.surfaceLight }]} />}
          </View>
          <View style={st.alignLegend}>
            <View style={st.alignLegendItem}>
              <View style={[st.alignDot, { backgroundColor: colors.success }]} />
              <Text style={st.alignLegendText}>Yes {yesCount}</Text>
            </View>
            <View style={st.alignLegendItem}>
              <View style={[st.alignDot, { backgroundColor: colors.warning }]} />
              <Text style={st.alignLegendText}>Almost {almostCount}</Text>
            </View>
            <View style={st.alignLegendItem}>
              <View style={[st.alignDot, { backgroundColor: colors.error }]} />
              <Text style={st.alignLegendText}>No {noCount}</Text>
            </View>
          </View>
        </View></FadeIn>

        {/* ── 40-Day Heatmap ── */}
        <FadeIn delay={480} trigger={focusCount}><View style={st.heatCard}>
          <View style={st.heatHeader}>
            <Text style={st.heatTitle}>Your 40-Day Map</Text>
            <Text style={st.heatProgress}>Day {currentDay}/40</Text>
          </View>

          {/* Day labels */}
          <View style={[hm.row, { marginBottom: 2 }]}>
            {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => (
              <View key={i} style={{ width: HEAT_CELL, alignItems: 'center' }}>
                <Text style={st.heatDayLabel}>{d}</Text>
              </View>
            ))}
          </View>

          {/* Grid */}
          {Array.from({ length: weeks }, (_, w) => (
            <WeekRow key={w} logs={dailyLogs} weekNum={w} currentDay={currentDay} onDayPress={handleDayPress} />
          ))}

          {/* Legend */}
          <View style={st.heatLegend}>
            <View style={st.heatLegendItem}>
              <View style={[st.heatLegendBox, { backgroundColor: colors.surfaceLight }]} />
              <Text style={st.heatLegendText}>Pending</Text>
            </View>
            <View style={st.heatLegendItem}>
              <View style={[st.heatLegendBox, { backgroundColor: colors.success }]} />
              <Text style={st.heatLegendText}>Yes</Text>
            </View>
            <View style={st.heatLegendItem}>
              <View style={[st.heatLegendBox, { backgroundColor: colors.warning }]} />
              <Text style={st.heatLegendText}>Almost</Text>
            </View>
            <View style={st.heatLegendItem}>
              <View style={[st.heatLegendBox, { backgroundColor: colors.error }]} />
              <Text style={st.heatLegendText}>No</Text>
            </View>
            <View style={st.heatLegendItem}>
              <View style={[st.heatLegendBox, { borderWidth: 1.5, borderColor: colors.accent, backgroundColor: 'transparent' }]} />
              <Text style={st.heatLegendText}>Today</Text>
            </View>
          </View>
        </View></FadeIn>

        {/* ── Journey Info ── */}
        {identity && (
          <FadeIn delay={560} trigger={focusCount}><View style={st.journeyCard}>
            <Text style={st.journeyLabel}>Your journey</Text>
            <Text style={st.journeyIdentity}>{identity.title}</Text>
            <View style={st.journeySep} />
            <View style={st.journeyRow}>
              <Text style={st.journeyMeta}>Started {formatDate(identity.start_date)}</Text>
              <Text style={st.journeyMeta}>{40 - currentDay} days to go</Text>
            </View>
          </View></FadeIn>
        )}

      </Animated.ScrollView>

      <DayDetailModal
        visible={!!selectedLog}
        log={selectedLog}
        onClose={() => setSelectedLog(null)}
      />
    </ScreenWrapper>
  );
}

const st = StyleSheet.create({
  flex: { flex: 1 },
  scroll: { padding: spacing.md, paddingBottom: spacing.xxl * 2 },
  loadWrap: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  loadText: { color: colors.textSecondary, fontSize: fonts.sizes.md },

  // Header
  header: { alignItems: 'center', marginBottom: spacing.md },
  phase: { color: colors.accent, fontSize: 10, fontWeight: fonts.weights.bold, letterSpacing: 3 },
  title: { color: colors.text, fontSize: fonts.sizes.xl, fontWeight: fonts.weights.bold, marginTop: spacing.xs },
  identity: { color: colors.textMuted, fontSize: fonts.sizes.xs, fontStyle: 'italic', marginTop: 3 },

  // Motivation
  motivCard: { flexDirection: 'row', alignItems: 'center', backgroundColor: 'rgba(108,99,255,0.08)', borderRadius: borderRadius.md, padding: spacing.md, marginBottom: spacing.md, borderWidth: 1, borderColor: 'rgba(108,99,255,0.15)' },
  motivEmoji: { fontSize: 24, marginRight: spacing.sm },
  motivMsg: { color: colors.text, fontSize: fonts.sizes.sm, flex: 1, lineHeight: 20 },

  // Rings
  ringsRow: { flexDirection: 'row', justifyContent: 'space-around', marginBottom: spacing.md },

  // Total
  totalCard: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: colors.surface, borderRadius: borderRadius.md, padding: spacing.md, marginBottom: spacing.md, borderWidth: 1, borderColor: colors.accent },
  totalLabel: { color: colors.text, fontSize: fonts.sizes.sm, fontWeight: fonts.weights.semibold },
  totalSub: { color: colors.textMuted, fontSize: 10, marginTop: 1 },
  totalValue: { color: colors.accent, fontSize: fonts.sizes.xxl, fontWeight: fonts.weights.bold },

  // Grid
  gridRow: { flexDirection: 'row', gap: 6, marginBottom: spacing.md },
  gridItem: { flex: 1, backgroundColor: colors.surface, borderRadius: borderRadius.md, padding: spacing.sm, alignItems: 'center', borderWidth: 1, borderColor: colors.border },
  gridEmoji: { fontSize: 18, marginBottom: 4 },
  gridValue: { color: colors.text, fontSize: fonts.sizes.md, fontWeight: fonts.weights.bold },
  gridLabel: { color: colors.textMuted, fontSize: 8, marginTop: 2 },

  // Alignment
  alignCard: { backgroundColor: colors.surface, borderRadius: borderRadius.md, padding: spacing.md, marginBottom: spacing.md, borderWidth: 1, borderColor: colors.border },
  alignTitle: { color: colors.text, fontSize: fonts.sizes.sm, fontWeight: fonts.weights.semibold, marginBottom: spacing.sm },
  alignBar: { flexDirection: 'row', height: 8, borderRadius: 4, overflow: 'hidden', marginBottom: spacing.sm },
  alignSeg: { height: '100%' },
  alignLegend: { flexDirection: 'row', justifyContent: 'center', gap: spacing.md },
  alignLegendItem: { flexDirection: 'row', alignItems: 'center' },
  alignDot: { width: 8, height: 8, borderRadius: 4, marginRight: 4 },
  alignLegendText: { color: colors.textMuted, fontSize: 10 },

  // Heatmap
  heatCard: { backgroundColor: colors.surface, borderRadius: borderRadius.md, padding: spacing.md, marginBottom: spacing.md, borderWidth: 1, borderColor: colors.border },
  heatHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: spacing.sm },
  heatTitle: { color: colors.text, fontSize: fonts.sizes.md, fontWeight: fonts.weights.bold },
  heatProgress: { color: colors.accent, fontSize: fonts.sizes.xs, fontWeight: fonts.weights.semibold },
  heatDayLabel: { color: colors.textMuted, fontSize: 9, fontWeight: fonts.weights.medium },
  heatLegend: { flexDirection: 'row', justifyContent: 'center', gap: spacing.md, marginTop: spacing.md },
  heatLegendItem: { flexDirection: 'row', alignItems: 'center', gap: 4 },
  heatLegendText: { color: colors.textMuted, fontSize: 9 },
  heatLegendBox: { width: 12, height: 12, borderRadius: 3 },

  // Journey
  journeyCard: { backgroundColor: colors.surface, borderRadius: borderRadius.md, padding: spacing.md, borderWidth: 1, borderColor: 'rgba(108,99,255,0.2)' },
  journeyLabel: { color: colors.primary, fontSize: 9, fontWeight: fonts.weights.bold, letterSpacing: 2, marginBottom: spacing.sm },
  journeyIdentity: { color: colors.text, fontSize: fonts.sizes.md, fontWeight: fonts.weights.semibold },
  journeySep: { height: 1, backgroundColor: colors.border, marginVertical: spacing.sm },
  journeyRow: { flexDirection: 'row', justifyContent: 'space-between' },
  journeyMeta: { color: colors.textMuted, fontSize: 10 },
});
