import React, { useState } from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
  RefreshControl,
  Modal,
  Switch,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { COLORS, FONT_SIZE, SPACING, RADIUS, TEXT, SHADOWS } from '../../theme';
import { useTheme } from '../../theme';
import { Button, Spinner, EmptyState } from '../../components/ui';
import { useToast } from '../../contexts/ToastContext';
import { appointmentsAPI, chatbotsAPI } from '../../services/api';
import { useTranslation } from '../../i18n';
import type { Appointment, Chatbot, BusinessHoursEntry } from '../../types';

const STATUS_COLORS_APPT: Record<string, { color: string; bg: string; emoji: string }> = {
  pending:   { color: '#d97706', bg: '#fef3c7', emoji: '⏳' },
  confirmed: { color: '#16a34a', bg: '#dcfce7', emoji: '✅' },
  cancelled: { color: '#dc2626', bg: '#fee2e2', emoji: '❌' },
  completed: { color: '#6b7280', bg: '#f3f4f6', emoji: '✔' },
};

// Day labels are sourced from translations at render time

const DEFAULT_HOURS: BusinessHoursEntry[] = Array.from({ length: 7 }, (_, i) => ({
  day_of_week: i,
  is_open: i < 5,
  open_time: '09:00',
  close_time: '17:00',
  slot_duration_minutes: 60,
}));

// ── Business Hours Modal ──────────────────────────────────────────────────────

function BusinessHoursModal({
  visible,
  chatbotId,
  onClose,
}: {
  visible: boolean;
  chatbotId: string;
  onClose: () => void;
}) {
  const { theme } = useTheme();
  const { t } = useTranslation();
  const toast = useToast();
  const qc = useQueryClient();
  const [hours, setHours] = useState<BusinessHoursEntry[]>(DEFAULT_HOURS);

  const { isLoading } = useQuery<BusinessHoursEntry[]>({
    queryKey: ['business-hours', chatbotId],
    queryFn: () => appointmentsAPI.getHours(chatbotId),
    enabled: visible && !!chatbotId,
    onSuccess: (data: BusinessHoursEntry[]) => {
      if (data && data.length > 0) {
        const merged = DEFAULT_HOURS.map(d => {
          const found = data.find(h => h.day_of_week === d.day_of_week);
          return found ? { ...d, ...found } : d;
        });
        setHours(merged);
      }
    },
  } as any);

  const save = useMutation({
    mutationFn: () => appointmentsAPI.saveHours(chatbotId, hours),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['business-hours', chatbotId] });
      toast.success(t.appointments.save_hours);
      onClose();
    },
    onError: (err: any) => toast.error(err?.response?.data?.detail ?? t.common.error),
  });

  const toggle = (idx: number, field: keyof BusinessHoursEntry, value: any) => {
    setHours(prev => prev.map((h, i) => i === idx ? { ...h, [field]: value } : h));
  };

  const SLOT_OPTIONS = [
    { label: '15 min', value: 15 },
    { label: '30 min', value: 30 },
    { label: '1 hr', value: 60 },
    { label: '1.5 hr', value: 90 },
    { label: '2 hr', value: 120 },
  ];

  return (
    <Modal visible={visible} animationType="slide" presentationStyle="pageSheet" onRequestClose={onClose}>
      <SafeAreaView style={[styles.modalSafe, { backgroundColor: theme.bg }]}>
        <ScrollView contentContainerStyle={styles.modalScroll}>
          <View style={styles.modalHeader}>
            <Text style={[styles.modalTitle, { color: theme.text }]}>Business Hours</Text>
            <TouchableOpacity onPress={onClose} style={[styles.closeBtn, { backgroundColor: theme.bgSecondary }]}>
              <Text style={[styles.closeBtnText, { color: theme.textSecondary }]}>✕</Text>
            </TouchableOpacity>
          </View>

          <Text style={[styles.modalDesc, { color: theme.textSecondary }]}>
            Set when appointments can be booked for this chatbot.
          </Text>

          {isLoading ? (
            <Spinner centered />
          ) : (
            <View style={styles.daysList}>
              {hours.map((h, i) => (
                <View key={i} style={[styles.dayRow, { borderBottomColor: theme.borderLight }]}>
                  <View style={styles.dayToggleRow}>
                    <Text style={[styles.dayLabel, { color: h.is_open ? theme.text : theme.textMuted }]}>
                      {t.appointments.days[i]}
                    </Text>
                    <Switch
                      value={h.is_open}
                      onValueChange={v => toggle(i, 'is_open', v)}
                      trackColor={{ false: theme.border, true: COLORS.primary }}
                      thumbColor={COLORS.white}
                    />
                  </View>

                  {h.is_open && (
                    <View style={styles.timeRow}>
                      <View style={[styles.timeInput, { backgroundColor: theme.surface, borderColor: theme.border }]}>
                        <Text style={[styles.timeText, { color: theme.text }]}>{h.open_time}</Text>
                      </View>
                      <Text style={[styles.timeSep, { color: theme.textMuted }]}>→</Text>
                      <View style={[styles.timeInput, { backgroundColor: theme.surface, borderColor: theme.border }]}>
                        <Text style={[styles.timeText, { color: theme.text }]}>{h.close_time}</Text>
                      </View>
                      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                        {SLOT_OPTIONS.map(opt => (
                          <TouchableOpacity
                            key={opt.value}
                            onPress={() => toggle(i, 'slot_duration_minutes', opt.value)}
                            style={[
                              styles.slotChip,
                              {
                                backgroundColor: h.slot_duration_minutes === opt.value ? COLORS.primary : theme.bgSecondary,
                                borderColor: h.slot_duration_minutes === opt.value ? COLORS.primary : theme.border,
                              },
                            ]}>
                            <Text style={[
                              styles.slotText,
                              { color: h.slot_duration_minutes === opt.value ? COLORS.white : theme.textSecondary },
                            ]}>
                              {opt.label}
                            </Text>
                          </TouchableOpacity>
                        ))}
                      </ScrollView>
                    </View>
                  )}
                </View>
              ))}
            </View>
          )}

          <Button
            title={t.appointments.save_hours}
            onPress={() => save.mutate()}
            loading={save.isPending}
            fullWidth
          />
        </ScrollView>
      </SafeAreaView>
    </Modal>
  );
}

