import React, { useState, useMemo } from 'react';
import { Alert, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, Image } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useNavigation } from '@react-navigation/native';
import * as ImagePicker from 'expo-image-picker';
import { useApp } from '../context/AppContext';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { currency } from '../lib/format';
import { supabase } from '../lib/supabase';

type Tab = 'agenda' | 'servicos' | 'produtos' | 'equipa' | 'perfil';

const statusColor: Record<string, string> = {
  pendente: '#6366f1',
  confirmado: '#10b981',
  concluido: '#10b981',
  cancelado: '#ef4444',
};

const statusLabel: Record<string, string> = {
  pendente: 'Pendente',
  confirmado: 'Confirmado',
  concluido: 'Concluído',
  cancelado: 'Cancelado',
};

export default function Dashboard() {
  const navigation = useNavigation();
  const {
    user,
    shops,
    appointments,
    refreshShops,
    updateAppointmentStatus,
    addService,
    deleteService,
    addProduct,
    deleteProduct,
    addBarber,
    deleteBarber,
    updateShopDetails,
  } = useApp();

  const shop = useMemo(() => shops.find((s) => s.id === user?.shopId), [shops, user?.shopId]);
  const [activeTab, setActiveTab] = useState<Tab>('agenda');
  const [loading, setLoading] = useState(false);

  // Agenda Filters
  const [dateFilter, setDateFilter] = useState(new Date().toISOString().split('T')[0]);
  const shopAppointments = useMemo(() => {
    return appointments
      .filter((a) => a.shopId === shop?.id && a.date.startsWith(dateFilter))
      .sort((a, b) => a.date.localeCompare(b.date));
  }, [appointments, shop?.id, dateFilter]);

  // Form states
  const [formSvc, setFormSvc] = useState({ name: '', price: '', duration: '' });
  const [formProd, setFormProd] = useState({ name: '', price: '', stock: '' });
  const [formBarb, setFormBarb] = useState({ name: '', specialties: '' });

  // Settings states
  const [shopName, setShopName] = useState(shop?.name || '');
  const [shopAddr, setShopAddr] = useState(shop?.address || '');
  const [phone1, setPhone1] = useState(shop?.contacts?.phone1 || '');
  const [whatsapp, setWhatsapp] = useState(shop?.socialNetworks?.whatsapp || '');
  const [instagram, setInstagram] = useState(shop?.socialNetworks?.instagram || '');
  const [facebook, setFacebook] = useState(shop?.socialNetworks?.facebook || '');
  const [paymentMethods, setPaymentMethods] = useState(shop?.paymentMethods?.join(', ') || '');
  const [schedule, setSchedule] = useState(shop?.schedule || [
    { day: 'Segunda', open: '09:00', close: '19:00' },
    { day: 'Terça', open: '09:00', close: '19:00' },
    { day: 'Quarta', open: '09:00', close: '19:00' },
    { day: 'Quinta', open: '09:00', close: '19:00' },
    { day: 'Sexta', open: '09:00', close: '19:00' },
    { day: 'Sábado', open: '09:00', close: '18:00' },
    { day: 'Domingo', open: '00:00', close: '00:00', closed: true },
  ]);

  const pickImage = async (target: 'shop' | 'barber', barberId?: string) => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing: true,
      aspect: [16, 9],
      quality: 0.5,
    });

    if (!result.canceled && result.assets[0].uri) {
      setLoading(true);
      try {
        const uri = result.assets[0].uri;
        const fileExt = uri.split('.').pop();
        const fileName = `${Date.now()}.${fileExt}`;
        const filePath = `shop-${shop?.id}/${fileName}`;

        const formData = new FormData();
        formData.append('file', {
          uri,
          name: fileName,
          type: `image/${fileExt}`,
        } as any);

        const { data: uploadData, error: uploadError } = await supabase.storage
          .from('shops')
          .upload(filePath, formData);

        if (uploadError) throw uploadError;

        const { data: { publicUrl } } = supabase.storage
          .from('shops')
          .getPublicUrl(filePath);

        if (target === 'shop') {
          await updateShopDetails(shop!.id, { imageUrl: publicUrl });
        } else if (barberId) {
          const b = shop?.barbers.find(x => x.id === barberId);
          if (b) {
            // Update barber logic in context or direct supabase
            await supabase.from('barbers').update({ image_url: publicUrl }).eq('id', barberId);
          }
        }
        await refreshShops();
      } catch (e: any) {
        Alert.alert('Erro no Upload', e.message);
      } finally {
        setLoading(false);
      }
    }
  };

  const handleSaveSettings = async () => {
    if (!shop) return;
    setLoading(true);
    try {
      await updateShopDetails(shop.id, {
        name: shopName,
        address: shopAddr,
        contacts: { phone1 },
        socialNetworks: { whatsapp, instagram, facebook },
        paymentMethods: paymentMethods.split(',').map(s => s.trim()).filter(Boolean),
        schedule,
      });
      Alert.alert('Sucesso', 'Definições guardadas com sucesso.');
      await refreshShops();
    } catch (e: any) {
      Alert.alert('Erro', e.message);
    } finally {
      setLoading(false);
    }
  };

  if (!shop) return null;

  return (
    <SafeAreaView style={styles.container}>
      {/* Header Dashboard */}
      <View style={styles.header}>
        <Image 
          source={require('../../assets/logo.png')} 
          style={styles.headerLogo} 
          resizeMode="contain"
        />
        <TouchableOpacity style={styles.brandPill} onPress={() => navigation.navigate('BarberProfileTab' as never)}>
          <Text style={styles.brandText}>{user?.name.charAt(0)}</Text>
        </TouchableOpacity>
      </View>

      {/* Tabs Horizontais */}
      <View style={styles.tabContainer}>
        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tabsScroll}>
          {[
            ['agenda', 'Agenda'],
            ['servicos', 'Serviços'],
            ['produtos', 'Produtos'],
            ['equipa', 'Equipa'],
            ['perfil', 'Definições'],
          ].map(([id, label]) => (
            <TouchableOpacity
              key={id}
              onPress={() => setActiveTab(id as Tab)}
              style={[styles.tabItem, activeTab === id && styles.tabItemActive]}
            >
              <Text style={[styles.tabText, activeTab === id && styles.tabTextActive]}>{label}</Text>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>

      <ScrollView contentContainerStyle={styles.content}>
        {activeTab === 'agenda' && (
          <View style={styles.tabBox}>
            <View style={styles.agendaHeader}>
              <Text style={styles.sectionTitle}>Marcações</Text>
              <TextInput
                value={dateFilter}
                onChangeText={setDateFilter}
                placeholder="AAAA-MM-DD"
                placeholderTextColor="#475569"
                style={styles.dateInput}
              />
            </View>

            {shopAppointments.length > 0 ? (
              shopAppointments.map((appt) => {
                const svc = shop.services.find(s => s.id === appt.serviceId);
                const barb = shop.barbers.find(b => b.id === appt.barberId);
                return (
                  <Card key={appt.id} style={styles.agendaTicket}>
                    <View style={styles.ticketSide}>
                      <Text style={styles.ticketTime}>{appt.date.split(' ')[1]}</Text>
                      <View style={[styles.ticketDot, { backgroundColor: statusColor[appt.status] }]} />
                    </View>
                    <View style={styles.ticketMain}>
                      <View style={styles.ticketRow}>
                        <Text style={styles.ticketSvc}>{svc?.name || 'Serviço'}</Text>
                        <Text style={styles.ticketPrice}>{currency(appt.total)}</Text>
                      </View>
                      <Text style={styles.ticketMeta}>Profissional: {barb?.name}</Text>
                      <View style={styles.ticketActions}>
                        {appt.status === 'pendente' && (
                          <TouchableOpacity onPress={() => updateAppointmentStatus(appt.id, 'confirmado')} style={styles.confirmBtn}>
                            <Text style={styles.confirmBtnTxt}>Confirmar</Text>
                          </TouchableOpacity>
                        )}
                        {appt.status !== 'cancelado' && appt.status !== 'concluido' && (
                          <TouchableOpacity onPress={() => updateAppointmentStatus(appt.id, 'cancelado')} style={styles.cancelBtn}>
                            <Text style={styles.cancelBtnTxt}>Cancelar</Text>
                          </TouchableOpacity>
                        )}
                      </View>
                    </View>
                  </Card>
                );
              })
            ) : (
              <View style={styles.emptyBox}>
                <Text style={styles.emptyTxt}>Sem marcações para hoje.</Text>
              </View>
            )}
          </View>
        )}

        {activeTab === 'servicos' && (
          <View style={styles.tabBox}>
            <Text style={styles.sectionTitle}>Serviços Disponíveis</Text>
            {shop.services.map(s => (
              <Card key={s.id} style={styles.itemCard}>
                <View style={styles.itemInfo}>
                  <Text style={styles.itemName}>{s.name}</Text>
                  <Text style={styles.itemMeta}>{s.duration} min · {currency(s.price)}</Text>
                </View>
                <TouchableOpacity onPress={() => deleteService(shop.id, s.id)} style={styles.deleteIcon}>
                  <Text style={styles.deleteTxt}>✕</Text>
                </TouchableOpacity>
              </Card>
            ))}
            
            <Card style={styles.formCard}>
              <Text style={styles.formTitle}>Novo Serviço</Text>
              <TextInput style={styles.input} placeholder="Nome do serviço" placeholderTextColor="#475569" value={formSvc.name} onChangeText={t => setFormSvc({...formSvc, name: t})} />
              <View style={styles.row}>
                <TextInput style={[styles.input, {flex: 1}]} placeholder="Preço (€)" placeholderTextColor="#475569" keyboardType="numeric" value={formSvc.price} onChangeText={t => setFormSvc({...formSvc, price: t})} />
                <TextInput style={[styles.input, {flex: 1}]} placeholder="Duração (min)" placeholderTextColor="#475569" keyboardType="numeric" value={formSvc.duration} onChangeText={t => setFormSvc({...formSvc, duration: t})} />
              </View>
              <Button size="sm" onPress={async () => {
                try {
                  await addService(shop.id, { name: formSvc.name, price: Number(formSvc.price), duration: Number(formSvc.duration), barberIds: [] });
                  setFormSvc({ name: '', price: '', duration: '' });
                  Alert.alert('Sucesso', 'Serviço adicionado.');
                } catch (e: any) {
                  Alert.alert('Erro', e.message || 'Erro ao adicionar serviço.');
                }
              }}>Adicionar Serviço</Button>
            </Card>
          </View>
        )}

        {activeTab === 'produtos' && (
          <View style={styles.tabBox}>
            <Text style={styles.sectionTitle}>Inventário de Produtos</Text>
            {shop.products.map(p => (
              <Card key={p.id} style={styles.itemCard}>
                <View style={styles.itemInfo}>
                  <Text style={styles.itemName}>{p.name}</Text>
                  <Text style={styles.itemMeta}>Stock: {p.stock} · {currency(p.price)}</Text>
                </View>
                <TouchableOpacity onPress={() => deleteProduct(shop.id, p.id)} style={styles.deleteIcon}>
                  <Text style={styles.deleteTxt}>✕</Text>
                </TouchableOpacity>
              </Card>
            ))}

            <Card style={styles.formCard}>
              <Text style={styles.formTitle}>Novo Produto</Text>
              <TextInput style={styles.input} placeholder="Nome do produto" placeholderTextColor="#475569" value={formProd.name} onChangeText={t => setFormProd({...formProd, name: t})} />
              <View style={styles.row}>
                <TextInput style={[styles.input, {flex: 1}]} placeholder="Preço (€)" placeholderTextColor="#475569" keyboardType="numeric" value={formProd.price} onChangeText={t => setFormProd({...formProd, price: t})} />
                <TextInput style={[styles.input, {flex: 1}]} placeholder="Stock" placeholderTextColor="#475569" keyboardType="numeric" value={formProd.stock} onChangeText={t => setFormProd({...formProd, stock: t})} />
              </View>
              <Button size="sm" onPress={async () => {
                try {
                  await addProduct(shop.id, { name: formProd.name, price: Number(formProd.price), stock: Number(formProd.stock) });
                  setFormProd({ name: '', price: '', stock: '' });
                  Alert.alert('Sucesso', 'Produto adicionado.');
                } catch (e: any) {
                  Alert.alert('Erro', e.message || 'Erro ao adicionar produto.');
                }
              }}>Adicionar Produto</Button>
            </Card>
          </View>
        )}

        {activeTab === 'equipa' && (
          <View style={styles.tabBox}>
            <Text style={styles.sectionTitle}>Membros da Equipa</Text>
            {shop.barbers.map(b => (
              <Card key={b.id} style={styles.itemCard}>
                <TouchableOpacity onPress={() => pickImage('barber', b.id)} style={styles.barberAvatar}>
                  {b.imageUrl ? <Image source={{uri: b.imageUrl}} style={styles.fullImg} /> : <Text style={styles.avatarTxt}>{b.name.charAt(0)}</Text>}
                </TouchableOpacity>
                <View style={styles.itemInfo}>
                  <Text style={styles.itemName}>{b.name}</Text>
                  <Text style={styles.itemMeta}>{b.specialties.join(', ')}</Text>
                </View>
                <TouchableOpacity onPress={() => deleteBarber(shop.id, b.id)} style={styles.deleteIcon}>
                  <Text style={styles.deleteTxt}>✕</Text>
                </TouchableOpacity>
              </Card>
            ))}

            <Card style={styles.formCard}>
              <Text style={styles.formTitle}>Novo Profissional</Text>
              <TextInput style={styles.input} placeholder="Nome do profissional" placeholderTextColor="#475569" value={formBarb.name} onChangeText={t => setFormBarb({...formBarb, name: t})} />
              <TextInput style={styles.input} placeholder="Especialidades (separadas por vírgula)" placeholderTextColor="#475569" value={formBarb.specialties} onChangeText={t => setFormBarb({...formBarb, specialties: t})} />
              <Button size="sm" onPress={async () => {
                try {
                  await addBarber(shop.id, { 
                    name: formBarb.name, 
                    specialties: formBarb.specialties.split(',').map(s => s.trim()).filter(Boolean),
                    schedule: []
                  });
                  setFormBarb({ name: '', specialties: '' });
                  Alert.alert('Sucesso', 'Membro adicionado.');
                } catch (e: any) {
                  Alert.alert('Erro', e.message || 'Erro ao adicionar membro.');
                }
              }}>Adicionar Membro</Button>
            </Card>
          </View>
        )}

        {activeTab === 'perfil' && (
          <View style={styles.tabBox}>
            <Text style={styles.sectionTitle}>Configurações do Espaço</Text>
            <TouchableOpacity onPress={() => pickImage('shop')} style={styles.coverUpload}>
              {shop.imageUrl ? (
                <Image source={{ uri: shop.imageUrl }} style={styles.fullImg} />
              ) : (
                <Text style={styles.uploadTxt}>Alterar Foto de Capa</Text>
              )}
              <View style={styles.uploadOverlay}><Text style={styles.uploadIcon}>📷</Text></View>
            </TouchableOpacity>
            
            <Card style={styles.formCard}>
              <Text style={styles.inputLabel}>Informação Geral</Text>
              <TextInput style={styles.input} placeholder="Nome da Barbearia" placeholderTextColor="#475569" value={shopName} onChangeText={setShopName} />
              <TextInput style={styles.input} placeholder="Endereço Completo" placeholderTextColor="#475569" value={shopAddr} onChangeText={setShopAddr} />
              <TextInput style={styles.input} placeholder="Telefone de Contacto" placeholderTextColor="#475569" value={phone1} onChangeText={setPhone1} keyboardType="phone-pad" />
              
              <Text style={[styles.inputLabel, { marginTop: 12 }]}>Redes Sociais</Text>
              <TextInput style={styles.input} placeholder="WhatsApp (ex: 351912345678)" placeholderTextColor="#475569" value={whatsapp} onChangeText={setWhatsapp} />
              <TextInput style={styles.input} placeholder="Instagram (User)" placeholderTextColor="#475569" value={instagram} onChangeText={setInstagram} />
              <TextInput style={styles.input} placeholder="Facebook (Link)" placeholderTextColor="#475569" value={facebook} onChangeText={setFacebook} />

              <Text style={[styles.inputLabel, { marginTop: 12 }]}>Pagamentos</Text>
              <TextInput style={styles.input} placeholder="Métodos (ex: Dinheiro, MBWay, Cartão)" placeholderTextColor="#475569" value={paymentMethods} onChangeText={setPaymentMethods} />
              
              <Text style={[styles.inputLabel, { marginTop: 12 }]}>Horário de Funcionamento</Text>
              {schedule.map((s, idx) => (
                <View key={s.day} style={styles.scheduleRow}>
                  <Text style={styles.dayLabel}>{s.day}</Text>
                  <TouchableOpacity 
                    onPress={() => {
                      const next = [...schedule];
                      next[idx] = { ...next[idx], closed: !next[idx].closed };
                      setSchedule(next);
                    }}
                    style={[styles.closedBtn, s.closed && styles.closedBtnActive]}
                  >
                    <Text style={[styles.closedText, s.closed && styles.closedTextActive]}>
                      {s.closed ? 'Fechado' : 'Aberto'}
                    </Text>
                  </TouchableOpacity>
                  {!s.closed && (
                    <View style={styles.timeInputs}>
                      <TextInput 
                        style={styles.timeInput} 
                        value={s.open} 
                        onChangeText={t => {
                          const next = [...schedule];
                          next[idx] = { ...next[idx], open: t };
                          setSchedule(next);
                        }}
                      />
                      <Text style={{ color: '#475569' }}>-</Text>
                      <TextInput 
                        style={styles.timeInput} 
                        value={s.close} 
                        onChangeText={t => {
                          const next = [...schedule];
                          next[idx] = { ...next[idx], close: t };
                          setSchedule(next);
                        }}
                      />
                    </View>
                  )}
                </View>
              ))}

              <Button style={{ marginTop: 10 }} onPress={handleSaveSettings} loading={loading}>Guardar Todas as Alterações</Button>
            </Card>
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#0a0a0f',
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 16,
  },
  headerLogo: {
    width: 140,
    height: 40,
  },
  brandPill: {
    width: 44,
    height: 44,
    borderRadius: 14,
    backgroundColor: '#141420',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'rgba(99,102,241,0.3)',
  },
  brandText: {
    color: '#818cf8',
    fontSize: 18,
    fontWeight: '900',
  },
  tabContainer: {
    backgroundColor: '#141420',
    paddingVertical: 4,
  },
  tabsScroll: {
    paddingHorizontal: 20,
    gap: 16,
  },
  tabItem: {
    paddingVertical: 14,
    borderBottomWidth: 2,
    borderBottomColor: 'transparent',
  },
  tabItemActive: {
    borderBottomColor: '#6366f1',
  },
  tabText: {
    color: '#475569',
    fontSize: 14,
    fontWeight: '700',
  },
  tabTextActive: {
    color: '#f8fafc',
  },
  content: {
    padding: 20,
    paddingBottom: 40,
  },
  tabBox: {
    gap: 20,
  },
  agendaHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  sectionTitle: {
    color: '#f8fafc',
    fontSize: 18,
    fontWeight: '800',
  },
  dateInput: {
    backgroundColor: '#141420',
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 6,
    color: '#f8fafc',
    fontSize: 13,
    fontWeight: '700',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.06)',
  },
  agendaTicket: {
    flexDirection: 'row',
    padding: 0,
    overflow: 'hidden',
    height: 110,
  },
  ticketSide: {
    width: 70,
    backgroundColor: '#1c1c2e',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
  },
  ticketTime: {
    color: '#f8fafc',
    fontSize: 18,
    fontWeight: '900',
  },
  ticketDot: {
    width: 8,
    height: 8,
    borderRadius: 4,
  },
  ticketMain: {
    flex: 1,
    padding: 16,
    justifyContent: 'center',
  },
  ticketRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  ticketSvc: {
    color: '#f8fafc',
    fontSize: 16,
    fontWeight: '800',
  },
  ticketPrice: {
    color: '#a5b4fc',
    fontSize: 15,
    fontWeight: '800',
  },
  ticketMeta: {
    color: '#64748b',
    fontSize: 12,
    marginTop: 4,
  },
  ticketActions: {
    flexDirection: 'row',
    gap: 12,
    marginTop: 12,
  },
  confirmBtn: {
    backgroundColor: 'rgba(16,185,129,0.15)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 8,
  },
  confirmBtnTxt: {
    color: '#10b981',
    fontSize: 11,
    fontWeight: '800',
    textTransform: 'uppercase',
  },
  cancelBtn: {
    backgroundColor: 'rgba(239,68,68,0.15)',
    paddingHorizontal: 10,
    paddingVertical: 5,
    borderRadius: 8,
  },
  cancelBtnTxt: {
    color: '#ef4444',
    fontSize: 11,
    fontWeight: '800',
    textTransform: 'uppercase',
  },
  emptyBox: {
    alignItems: 'center',
    padding: 40,
    backgroundColor: '#141420',
    borderRadius: 20,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.06)',
    borderStyle: 'dashed',
  },
  emptyTxt: {
    color: '#475569',
    fontSize: 14,
    fontWeight: '600',
  },
  itemCard: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 14,
    padding: 14,
  },
  itemInfo: {
    flex: 1,
  },
  itemName: {
    color: '#f8fafc',
    fontSize: 16,
    fontWeight: '800',
  },
  itemMeta: {
    color: '#64748b',
    fontSize: 13,
  },
  deleteIcon: {
    width: 32,
    height: 32,
    borderRadius: 10,
    backgroundColor: 'rgba(239,68,68,0.1)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  deleteTxt: {
    color: '#ef4444',
    fontSize: 12,
    fontWeight: '900',
  },
  formCard: {
    padding: 20,
    gap: 12,
    borderWidth: 1.5,
    borderColor: 'rgba(99,102,241,0.2)',
  },
  formTitle: {
    color: '#f8fafc',
    fontSize: 16,
    fontWeight: '800',
    marginBottom: 4,
  },
  input: {
    backgroundColor: '#1c1c2e',
    borderRadius: 12,
    paddingHorizontal: 14,
    paddingVertical: 12,
    color: '#f8fafc',
    fontSize: 14,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.04)',
    marginBottom: 8,
  },
  inputLabel: {
    color: '#94a3b8',
    fontSize: 12,
    fontWeight: '700',
    textTransform: 'uppercase',
    letterSpacing: 0.5,
    marginBottom: 8,
  },
  row: {
    flexDirection: 'row',
    gap: 12,
  },
  barberAvatar: {
    width: 48,
    height: 48,
    borderRadius: 14,
    backgroundColor: '#1c1c2e',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  avatarTxt: {
    color: '#6366f1',
    fontSize: 20,
    fontWeight: '900',
  },
  coverUpload: {
    height: 180,
    borderRadius: 22,
    backgroundColor: '#141420',
    overflow: 'hidden',
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.06)',
  },
  fullImg: {
    width: '100%',
    height: '100%',
  },
  uploadOverlay: {
    position: 'absolute',
    bottom: 12,
    right: 12,
    width: 40,
    height: 40,
    borderRadius: 20,
    backgroundColor: '#6366f1',
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 4,
  },
  uploadIcon: {
    fontSize: 18,
  },
  uploadTxt: {
    color: '#475569',
    fontSize: 14,
    fontWeight: '700',
  },
  scheduleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
    marginBottom: 10,
  },
  dayLabel: {
    color: '#f8fafc',
    fontSize: 13,
    fontWeight: '700',
    width: 65,
  },
  closedBtn: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 6,
    backgroundColor: 'rgba(16,185,129,0.1)',
    borderWidth: 1,
    borderColor: 'rgba(16,185,129,0.2)',
  },
  closedBtnActive: {
    backgroundColor: 'rgba(239,68,68,0.1)',
    borderColor: 'rgba(239,68,68,0.2)',
  },
  closedText: {
    color: '#10b981',
    fontSize: 11,
    fontWeight: '800',
  },
  closedTextActive: {
    color: '#ef4444',
  },
  timeInputs: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  timeInput: {
    backgroundColor: '#1c1c2e',
    borderRadius: 8,
    paddingHorizontal: 8,
    paddingVertical: 4,
    color: '#f8fafc',
    fontSize: 12,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.04)',
    width: 55,
    textAlign: 'center',
  },
});
