import React, { useMemo, useState } from 'react';
import { Alert, Image, Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useApp } from '../context/AppContext';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { currency } from '../lib/format';
import { RootStackParamList } from '../navigation/types';
import { colors, radius, shadows } from '../lib/theme';
import { ShopSchedule } from '../types';
import { Ionicons } from '@expo/vector-icons';

type Tab = 'servicos' | 'barbeiros' | 'produtos' | 'detalhes';

const defaultSchedule: ShopSchedule[] = [
  { day: 'Segunda-feira', open: '09:00', close: '19:30' },
  { day: 'Terça-feira', open: '09:00', close: '19:30' },
  { day: 'Quarta-feira', open: '09:00', close: '19:30' },
  { day: 'Quinta-feira', open: '09:00', close: '19:30' },
  { day: 'Sexta-feira', open: '09:00', close: '19:30' },
  { day: 'Sábado', open: '09:00', close: '19:00' },
  { day: 'Domingo', open: '', close: '', closed: true },
];

export default function ShopDetails() {
  const route = useRoute<RouteProp<RootStackParamList, 'ShopDetails'>>();
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  const { shopId } = route.params;
  const { shops, shopsReady, addToCart, user, toggleFavorite, isFavorite } = useApp();
  const shop = useMemo(() => shops.find((s) => s.id === shopId), [shops, shopId]);
  const [tab, setTab] = useState<Tab>('servicos');

  if (!shopsReady && !shop) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.centerState}>
          <Ionicons name="sync-outline" size={40} color={colors.primary} style={styles.loadingSpinner} />
          <Text style={styles.centerTitle}>Carregando...</Text>
        </View>
      </SafeAreaView>
    );
  }

  if (!shop) {
    return (
      <SafeAreaView style={styles.container}>
        <View style={styles.centerState}>
          <Ionicons name="alert-circle-outline" size={48} color={colors.danger} />
          <Text style={styles.centerTitle}>Não encontrado</Text>
          <Button onPress={() => navigation.navigate('Explore')}>Voltar</Button>
        </View>
      </SafeAreaView>
    );
  }

  const openMap = () => {
    const url = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${shop.name} ${shop.address}`)}`;
    Linking.openURL(url);
  };

  const reserveService = (serviceId?: string) => {
    if (!user) { navigation.navigate('Login'); return; }
    navigation.navigate('Booking', { shopId: shop.id, serviceId });
  };

  const addProduct = (productId: string) => {
    if (!user) { navigation.navigate('Login'); return; }
    addToCart({ shopId: shop.id, type: 'product', refId: productId, qty: 1 });
    Alert.alert('Sucesso', 'Produto adicionado ao carrinho.');
  };

  const schedule = (shop.schedule || defaultSchedule).filter(s => !s.isException);
  const currentDayIndex = new Date().getDay() === 0 ? 6 : new Date().getDay() - 1;
  const isFav = isFavorite(shop.id);

  return (
    <View style={styles.container}>
      <ScrollView bounces={false} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
        
        {/* Cover Hero Banner */}
        <View style={styles.hero}>
          {shop.imageUrl ? (
            <Image source={{ uri: shop.imageUrl }} style={styles.heroImage} />
          ) : (
            <View style={styles.heroPlaceholder}>
              <Ionicons name="storefront-outline" size={64} color={colors.primary} style={{ opacity: 0.6 }} />
            </View>
          )}
          <View style={styles.heroOverlay} />
          
          <SafeAreaView style={styles.heroHeader} edges={['top']}>
            <TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn} activeOpacity={0.8}>
              <Ionicons name="chevron-back" size={24} color={colors.textInverse} />
            </TouchableOpacity>
            <TouchableOpacity onPress={() => toggleFavorite(shop.id)} style={styles.favBtn} activeOpacity={0.8}>
              <Ionicons 
                name={isFav ? "heart" : "heart-outline"} 
                size={24} 
                color={isFav ? colors.danger : colors.textInverse} 
              />
            </TouchableOpacity>
          </SafeAreaView>
        </View>

        {/* Overlapping Info Summary Sheet */}
        <View style={styles.summaryWrap}>
          <View style={styles.summaryCard}>
            <View style={styles.summaryTop}>
              <View style={styles.ratingBadge}>
                <Ionicons name="star" size={14} color={colors.star} />
                <Text style={styles.ratingValue}>{(shop.rating || 0).toFixed(1)}</Text>
              </View>
              <View style={styles.servicesCountBadge}>
                <Text style={styles.summaryMeta}>{shop.services.length} serviços</Text>
              </View>
            </View>

            <Text style={styles.shopName}>{shop.name}</Text>
            
            <TouchableOpacity onPress={openMap} style={styles.addrBox} activeOpacity={0.7}>
              <Ionicons name="location-outline" size={16} color={colors.primary} />
              <Text style={styles.shopAddr} numberOfLines={2}>
                {shop.address && shop.address !== 'Endereço a definir' ? shop.address : 'Endereço por definir'}
              </Text>
            </TouchableOpacity>

            {/* Quick Stats Grid */}
            <View style={styles.quickStats}>
              <View style={styles.quickStat}>
                <Ionicons name="people-outline" size={18} color={colors.primary} />
                <View>
                  <Text style={styles.quickValue}>{shop.barbers.length}</Text>
                  <Text style={styles.quickLabel}>Equipa</Text>
                </View>
              </View>
              <View style={styles.quickStat}>
                <Ionicons name="basket-outline" size={18} color={colors.primary} />
                <View>
                  <Text style={styles.quickValue}>{shop.products.length}</Text>
                  <Text style={styles.quickLabel}>Produtos</Text>
                </View>
              </View>
              <View style={styles.quickStat}>
                <Ionicons name="time-outline" size={18} color={colors.primary} />
                <View>
                  <Text style={[styles.quickValue, schedule[currentDayIndex]?.closed && styles.closedText]}>
                    {schedule[currentDayIndex]?.closed ? 'Fechado' : 'Aberto'}
                  </Text>
                  <Text style={styles.quickLabel}>Hoje</Text>
                </View>
              </View>
            </View>

            <Button 
              onPress={() => reserveService(shop.services[0]?.id)} 
              disabled={shop.services.length === 0}
              style={styles.reserveBtn}
            >
              Agendar agora ⚡
            </Button>
          </View>
        </View>

        {/* Tab Selector section */}
        <View style={styles.tabSection}>
          <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabsScroll}>
            {[
              ['servicos', 'Serviços'],
              ['barbeiros', 'Equipa'],
              ['produtos', 'Loja'],
              ['detalhes', 'Sobre'],
            ].map(([id, label]) => (
              <TouchableOpacity
                key={id}
                onPress={() => setTab(id as Tab)}
                style={[styles.tabItem, tab === id && styles.tabItemActive]}
                activeOpacity={0.8}
              >
                <Text style={[styles.tabText, tab === id && styles.tabTextActive]}>{label}</Text>
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>

        {/* Content Tabs Area */}
        <View style={styles.contentArea}>
          {tab === 'servicos' && (
            <View style={styles.grid}>
              {shop.services.length > 0 ? (
                shop.services.map((s) => (
                  <Card key={s.id} style={styles.serviceCard}>
                    <View style={styles.svcInfo}>
                      <Text style={styles.svcName}>{s.name}</Text>
                      <View style={styles.svcMetaRow}>
                        <Ionicons name="time-outline" size={13} color={colors.textMuted} />
                        <Text style={styles.svcMeta}>{s.duration} min</Text>
                        <Text style={styles.bulletSeparator}>•</Text>
                        <Text style={styles.svcPrice}>{currency(s.price)}</Text>
                      </View>
                    </View>
                    <Button size="sm" onPress={() => reserveService(s.id)} style={styles.svcBookBtn}>
                      Agendar
                    </Button>
                  </Card>
                ))
              ) : (
                <View style={styles.emptyContentBlock}>
                  <Ionicons name="cut-outline" size={32} color={colors.textSubtle} />
                  <Text style={styles.emptyContentText}>Sem serviços disponíveis de momento.</Text>
                </View>
              )}
            </View>
          )}

          {tab === 'barbeiros' && (
            <View style={styles.barberList}>
              {shop.barbers.length > 0 ? (
                shop.barbers.map((b) => (
                  <Card key={b.id} style={styles.barberCard}>
                    <View style={styles.barberAvatar}>
                      <Text style={styles.avatarTxt}>{b.name.charAt(0).toUpperCase()}</Text>
                    </View>
                    <View style={styles.barberInfo}>
                      <Text style={styles.barberName}>{b.name}</Text>
                      <Text style={styles.barberSpecs} numberOfLines={1}>
                        {b.specialties.length > 0 ? b.specialties.join(', ') : 'Barbeiro especialista'}
                      </Text>
                    </View>
                    <View style={styles.barberBadge}>
                      <Ionicons name="shield-checkmark" size={14} color={colors.primary} />
                    </View>
                  </Card>
                ))
              ) : (
                <View style={styles.emptyContentBlock}>
                  <Ionicons name="people-outline" size={32} color={colors.textSubtle} />
                  <Text style={styles.emptyContentText}>Sem profissionais disponíveis de momento.</Text>
                </View>
              )}
            </View>
          )}

          {tab === 'produtos' && (
            <View style={styles.grid}>
              {shop.products.length > 0 ? (
                [...shop.products].sort((a, b) => b.price - a.price).map((p) => (
                  <Card key={p.id} style={styles.productCard}>
                    <View style={styles.prodHeader}>
                      <Text style={styles.prodName} numberOfLines={1}>{p.name}</Text>
                      <Text style={styles.prodPrice}>{currency(p.price)}</Text>
                    </View>
                    <View style={styles.productMetaRow}>
                      <View style={[styles.stockBadge, p.stock <= 0 && styles.outOfStockBadge]}>
                        <Text style={[styles.stockText, p.stock <= 0 && styles.outOfStockText]}>
                          {p.stock > 0 ? `${p.stock} em stock` : 'Esgotado'}
                        </Text>
                      </View>
                    </View>
                    <Button 
                      size="sm" 
                      variant={p.stock > 0 ? "outline" : "ghost"}
                      onPress={() => addProduct(p.id)} 
                      disabled={p.stock <= 0}
                      style={styles.productBtn}
                    >
                      {p.stock > 0 ? 'Adicionar 🛒' : 'Indisponível'}
                    </Button>
                  </Card>
                ))
              ) : (
                <View style={styles.emptyContentBlock}>
                  <Ionicons name="basket-outline" size={32} color={colors.textSubtle} />
                  <Text style={styles.emptyContentText}>Sem produtos disponíveis de momento.</Text>
                </View>
              )}
            </View>
          )}

          {tab === 'detalhes' && (
            <Card style={styles.detailsBox}>
              <View style={styles.detailTitleRow}>
                <Ionicons name="calendar-outline" size={18} color={colors.primary} />
                <Text style={styles.detailTitle}>Horário de Funcionamento</Text>
              </View>
              
              <View style={styles.scheduleList}>
                {schedule.map((s, idx) => (
                  <View key={s.day} style={[styles.schedRow, idx === currentDayIndex && styles.schedRowToday]}>
                    <Text style={[styles.schedDay, idx === currentDayIndex && styles.today]}>
                      {s.day} {idx === currentDayIndex && '• Hoje'}
                    </Text>
                    <Text style={[styles.schedTime, idx === currentDayIndex && styles.today]}>
                      {s.closed ? 'Fechado' : `${s.open} - ${s.close}`}
                    </Text>
                  </View>
                ))}
              </View>
              
              <View style={styles.divider} />
              
              <View style={styles.detailTitleRow}>
                <Ionicons name="call-outline" size={18} color={colors.primary} />
                <Text style={styles.detailTitle}>Contacto Telefónico</Text>
              </View>
              
              {shop.contacts?.phone1 ? (
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${shop.contacts?.phone1}`)} style={styles.phoneLinkBox} activeOpacity={0.7}>
                  <Ionicons name="phone-portrait-outline" size={18} color={colors.primaryDark} />
                  <Text style={styles.contactLink}>{shop.contacts?.phone1}</Text>
                </TouchableOpacity>
              ) : (
                <Text style={styles.noContactText}>Contacto telefónico não disponível.</Text>
              )}

              {shop.contacts?.phone2 ? (
                <TouchableOpacity onPress={() => Linking.openURL(`tel:${shop.contacts?.phone2}`)} style={styles.phoneLinkBox} activeOpacity={0.7}>
                  <Ionicons name="phone-portrait-outline" size={18} color={colors.primaryDark} />
                  <Text style={styles.contactLink}>{shop.contacts.phone2}</Text>
                </TouchableOpacity>
              ) : null}

              {shop.paymentMethods && shop.paymentMethods.length > 0 && (
                <>
                  <View style={styles.divider} />
                  <View style={styles.detailTitleRow}>
                    <Ionicons name="card-outline" size={18} color={colors.primary} />
                    <Text style={styles.detailTitle}>Formas de Pagamento</Text>
                  </View>
                  <Text style={styles.detailBody}>{shop.paymentMethods.join(', ')}</Text>
                </>
              )}

              {(shop.socialNetworks?.whatsapp || shop.socialNetworks?.instagram || shop.socialNetworks?.facebook) && (
                <>
                  <View style={styles.divider} />
                  <View style={styles.detailTitleRow}>
                    <Ionicons name="globe-outline" size={18} color={colors.primary} />
                    <Text style={styles.detailTitle}>Redes Sociais</Text>
                  </View>
                  {shop.socialNetworks?.whatsapp ? (
                    <TouchableOpacity onPress={() => Linking.openURL(`https://wa.me/${shop.socialNetworks?.whatsapp}`)} style={styles.phoneLinkBox}>
                      <Ionicons name="logo-whatsapp" size={18} color={colors.success} />
                      <Text style={styles.contactLink}>WhatsApp</Text>
                    </TouchableOpacity>
                  ) : null}
                  {shop.socialNetworks?.instagram ? (
                    <TouchableOpacity onPress={() => Linking.openURL(`https://instagram.com/${shop.socialNetworks?.instagram?.replace('@', '')}`)} style={styles.phoneLinkBox}>
                      <Ionicons name="logo-instagram" size={18} color={colors.primaryDark} />
                      <Text style={styles.contactLink}>Instagram</Text>
                    </TouchableOpacity>
                  ) : null}
                  {shop.socialNetworks?.facebook ? (
                    <TouchableOpacity onPress={() => Linking.openURL(shop.socialNetworks!.facebook!)} style={styles.phoneLinkBox}>
                      <Ionicons name="logo-facebook" size={18} color={colors.primary} />
                      <Text style={styles.contactLink}>Facebook</Text>
                    </TouchableOpacity>
                  ) : null}
                </>
              )}
            </Card>
          )}
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  scrollContent: {
    paddingBottom: 40,
  },
  hero: {
    height: 250,
    position: 'relative',
  },
  heroImage: {
    width: '100%',
    height: '100%',
  },
  heroPlaceholder: {
    width: '100%',
    height: '100%',
    backgroundColor: colors.primarySoft,
    alignItems: 'center',
    justifyContent: 'center',
  },
  heroOverlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(12,20,17,0.3)',
  },
  heroHeader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingTop: 10,
  },
  backBtn: {
    width: 42,
    height: 42,
    borderRadius: 21,
    backgroundColor: 'rgba(20,33,29,0.72)',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 0.5,
    borderColor: 'rgba(255,255,255,0.16)',
  },
  favBtn: {
    width: 42,
    height: 42,
    borderRadius: 21,
    backgroundColor: 'rgba(20,33,29,0.72)',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 0.5,
    borderColor: 'rgba(255,255,255,0.16)',
  },
  summaryWrap: {
    paddingHorizontal: 20,
    marginTop: -46,
    zIndex: 2,
  },
  summaryCard: {
    backgroundColor: colors.surface,
    borderRadius: radius.lg,
    padding: 20,
    gap: 14,
    borderWidth: 1,
    borderColor: colors.border,
    shadowColor: colors.surfaceDark,
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.08,
    shadowRadius: 16,
    elevation: 4,
  },
  summaryTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  ratingBadge: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.accentSoft,
    borderRadius: radius.pill,
    paddingHorizontal: 10,
    paddingVertical: 4,
    gap: 4,
  },
  ratingValue: {
    color: colors.primaryDark,
    fontSize: 12,
    fontWeight: '900',
  },
  servicesCountBadge: {
    backgroundColor: colors.primarySoft,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: radius.pill,
  },
  summaryMeta: {
    color: colors.primaryDark,
    fontSize: 11,
    fontWeight: '800',
    textTransform: 'uppercase',
  },
  shopName: {
    color: colors.text,
    fontSize: 26,
    fontWeight: '900',
    letterSpacing: -0.5,
  },
  addrBox: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  shopAddr: {
    flex: 1,
    color: colors.textMuted,
    fontSize: 14,
    fontWeight: '500',
  },
  quickStats: {
    flexDirection: 'row',
    gap: 8,
    marginTop: 2,
  },
  quickStat: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: colors.surfaceMuted,
    borderRadius: radius.md,
    padding: 10,
    borderWidth: 1,
    borderColor: colors.border,
  },
  quickValue: {
    color: colors.text,
    fontSize: 14,
    fontWeight: '900',
  },
  closedText: {
    color: colors.danger,
  },
  quickLabel: {
    color: colors.textMuted,
    fontSize: 10,
    fontWeight: '700',
    textTransform: 'uppercase',
    marginTop: 1,
  },
  reserveBtn: {
    marginTop: 4,
    borderRadius: radius.md,
    shadowColor: colors.primary,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3,
  },
  tabSection: {
    backgroundColor: colors.background,
    paddingVertical: 12,
    marginTop: 8,
  },
  tabsScroll: {
    paddingHorizontal: 20,
    gap: 8,
  },
  tabItem: {
    paddingVertical: 10,
    paddingHorizontal: 16,
    borderRadius: radius.pill,
    backgroundColor: colors.surface,
    borderWidth: 1,
    borderColor: colors.border,
  },
  tabItemActive: {
    backgroundColor: colors.primary,
    borderColor: colors.primary,
  },
  tabText: {
    color: colors.textMuted,
    fontSize: 14,
    fontWeight: '700',
  },
  tabTextActive: {
    color: colors.textInverse,
  },
  contentArea: {
    paddingHorizontal: 20,
  },
  grid: {
    gap: 12,
  },
  serviceCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    gap: 12,
    borderRadius: radius.md,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.surface,
    shadowColor: colors.surfaceDark,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.02,
    shadowRadius: 6,
    elevation: 1,
  },
  svcInfo: {
    flex: 1,
    gap: 6,
  },
  svcName: {
    color: colors.text,
    fontSize: 16,
    fontWeight: '800',
  },
  svcMetaRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  svcMeta: {
    color: colors.textMuted,
    fontSize: 13,
    fontWeight: '500',
  },
  bulletSeparator: {
    color: colors.borderStrong,
    fontSize: 12,
    marginHorizontal: 2,
  },
  svcPrice: {
    color: colors.primary,
    fontSize: 14,
    fontWeight: '800',
  },
  svcBookBtn: {
    borderRadius: radius.md,
    paddingHorizontal: 14,
  },
  barberList: {
    gap: 12,
  },
  barberCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 14,
    gap: 14,
    borderRadius: radius.md,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.surface,
  },
  barberAvatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: colors.primarySoft,
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: colors.borderStrong,
  },
  avatarTxt: {
    color: colors.primary,
    fontSize: 18,
    fontWeight: '900',
  },
  barberInfo: {
    flex: 1,
    gap: 2,
  },
  barberName: {
    color: colors.text,
    fontSize: 16,
    fontWeight: '800',
  },
  barberSpecs: {
    color: colors.textMuted,
    fontSize: 12,
    fontWeight: '500',
  },
  barberBadge: {
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: colors.primarySoft,
    alignItems: 'center',
    justifyContent: 'center',
  },
  productCard: {
    padding: 16,
    gap: 10,
    borderRadius: radius.md,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.surface,
  },
  prodHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    gap: 12,
  },
  prodName: {
    color: colors.text,
    fontSize: 16,
    fontWeight: '800',
    flex: 1,
  },
  prodPrice: {
    color: colors.primary,
    fontSize: 16,
    fontWeight: '900',
  },
  productMetaRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  stockBadge: {
    backgroundColor: colors.successSoft,
    paddingHorizontal: 8,
    paddingVertical: 3,
    borderRadius: radius.xs,
  },
  outOfStockBadge: {
    backgroundColor: colors.dangerSoft,
  },
  stockText: {
    color: colors.success,
    fontSize: 10,
    fontWeight: '800',
    textTransform: 'uppercase',
  },
  outOfStockText: {
    color: colors.danger,
  },
  productBtn: {
    borderRadius: radius.md,
    marginTop: 2,
  },
  detailsBox: {
    padding: 20,
    gap: 14,
    borderRadius: radius.lg,
    borderWidth: 1,
    borderColor: colors.border,
    backgroundColor: colors.surface,
  },
  detailTitleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    marginBottom: 4,
  },
  detailTitle: {
    color: colors.text,
    fontSize: 16,
    fontWeight: '800',
  },
  detailBody: {
    color: colors.textMuted,
    fontSize: 14,
    lineHeight: 20,
  },
  scheduleList: {
    gap: 8,
  },
  schedRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 4,
    paddingHorizontal: 8,
  },
  schedRowToday: {
    backgroundColor: colors.primarySoft,
    borderRadius: radius.sm,
    paddingVertical: 6,
  },
  schedDay: {
    color: colors.textMuted,
    fontSize: 14,
    fontWeight: '500',
  },
  schedTime: {
    color: colors.text,
    fontSize: 14,
    fontWeight: '600',
  },
  today: {
    color: colors.primaryDark,
    fontWeight: '800',
  },
  divider: {
    height: 1,
    backgroundColor: colors.borderStrong,
    marginVertical: 6,
  },
  phoneLinkBox: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    backgroundColor: colors.primarySoft,
    alignSelf: 'flex-start',
    paddingVertical: 8,
    paddingHorizontal: 14,
    borderRadius: radius.sm,
    borderWidth: 0.5,
    borderColor: colors.borderStrong,
  },
  contactLink: {
    color: colors.primaryDark,
    fontSize: 15,
    fontWeight: '800',
  },
  noContactText: {
    color: colors.textSubtle,
    fontSize: 14,
    fontWeight: '500',
  },
  centerState: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 40,
    gap: 12,
  },
  centerTitle: {
    color: colors.text,
    fontSize: 16,
    fontWeight: '800',
  },
  loadingSpinner: {
    marginBottom: 4,
  },
  emptyContentBlock: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 40,
    gap: 10,
  },
  emptyContentText: {
    color: colors.textMuted,
    fontSize: 14,
    fontWeight: '600',
    textAlign: 'center',
  },
});