// ── Appointment Card ──────────────────────────────────────────────────────────

function AppointmentCard({
  appt,
  onUpdateStatus,
  updating,
  theme,
}: {
  appt: Appointment;
  onUpdateStatus: (id: string, status: string) => void;
  updating: boolean;
  theme: any;
}) {
  const { t } = useTranslation();
  const STATUS_LABELS: Record<string, string> = {
    pending: t.appointments.status_pending,
    confirmed: t.appointments.status_confirmed,
    cancelled: t.appointments.status_cancelled,
    completed: t.appointments.status_completed,
  };
  const sc = STATUS_COLORS_APPT[appt.status] ?? STATUS_COLORS_APPT.pending;
  const statusLabel = STATUS_LABELS[appt.status] ?? appt.status;
  const slotDate = new Date(appt.slot_start);
  const slotEnd = new Date(appt.slot_end);
  const isToday = slotDate.toDateString() === new Date().toDateString();

  const monthLabel = slotDate.toLocaleDateString(undefined, { month: 'short' });
  const dayNum = slotDate.getDate();
  const timeRange = `${slotDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })} – ${slotEnd.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}`;

  return (
    <View style={[styles.apptCard, { backgroundColor: theme.surface, borderColor: theme.border }, SHADOWS.sm]}>
      <View style={styles.apptRow}>
        {/* Date block */}
        <View style={[styles.dateBlock, { backgroundColor: COLORS.primaryUltraLight }]}>
          <Text style={[styles.dateMonth, { color: COLORS.primary }]}>{monthLabel}</Text>
          <Text style={[styles.dateDay, { color: COLORS.primaryDark }]}>{dayNum}</Text>
          {isToday && <Text style={[styles.todayLabel, { color: COLORS.primary }]}>Today</Text>}
        </View>

        {/* Details */}
        <View style={styles.apptDetails}>
          <View style={styles.apptTopRow}>
            <Text style={[styles.customerName, { color: theme.text }]} numberOfLines={1}>
              {appt.customer_name}
            </Text>
            <View style={[styles.statusBadge, { backgroundColor: sc.bg }]}>
              <Text style={[styles.statusText, { color: sc.color }]}>{sc.emoji} {statusLabel}</Text>
            </View>
          </View>

          {appt.service && (
            <Text style={[styles.serviceText, { color: theme.textSecondary }]}>{appt.service}</Text>
          )}

          <View style={styles.metaRow}>
            <Text style={[styles.metaText, { color: theme.textMuted }]}>🕐 {timeRange}</Text>
            <Text style={[styles.metaText, { color: theme.textMuted }]}>📞 {appt.customer_contact}</Text>
          </View>

          {appt.notes && (
            <Text style={[styles.notesText, { color: theme.textMuted }]} numberOfLines={2}>
              "{appt.notes}"
            </Text>
          )}

          {/* Actions */}
          {appt.status === 'pending' && (
            <View style={styles.actionRow}>
              <TouchableOpacity
                style={[styles.actionBtn, styles.confirmBtn]}
                onPress={() => onUpdateStatus(appt.id, 'confirmed')}
                disabled={updating}>
                <Text style={styles.confirmBtnText}>✅ {t.appointments.confirm}</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.actionBtn, styles.declineBtn, { borderColor: COLORS.error + '40' }]}
                onPress={() => onUpdateStatus(appt.id, 'cancelled')}
                disabled={updating}>
                <Text style={[styles.declineBtnText, { color: COLORS.error }]}>❌ {t.appointments.decline}</Text>
              </TouchableOpacity>
            </View>
          )}

          {appt.status === 'confirmed' && (
            <View style={styles.actionRow}>
              <TouchableOpacity
                style={[styles.actionBtn, { backgroundColor: theme.bgSecondary, borderColor: theme.border, borderWidth: 1 }]}
                onPress={() => onUpdateStatus(appt.id, 'completed')}
                disabled={updating}>
                <Text style={[styles.actionBtnText, { color: theme.text }]}>✔ {t.appointments.complete}</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={[styles.actionBtn, styles.declineBtn, { borderColor: COLORS.error + '40' }]}
                onPress={() => onUpdateStatus(appt.id, 'cancelled')}
                disabled={updating}>
                <Text style={[styles.declineBtnText, { color: COLORS.error }]}>❌ {t.appointments.cancel}</Text>
              </TouchableOpacity>
            </View>
          )}

          {appt.status === 'cancelled' && (
            <TouchableOpacity
              style={[styles.actionBtn, { backgroundColor: theme.bgSecondary, borderColor: theme.border, borderWidth: 1, alignSelf: 'flex-start' }]}
              onPress={() => onUpdateStatus(appt.id, 'pending')}
              disabled={updating}>
              <Text style={[styles.actionBtnText, { color: theme.text }]}>↩ {t.appointments.status_pending}</Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </View>
  );
}

// ── Main Screen ───────────────────────────────────────────────────────────────

export function AppointmentsScreen() {
  const { theme } = useTheme();
  const { t } = useTranslation();
  const qc = useQueryClient();
  const [chatbotFilter, setChatbotFilter] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [hoursModalChatbotId, setHoursModalChatbotId] = useState<string | null>(null);

  const { data: chatbots = [] } = useQuery<Chatbot[]>({
    queryKey: ['chatbots'],
    queryFn: chatbotsAPI.list,
  });

  const { data: appointments = [], isLoading, refetch, error } = useQuery<Appointment[]>({
    queryKey: ['appointments', chatbotFilter, statusFilter],
    queryFn: () => appointmentsAPI.list({
      chatbot_id: chatbotFilter || undefined,
      status: statusFilter || undefined,
    }),
    retry: false,
  });

  const updateStatus = useMutation({
    mutationFn: ({ id, status }: { id: string; status: string }) =>
      appointmentsAPI.updateStatus(id, status),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['appointments'] }),
  });

  const isPlanError = (error as any)?.response?.status === 402;

  const bookingEnabledChatbots = chatbots.filter(c => c.booking_enabled);

  const now = new Date();
  const upcoming = appointments.filter(a => new Date(a.slot_start) >= now && a.status !== 'cancelled');
  const today = appointments.filter(a => new Date(a.slot_start).toDateString() === now.toDateString());

  const STATUS_FILTERS = [
    { value: '', label: t.inbox.filter_all },
    { value: 'pending', label: `⏳ ${t.appointments.status_pending}` },
    { value: 'confirmed', label: `✅ ${t.appointments.status_confirmed}` },
    { value: 'cancelled', label: `❌ ${t.appointments.status_cancelled}` },
    { value: 'completed', label: `✔ ${t.appointments.status_completed}` },
  ];

  if (isPlanError) {
    return (
      <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['bottom']}>
        <View style={styles.upgradeContainer}>
          <Text style={styles.upgradeEmoji}>🔒</Text>
          <Text style={[styles.upgradeTitle, { color: theme.text }]}>Appointments Require Starter+</Text>
          <Text style={[styles.upgradeDesc, { color: theme.textSecondary }]}>
            Upgrade your plan to enable appointment booking through your chatbots.
          </Text>
        </View>
      </SafeAreaView>
    );
  }

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['bottom']}>
      <ScrollView
        contentContainerStyle={styles.scroll}
        showsVerticalScrollIndicator={false}
        refreshControl={<RefreshControl refreshing={isLoading} onRefresh={refetch} tintColor={COLORS.primary} />}>

        {/* Header */}
        <View style={styles.headerRow}>
          <View>
            <Text style={[styles.pageTitle, { color: theme.text }]}>{t.appointments.title}</Text>
            <Text style={[styles.pageSub, { color: theme.textSecondary }]}>
              {t.appointments.subtitle}
            </Text>
          </View>
          {bookingEnabledChatbots.length > 0 && (
            <TouchableOpacity
              style={[styles.hoursBtn, { backgroundColor: theme.bgSecondary, borderColor: theme.border }]}
              onPress={() => setHoursModalChatbotId(bookingEnabledChatbots[0].id)}>
              <Text style={[styles.hoursBtnText, { color: theme.text }]}>⏱ {t.appointments.configure_hours}</Text>
            </TouchableOpacity>
          )}
        </View>

        {/* Setup prompt when no chatbots have booking enabled */}
        {!isLoading && bookingEnabledChatbots.length === 0 && (
          <View style={[styles.setupCard, { backgroundColor: '#fffbeb', borderColor: '#fde68a' }]}>
            <Text style={styles.setupEmoji}>📅</Text>
            <View style={styles.setupText}>
              <Text style={[styles.setupTitle, { color: '#92400e' }]}>Enable booking on a chatbot</Text>
              <Text style={[styles.setupDesc, { color: '#b45309' }]}>
                Go to your chatbot's settings and enable the booking feature to start accepting appointments.
              </Text>
            </View>
          </View>
        )}

        {/* Stats */}
        {appointments.length > 0 && (
          <View style={styles.statsGrid}>
            {[
              { label: t.analytics.conversations, value: today.length, emoji: '📆', color: '#2563eb' },
              { label: t.appointments.subtitle, value: upcoming.length, emoji: '🗓', color: COLORS.primary },
              { label: t.appointments.status_confirmed, value: appointments.filter(a => a.status === 'confirmed').length, emoji: '✅', color: '#16a34a' },
              { label: t.appointments.status_pending, value: appointments.filter(a => a.status === 'pending').length, emoji: '⏳', color: '#d97706' },
            ].map(s => (
              <View key={s.label} style={[styles.statCard, { backgroundColor: theme.surface, borderColor: theme.border }, SHADOWS.sm]}>
                <Text style={styles.statEmoji}>{s.emoji}</Text>
                <Text style={[styles.statValue, { color: s.color }]}>{s.value}</Text>
                <Text style={[styles.statLabel, { color: theme.textMuted }]}>{s.label}</Text>
              </View>
            ))}
          </View>
        )}

        {/* Filters */}
        <View style={styles.filtersSection}>
          {/* Status filter */}
          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterRow}>
            {STATUS_FILTERS.map(f => (
              <TouchableOpacity
                key={f.value}
                onPress={() => setStatusFilter(f.value)}
                style={[
                  styles.filterChip,
                  {
                    backgroundColor: statusFilter === f.value ? COLORS.primary : theme.bgSecondary,
                    borderColor: statusFilter === f.value ? COLORS.primary : theme.border,
                  },
                ]}>
                <Text style={[styles.filterText, { color: statusFilter === f.value ? COLORS.white : theme.text }]}>
                  {f.label}
                </Text>
              </TouchableOpacity>
            ))}
          </ScrollView>

          {/* Chatbot filter */}
          {bookingEnabledChatbots.length > 1 && (
            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterRow}>
              {[{ id: '', name: 'All chatbots' }, ...bookingEnabledChatbots].map(c => (
                <TouchableOpacity
                  key={c.id}
                  onPress={() => setChatbotFilter(c.id)}
                  style={[
                    styles.filterChip,
                    {
                      backgroundColor: chatbotFilter === c.id ? COLORS.primaryLight : theme.bgSecondary,
                      borderColor: chatbotFilter === c.id ? COLORS.primary : theme.border,
                    },
                  ]}>
                  <Text style={[styles.filterText, { color: chatbotFilter === c.id ? COLORS.primary : theme.text }]}>
                    {c.name}
                  </Text>
                </TouchableOpacity>
              ))}
            </ScrollView>
          )}
        </View>

        {/* Appointments list */}
        {isLoading ? (
          <Spinner centered />
        ) : appointments.length === 0 ? (
          <EmptyState
            icon={<Text style={{ fontSize: 48 }}>📅</Text>}
            title={t.appointments.empty_title}
            description={t.appointments.empty_desc}
          />
        ) : (
          <View style={styles.list}>
            {appointments.map(appt => (
              <AppointmentCard
                key={appt.id}
                appt={appt}
                onUpdateStatus={(id, status) => updateStatus.mutate({ id, status })}
                updating={updateStatus.isPending}
                theme={theme}
              />
            ))}
          </View>
        )}
      </ScrollView>

      {hoursModalChatbotId && (
        <BusinessHoursModal
          visible={!!hoursModalChatbotId}
          chatbotId={hoursModalChatbotId}
          onClose={() => setHoursModalChatbotId(null)}
        />
      )}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
  scroll: { padding: SPACING.lg, gap: SPACING.lg, paddingBottom: SPACING.xxxl },

  headerRow: { flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'space-between', gap: SPACING.md },
  pageTitle: { ...TEXT.h3 },
  pageSub: { ...TEXT.small, marginTop: 2 },
  hoursBtn: {
    borderWidth: 1,
    borderRadius: RADIUS.lg,
    paddingHorizontal: SPACING.md,
    paddingVertical: SPACING.xs,
    flexShrink: 0,
  },
  hoursBtnText: { ...TEXT.small },

  setupCard: {
    borderWidth: 1,
    borderRadius: RADIUS.xl,
    padding: SPACING.lg,
    flexDirection: 'row',
    alignItems: 'flex-start',
    gap: SPACING.md,
  },
  setupEmoji: { fontSize: 28 },
  setupText: { flex: 1, gap: 4 },
  setupTitle: { ...TEXT.bodyM },
  setupDesc: { ...TEXT.small },

  statsGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: SPACING.sm },
  statCard: {
    width: '47.5%',
    borderRadius: RADIUS.xl,
    borderWidth: 1,
    padding: SPACING.md,
    alignItems: 'center',
    gap: 4,
  },
  statEmoji: { fontSize: 22 },
  statValue: { fontSize: FONT_SIZE.xxl, fontWeight: '800' },
  statLabel: { ...TEXT.caption },

  filtersSection: { gap: SPACING.sm },
  filterRow: {},
  filterChip: {
    paddingHorizontal: SPACING.md,
    paddingVertical: SPACING.xs,
    borderRadius: RADIUS.full,
    borderWidth: 1,
    marginRight: SPACING.xs,
  },
  filterText: { ...TEXT.small },

  list: { gap: SPACING.md },

  apptCard: {
    borderRadius: RADIUS.xl,
    borderWidth: 1,
    padding: SPACING.lg,
  },
  apptRow: { flexDirection: 'row', gap: SPACING.md },
  dateBlock: {
    width: 56,
    borderRadius: RADIUS.lg,
    padding: SPACING.sm,
    alignItems: 'center',
    justifyContent: 'center',
    flexShrink: 0,
  },
  dateMonth: { fontSize: FONT_SIZE.xs, fontWeight: '700', textTransform: 'uppercase' },
  dateDay: { fontSize: FONT_SIZE.xxl, fontWeight: '900', lineHeight: 28 },
  todayLabel: { fontSize: FONT_SIZE.xs, fontWeight: '600' },

  apptDetails: { flex: 1, gap: SPACING.xs },
  apptTopRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: SPACING.sm },
  customerName: { ...TEXT.bodyM, flex: 1 },
  statusBadge: { borderRadius: RADIUS.full, paddingHorizontal: SPACING.sm, paddingVertical: 3, flexShrink: 0 },
  statusText: { fontSize: FONT_SIZE.xs, fontWeight: '600' },
  serviceText: { ...TEXT.small },
  metaRow: { gap: 4 },
  metaText: { ...TEXT.caption },
  notesText: { ...TEXT.caption, fontStyle: 'italic' },

  actionRow: { flexDirection: 'row', gap: SPACING.sm, marginTop: SPACING.xs },
  actionBtn: { borderRadius: RADIUS.md, paddingVertical: SPACING.xs, paddingHorizontal: SPACING.md, alignItems: 'center' },
  actionBtnText: { fontWeight: '600', fontSize: FONT_SIZE.sm },
  confirmBtn: { backgroundColor: COLORS.success },
  confirmBtnText: { color: COLORS.white, fontWeight: '600', fontSize: FONT_SIZE.sm },
  declineBtn: { backgroundColor: '#fee2e210', borderWidth: 1 },
  declineBtnText: { fontWeight: '600', fontSize: FONT_SIZE.sm },

  // Modal
  modalSafe: { flex: 1 },
  modalScroll: { padding: SPACING.xl, gap: SPACING.md, paddingBottom: SPACING.xxxl },
  modalHeader: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: SPACING.sm },
  modalTitle: { ...TEXT.h3 },
  closeBtn: { width: 32, height: 32, borderRadius: RADIUS.full, alignItems: 'center', justifyContent: 'center' },
  closeBtnText: { fontSize: FONT_SIZE.sm, fontWeight: '600' },
  modalDesc: { ...TEXT.small, marginBottom: SPACING.sm },

  daysList: { gap: 0 },
  dayRow: { paddingVertical: SPACING.md, borderBottomWidth: 1, gap: SPACING.sm },
  dayToggleRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
  dayLabel: { ...TEXT.bodyM, width: 40 },
  timeRow: { flexDirection: 'row', alignItems: 'center', gap: SPACING.sm, flexWrap: 'wrap' },
  timeInput: { borderWidth: 1, borderRadius: RADIUS.md, paddingHorizontal: SPACING.sm, paddingVertical: SPACING.xs },
  timeText: { fontSize: FONT_SIZE.sm, fontWeight: '500' },
  timeSep: { fontSize: FONT_SIZE.sm },
  slotChip: {
    paddingHorizontal: SPACING.sm,
    paddingVertical: 4,
    borderRadius: RADIUS.full,
    borderWidth: 1,
    marginRight: SPACING.xs,
  },
  slotText: { fontSize: FONT_SIZE.xs, fontWeight: '500' },

  // Upgrade
  upgradeContainer: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: SPACING.xxxl, gap: SPACING.md },
  upgradeEmoji: { fontSize: 48 },
  upgradeTitle: { ...TEXT.h3, textAlign: 'center' },
  upgradeDesc: { ...TEXT.body, textAlign: 'center' },
});
