import {
  View,
  StyleSheet,
  ScrollView,
  Text,
  TouchableOpacity,
  FlatList,
  Modal,
  TextInput,
  Alert,
} from "react-native";
import { useState } from "react";
import { Card } from "@rn-vui/themed";
import {
  Calendar as CalendarIcon,
  Clock,
  MapPin,
  Plus,
  ChevronLeft,
  ChevronRight,
  ChevronDown,
  Check,
  Table,
  Grid3x3,
  Rows3,
  X,
  Save,
} from "lucide-react-native";
import { useEventsByTablo, useCreateEvent } from "@/hooks/events";
import { EventAndTablo, EventInsert } from "@/types/events.types";
import { useTablosList } from "@/hooks/tablos";
import { UserTablo } from "@/types/tablos.types";
import { ColorMap } from "@/constants/colors";
import { useThemeColor } from "@/hooks/useThemeColor";
import { useColorScheme } from "@/hooks/useColorScheme";

type ViewMode = "month" | "week";

const daysOfWeek = ["L", "M", "M", "J", "V", "S", "D"];
const months = [
  "Janvier",
  "Février",
  "Mars",
  "Avril",
  "Mai",
  "Juin",
  "Juillet",
  "Août",
  "Septembre",
  "Octobre",
  "Novembre",
  "Décembre",
];

const getDateFormatted = (date: Date) => {
  // Format date as YYYY-MM-DD using local time (avoiding timezone issues)
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
};

export default function PlanningScreen() {
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [currentMonth, setCurrentMonth] = useState(new Date());
  const [showTabloSelector, setShowTabloSelector] = useState(false);
  const [selectedTablo, setSelectedTablo] = useState<UserTablo | null>(null);
  const [viewMode, setViewMode] = useState<ViewMode>("month");
  const [showCreateEventModal, setShowCreateEventModal] = useState(false);
  const [newEvent, setNewEvent] = useState<Omit<EventInsert, "created_by">>({
    title: "",
    start_date: getDateFormatted(new Date()),
    start_time: "09:00",
    tablo_id: "",
  });
  const { data: events } = useEventsByTablo(null);
  const { data: tablos } = useTablosList();
  const createEvent = useCreateEvent();
  const colorScheme = useColorScheme();

  // Theme-aware colors
  const backgroundColor = useThemeColor({ light: "#f8fafc", dark: "#111827" }, "background");
  const cardBackgroundColor = useThemeColor({ light: "#ffffff", dark: "#1f2937" }, "background");
  const textColor = useThemeColor({ light: "#1f2937", dark: "#f9fafb" }, "text");
  const subtitleColor = useThemeColor({ light: "#6b7280", dark: "#9ca3af" }, "text");
  const borderColor = colorScheme === "dark" ? "#374151" : "#e5e7eb";
  const modalOverlayColor = colorScheme === "dark" ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.5)";
  const inactiveDayColor = colorScheme === "dark" ? "#4b5563" : "#d1d5db";
  const emptyIconColor = colorScheme === "dark" ? "#6b7280" : "#d1d5db";
  const viewModeToggleColor = colorScheme === "dark" ? "#374151" : "#f3f4f6";
  const weekHeaderBorderColor = colorScheme === "dark" ? "#374151" : "#e5e7eb";
  const selectedOptionBgColor = colorScheme === "dark" ? "#1e3a8a" : "#eff6ff";

  const filteredEvents: EventAndTablo[] =
    (selectedTablo === null
      ? events
      : events?.filter((event) => event.tablo_id === selectedTablo.id)) || [];

  const generateCalendarDays = () => {
    const year = currentMonth.getFullYear();
    const month = currentMonth.getMonth();
    const firstDay = new Date(year, month, 1);
    const lastDay = new Date(year, month + 1, 0);
    const startDate = new Date(firstDay);

    // Adjust for Monday as first day of week
    const dayOfWeek = firstDay.getDay();
    const daysFromMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
    startDate.setDate(firstDay.getDate() - daysFromMonday);

    const days = [];
    for (let i = 0; i < 42; i++) {
      const date = new Date(startDate);
      date.setDate(startDate.getDate() + i);
      days.push(date);
    }
    return days;
  };

  const generateWeekDays = () => {
    const startOfWeek = new Date(selectedDate);
    const day = startOfWeek.getDay();
    const diff = startOfWeek.getDate() - day + (day === 0 ? -6 : 1); // Adjust when day is Sunday
    startOfWeek.setDate(diff);

    const days = [];
    for (let i = 0; i < 7; i++) {
      const date = new Date(startOfWeek);
      date.setDate(startOfWeek.getDate() + i);
      days.push(date);
    }
    return days;
  };

  const navigateMonth = (direction: "prev" | "next") => {
    const newDate = new Date(currentMonth);
    newDate.setMonth(currentMonth.getMonth() + (direction === "next" ? 1 : -1));
    setCurrentMonth(newDate);
  };

  const navigateWeek = (direction: "prev" | "next") => {
    const newDate = new Date(selectedDate);
    newDate.setDate(selectedDate.getDate() + (direction === "next" ? 7 : -7));
    setSelectedDate(newDate);
  };

  const isToday = (date: Date) => {
    const today = new Date();
    return date.toDateString() === today.toDateString();
  };

  const isCurrentMonth = (date: Date) => {
    return date.getMonth() === currentMonth.getMonth();
  };

  const isSelected = (date: Date) => {
    return date.toDateString() === selectedDate.toDateString();
  };

  const getEventsForDate = (date: Date) => {
    const dateString = date.toISOString().split("T")[0];
    return filteredEvents.filter((event) => event.start_date === dateString);
  };

  const selectTablo = (tablo: UserTablo | null) => {
    setSelectedTablo(tablo);
    setShowTabloSelector(false);
  };

  const openCreateEventModal = () => {
    setNewEvent({
      title: "",
      start_date: getDateFormatted(selectedDate),
      start_time: "09:00",
      tablo_id: selectedTablo?.id || "",
    });
    setShowCreateEventModal(true);
  };

  const handleCreateEvent = () => {
    if (!newEvent.title.trim()) {
      Alert.alert("Erreur", "Veuillez saisir un titre pour l'événement");
      return;
    }
    if (!newEvent.tablo_id) {
      Alert.alert("Erreur", "Veuillez sélectionner un tablo");
      return;
    }
    createEvent({
      ...newEvent,
      start_date: newEvent.start_date,
      start_time: newEvent.start_time,
    });
    setShowCreateEventModal(false);
  };

  const renderTabloOption = ({ item }: { item: UserTablo }) => (
    <TouchableOpacity
      style={[styles.tabloOption, { borderBottomColor: borderColor }]}
      onPress={() => selectTablo(item)}
    >
      <View style={styles.tabloOptionLeft}>
        <View
          style={[
            styles.tabloColorDot,
            {
              backgroundColor: ColorMap[item.color ?? "bg-gray-500"],
            },
          ]}
        />
        <View style={styles.tabloOptionContent}>
          <Text style={[styles.tabloOptionName, { color: textColor }]}>{item.name}</Text>
        </View>
      </View>
      {selectedTablo?.id === item.id && <Check size={20} color="#3b82f6" />}
    </TouchableOpacity>
  );

  const renderEvent = ({ item }: { item: EventAndTablo }) => (
    <TouchableOpacity
      style={[styles.eventCard, { backgroundColor: cardBackgroundColor, borderColor }]}
    >
      <View style={[styles.eventColorBar, { backgroundColor: item.tablo_color }]} />
      <View style={styles.eventContent}>
        <Text style={[styles.eventTitle, { color: textColor }]}>{item.title}</Text>
        <View style={styles.eventDetails}>
          <View style={styles.eventDetailItem}>
            <Clock size={14} color={subtitleColor} />
            <Text style={[styles.eventDetailText, { color: subtitleColor }]}>
              {item.start_time?.substring(0, 5)}
            </Text>
          </View>
          <View style={styles.eventDetailItem}>
            <MapPin size={14} color={subtitleColor} />
            <Text style={[styles.eventDetailText, { color: subtitleColor }]}>
              {item.tablo_name}
            </Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );

  const renderCalendarDay = (date: Date, index: number) => (
    <TouchableOpacity
      key={index}
      style={[
        styles.dayContainer,
        isSelected(date) && styles.selectedDay,
        isToday(date) && styles.todayDay,
        isSelected(date) && isToday(date) && styles.todaySelectedDay,
      ]}
      onPress={() => setSelectedDate(date)}
    >
      <Text
        style={[
          styles.dayText,
          { color: textColor },
          !isCurrentMonth(date) && { color: inactiveDayColor },
          isSelected(date) && styles.selectedDayText,
          isToday(date) && !isSelected(date) && styles.todayDayText,
        ]}
      >
        {date.getDate()}
      </Text>
      {getEventsForDate(date).length > 0 && <View style={styles.eventDot} />}
    </TouchableOpacity>
  );

  const renderWeekDay = (date: Date, index: number) => {
    const dayEvents = getEventsForDate(date);

    return (
      <View key={index} style={styles.weekDayColumn}>
        <TouchableOpacity
          style={[
            styles.weekDayHeader,
            { backgroundColor: cardBackgroundColor },
            isToday(date) && styles.todayWeekDay,
            isSelected(date) && styles.selectedWeekDay,
            isToday(date) && isSelected(date) && styles.todaySelectedWeekDay,
          ]}
          onPress={() => setSelectedDate(date)}
        >
          <Text
            style={[
              styles.weekDayName,
              { color: subtitleColor },
              isSelected(date) && { color: "white" },
              isToday(date) && isSelected(date) && { color: "white" },
            ]}
          >
            {daysOfWeek[index]}
          </Text>
          <Text
            style={[
              styles.weekDayNumber,
              { color: textColor },
              isSelected(date) && styles.selectedWeekDayText,
              isToday(date) && !isSelected(date) && styles.todayWeekDayText,
              isToday(date) && isSelected(date) && styles.todaySelectedWeekDayText,
            ]}
          >
            {date.getDate()}
          </Text>
        </TouchableOpacity>

        <ScrollView style={styles.weekDayEvents} showsVerticalScrollIndicator={false}>
          {/* Circle indicators for all days */}
          <View style={styles.weekEventCircles}>
            {dayEvents.slice(0, 6).map((event, eventIndex) => (
              <View
                key={eventIndex}
                style={[
                  styles.weekEventCircle,
                  {
                    backgroundColor: ColorMap[event.tablo_color ?? "bg-gray-500"],
                  },
                ]}
              />
            ))}
            {dayEvents.length > 6 && (
              <View style={[styles.weekEventMoreCircle, { backgroundColor: borderColor }]}>
                <Text style={[styles.weekEventMoreText, { color: subtitleColor }]}>
                  +{dayEvents.length - 6}
                </Text>
              </View>
            )}
          </View>
        </ScrollView>
      </View>
    );
  };

  const renderSelectedDayEvents = () => {
    const selectedDayEvents = getEventsForDate(selectedDate);

    return (
      <View style={styles.selectedDayEventsContainer}>
        <View style={styles.selectedDayHeader}>
          <Text style={[styles.selectedDayTitle, { color: textColor }]}>
            {selectedDate.toLocaleDateString("fr-FR", {
              weekday: "long",
              day: "numeric",
              month: "long",
            })}
          </Text>
          <Text style={[styles.selectedDayEventsCount, { color: subtitleColor }]}>
            {selectedDayEvents.length} événement
            {selectedDayEvents.length > 1 ? "s" : ""}
          </Text>
        </View>

        {selectedDayEvents.length > 0 ? (
          <FlatList
            data={selectedDayEvents}
            renderItem={renderEvent}
            keyExtractor={(item) => item.event_id}
            scrollEnabled={false}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={styles.selectedDayEventsList}
          />
        ) : (
          <View style={styles.selectedDayEmptyState}>
            <CalendarIcon size={40} color={emptyIconColor} />
            <Text style={[styles.emptyStateTitle, { color: textColor }]}>Aucun événement</Text>
            <Text style={[styles.emptyStateText, { color: subtitleColor }]}>
              Vous n'avez aucun événement prévu pour cette date.
            </Text>
          </View>
        )}
      </View>
    );
  };

  const calendarDays = generateCalendarDays();
  const weekDays = generateWeekDays();
  const todayEvents = getEventsForDate(selectedDate);

  return (
    <ScrollView
      style={[styles.container, { backgroundColor }]}
      showsVerticalScrollIndicator={false}
    >
      {/* Header */}
      <View style={styles.header}>
        <View>
          <Text style={[styles.headerTitle, { color: textColor }]}>Planning</Text>
          <Text style={[styles.headerSubtitle, { color: subtitleColor }]}>
            {viewMode === "month"
              ? months[currentMonth.getMonth()] + " " + currentMonth.getFullYear()
              : selectedDate.toLocaleDateString("fr-FR", {
                  weekday: "long",
                  year: "numeric",
                  month: "long",
                  day: "numeric",
                })}
          </Text>
        </View>
        <TouchableOpacity style={styles.addButton} onPress={openCreateEventModal}>
          <Plus size={24} color="white" />
        </TouchableOpacity>
      </View>

      {/* View Mode Toggle */}
      <View style={styles.viewModeContainer}>
        <View style={[styles.viewModeToggle, { backgroundColor: viewModeToggleColor }]}>
          <TouchableOpacity
            style={[styles.viewModeButton, viewMode === "month" && styles.activeViewModeButton]}
            onPress={() => setViewMode("month")}
          >
            <Grid3x3 size={18} color={viewMode === "month" ? "white" : subtitleColor} />
            <Text
              style={[
                styles.viewModeText,
                { color: viewMode === "month" ? "white" : subtitleColor },
                viewMode === "month" && styles.activeViewModeText,
              ]}
            >
              Mois
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.viewModeButton, viewMode === "week" && styles.activeViewModeButton]}
            onPress={() => setViewMode("week")}
          >
            <Rows3 size={18} color={viewMode === "week" ? "white" : subtitleColor} />
            <Text
              style={[
                styles.viewModeText,
                { color: viewMode === "week" ? "white" : subtitleColor },
                viewMode === "week" && styles.activeViewModeText,
              ]}
            >
              Semaine
            </Text>
          </TouchableOpacity>
        </View>
      </View>

      {/* Tablo Selector */}
      <View style={styles.tabloSelectorContainer}>
        <TouchableOpacity
          style={[styles.tabloSelector, { backgroundColor: cardBackgroundColor, borderColor }]}
          onPress={() => setShowTabloSelector(true)}
        >
          <View style={styles.tabloSelectorLeft}>
            <Table size={20} color={subtitleColor} />
            <View style={styles.tabloSelectorContent}>
              <Text style={[styles.tabloSelectorLabel, { color: subtitleColor }]}>
                Tablo actuel
              </Text>
              <View style={styles.tabloSelectorRow}>
                <View
                  style={[
                    styles.tabloColorDot,
                    {
                      backgroundColor: selectedTablo?.color
                        ? ColorMap[selectedTablo.color]
                        : subtitleColor,
                    },
                  ]}
                />
                <Text style={[styles.tabloSelectorName, { color: textColor }]}>
                  {selectedTablo?.name ?? "Tous les tablos"}
                </Text>
              </View>
            </View>
          </View>
          <ChevronDown size={20} color={subtitleColor} />
        </TouchableOpacity>
      </View>

      {/* Calendar/Week View */}
      <Card containerStyle={[styles.calendarCard, { backgroundColor: cardBackgroundColor }]}>
        <View style={styles.calendarHeader}>
          <TouchableOpacity
            onPress={() => (viewMode === "month" ? navigateMonth("prev") : navigateWeek("prev"))}
          >
            <ChevronLeft size={24} color="#3b82f6" />
          </TouchableOpacity>
          <Text style={[styles.calendarTitle, { color: textColor }]}>
            {viewMode === "month"
              ? `${months[currentMonth.getMonth()]} ${currentMonth.getFullYear()}`
              : `Semaine du ${weekDays[0].getDate()} ${months[weekDays[0].getMonth()]}`}
          </Text>
          <TouchableOpacity
            onPress={() => (viewMode === "month" ? navigateMonth("next") : navigateWeek("next"))}
          >
            <ChevronRight size={24} color="#3b82f6" />
          </TouchableOpacity>
        </View>

        {viewMode === "month" ? (
          <>
            <View style={[styles.weekHeader, { borderBottomColor: weekHeaderBorderColor }]}>
              {daysOfWeek.map((day, i) => (
                <Text key={`${day}-${i}`} style={[styles.weekDay, { color: subtitleColor }]}>
                  {day}
                </Text>
              ))}
            </View>

            <View style={styles.calendarGrid}>
              {calendarDays.map((date, index) => renderCalendarDay(date, index))}
            </View>
          </>
        ) : (
          <>
            <View style={styles.weekView}>
              {weekDays.map((date, index) => renderWeekDay(date, index))}
            </View>
            {renderSelectedDayEvents()}
          </>
        )}
      </Card>

      {/* Today's Events (only shown in month view) */}
      {viewMode === "month" && (
        <View style={styles.eventsSection}>
          <View style={styles.eventsSectionHeader}>
            <CalendarIcon size={20} color="#3b82f6" />
            <Text style={[styles.eventsSectionTitle, { color: textColor }]}>
              Événements du jour ({todayEvents.length})
            </Text>
          </View>

          {todayEvents.length > 0 ? (
            <FlatList
              data={todayEvents}
              renderItem={renderEvent}
              keyExtractor={(item) => item.event_id}
              scrollEnabled={false}
              showsVerticalScrollIndicator={false}
            />
          ) : (
            <View style={styles.selectedDayEmptyState}>
              <CalendarIcon size={40} color={emptyIconColor} />
              <Text style={[styles.emptyStateTitle, { color: textColor }]}>Aucun événement</Text>
              <Text style={[styles.emptyStateText, { color: subtitleColor }]}>
                Vous n'avez aucun événement prévu pour cette date.
              </Text>
            </View>
          )}
        </View>
      )}

      {/* Tablo Selector Modal */}
      <Modal
        visible={showTabloSelector}
        transparent={true}
        animationType="fade"
        onRequestClose={() => setShowTabloSelector(false)}
      >
        <TouchableOpacity
          style={[styles.modalOverlay, { backgroundColor: modalOverlayColor }]}
          activeOpacity={1}
          onPress={() => setShowTabloSelector(false)}
        >
          <View
            style={[styles.modalContent, { backgroundColor: cardBackgroundColor, borderColor }]}
          >
            <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
              <Text style={[styles.modalTitle, { color: textColor }]}>Choisir un tablo</Text>
            </View>
            <FlatList
              data={tablos ?? []}
              renderItem={renderTabloOption}
              keyExtractor={(item) => item.id}
              showsVerticalScrollIndicator={false}
              ListHeaderComponent={
                <TouchableOpacity
                  style={[styles.tabloOption, { borderBottomColor: borderColor }]}
                  onPress={() => selectTablo(null)}
                >
                  <View style={styles.tabloOptionLeft}>
                    <View
                      style={[
                        styles.tabloColorDot,
                        {
                          backgroundColor: subtitleColor,
                        },
                      ]}
                    />
                    <View style={styles.tabloOptionContent}>
                      <Text style={[styles.tabloOptionName, { color: textColor }]}>
                        Tous les tablos
                      </Text>
                    </View>
                  </View>
                  {selectedTablo === null && <Check size={20} color="#3b82f6" />}
                </TouchableOpacity>
              }
            />
          </View>
        </TouchableOpacity>
      </Modal>

      <Modal
        visible={showCreateEventModal}
        transparent={true}
        animationType="slide"
        onRequestClose={() => setShowCreateEventModal(false)}
      >
        <View style={[styles.createEventModalOverlay, { backgroundColor: modalOverlayColor }]}>
          <View style={[styles.createEventModalContent, { backgroundColor: cardBackgroundColor }]}>
            <View style={[styles.createEventModalHeader, { borderBottomColor: borderColor }]}>
              <Text style={[styles.createEventModalTitle, { color: textColor }]}>
                Nouvel événement
              </Text>
              <TouchableOpacity
                onPress={() => setShowCreateEventModal(false)}
                style={styles.createEventCloseButton}
              >
                <X size={24} color={subtitleColor} />
              </TouchableOpacity>
            </View>

            <ScrollView style={styles.createEventForm} showsVerticalScrollIndicator={false}>
              {/* Title Field */}
              <View style={styles.formField}>
                <Text style={[styles.formLabel, { color: subtitleColor }]}>Titre *</Text>
                <TextInput
                  style={[
                    styles.formInput,
                    {
                      backgroundColor: cardBackgroundColor,
                      borderColor,
                      color: textColor,
                    },
                  ]}
                  value={newEvent.title}
                  onChangeText={(text) => setNewEvent({ ...newEvent, title: text })}
                  placeholder="Titre de l'événement"
                  placeholderTextColor={subtitleColor}
                />
              </View>

              {/* Date Field */}
              <View style={styles.formField}>
                <Text style={[styles.formLabel, { color: subtitleColor }]}>Date</Text>
                <TextInput
                  style={[
                    styles.formInput,
                    {
                      backgroundColor: cardBackgroundColor,
                      borderColor,
                      color: textColor,
                    },
                  ]}
                  value={newEvent.start_date}
                  onChangeText={(text) => setNewEvent({ ...newEvent, start_date: text })}
                  placeholder="YYYY-MM-DD"
                  placeholderTextColor={subtitleColor}
                />
              </View>

              {/* Time Field */}
              <View style={styles.formField}>
                <Text style={[styles.formLabel, { color: subtitleColor }]}>Heure</Text>
                <TextInput
                  style={[
                    styles.formInput,
                    {
                      backgroundColor: cardBackgroundColor,
                      borderColor,
                      color: textColor,
                    },
                  ]}
                  value={newEvent.start_time}
                  onChangeText={(text) => setNewEvent({ ...newEvent, start_time: text })}
                  placeholder="HH:MM"
                  placeholderTextColor={subtitleColor}
                />
              </View>

              {/* Tablo Selector */}
              <View style={styles.formField}>
                <Text style={[styles.formLabel, { color: subtitleColor }]}>Tablo *</Text>
                <FlatList
                  style={[
                    styles.tabloListInForm,
                    { backgroundColor: cardBackgroundColor, borderColor },
                  ]}
                  data={tablos ?? []}
                  renderItem={({ item }) => (
                    <TouchableOpacity
                      style={[
                        styles.tabloOptionInForm,
                        { borderBottomColor: borderColor },
                        newEvent.tablo_id === item.id && {
                          backgroundColor: selectedOptionBgColor,
                        },
                      ]}
                      onPress={() => setNewEvent({ ...newEvent, tablo_id: item.id })}
                    >
                      <View style={styles.tabloOptionLeft}>
                        <View
                          style={[
                            styles.tabloColorDot,
                            {
                              backgroundColor: ColorMap[item.color ?? "bg-gray-500"],
                            },
                          ]}
                        />
                        <Text
                          style={[
                            styles.tabloOptionNameInForm,
                            {
                              color: newEvent.tablo_id === item.id ? "#3b82f6" : textColor,
                            },
                            newEvent.tablo_id === item.id && styles.selectedTabloOptionNameInForm,
                          ]}
                        >
                          {item.name}
                        </Text>
                      </View>
                      {newEvent.tablo_id === item.id && <Check size={20} color="#3b82f6" />}
                    </TouchableOpacity>
                  )}
                  keyExtractor={(item) => item.id}
                  showsVerticalScrollIndicator={false}
                  scrollEnabled={false}
                />
              </View>
            </ScrollView>

            <View style={[styles.createEventModalActions, { borderTopColor: borderColor }]}>
              <TouchableOpacity
                style={[styles.cancelButton, { borderColor }]}
                onPress={() => setShowCreateEventModal(false)}
              >
                <Text style={[styles.cancelButtonText, { color: textColor }]}>Annuler</Text>
              </TouchableOpacity>
              <TouchableOpacity style={styles.saveButton} onPress={handleCreateEvent}>
                <Save size={20} color="white" />
                <Text style={styles.saveButtonText}>Enregistrer</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </Modal>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // backgroundColor is set dynamically
  },
  header: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingTop: 60,
    paddingBottom: 20,
  },
  headerTitle: {
    fontSize: 28,
    fontWeight: "bold",
    // color is set dynamically
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 16,
    // color is set dynamically
    textTransform: "capitalize",
  },
  addButton: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: "#3b82f6",
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#3b82f6",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 6,
  },
  viewModeContainer: {
    paddingHorizontal: 20,
    marginBottom: 20,
  },
  viewModeToggle: {
    flexDirection: "row",
    // backgroundColor is set dynamically
    borderRadius: 12,
    padding: 4,
  },
  viewModeButton: {
    flex: 1,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    paddingVertical: 8,
    paddingHorizontal: 12,
    borderRadius: 8,
    gap: 6,
  },
  activeViewModeButton: {
    backgroundColor: "#3b82f6",
  },
  viewModeText: {
    fontSize: 14,
    fontWeight: "500",
    // color is set dynamically
  },
  activeViewModeText: {
    color: "white",
  },
  tabloSelectorContainer: {
    paddingHorizontal: 20,
    marginBottom: 20,
  },
  tabloSelector: {
    // backgroundColor is set dynamically
    borderRadius: 12,
    padding: 16,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  tabloSelectorLeft: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  tabloSelectorContent: {
    marginLeft: 12,
    flex: 1,
  },
  tabloSelectorLabel: {
    fontSize: 12,
    // color is set dynamically
    marginBottom: 2,
  },
  tabloSelectorRow: {
    flexDirection: "row",
    alignItems: "center",
  },
  tabloSelectorName: {
    fontSize: 16,
    fontWeight: "600",
    // color is set dynamically
    marginLeft: 8,
  },
  tabloColorDot: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  calendarCard: {
    marginHorizontal: 20,
    marginBottom: 20,
    borderRadius: 16,
    padding: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
    borderWidth: 0,
  },
  calendarHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 20,
  },
  calendarTitle: {
    fontSize: 18,
    fontWeight: "600",
    // color is set dynamically
  },
  weekHeader: {
    flexDirection: "row",
    justifyContent: "space-around",
    marginBottom: 16,
    paddingBottom: 12,
    borderBottomWidth: 1,
    // borderBottomColor is set dynamically
  },
  weekDay: {
    fontSize: 14,
    fontWeight: "500",
    // color is set dynamically
    textAlign: "center",
    width: 40,
  },
  calendarGrid: {
    flexDirection: "row",
    flexWrap: "wrap",
  },
  dayContainer: {
    width: "14.28%",
    height: 40,
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
  },
  dayText: {
    fontSize: 16,
    // color is set dynamically
    fontWeight: "500",
  },
  inactiveDayText: {
    // color is set dynamically
  },
  selectedDay: {
    backgroundColor: "#3b82f6",
    borderRadius: 20,
  },
  selectedDayText: {
    color: "white",
    fontWeight: "600",
  },
  todaySelectedDay: {
    backgroundColor: "#f5100b",
  },
  todayDay: {
    backgroundColor: "#fef3c7",
    borderRadius: 20,
  },
  todayDayText: {
    color: "#f59e0b",
    fontWeight: "600",
  },
  todaySelectedDayText: {
    color: "white",
    fontWeight: "600",
  },
  eventDot: {
    position: "absolute",
    bottom: 4,
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: "#ef4444",
  },
  // Week View Styles
  weekView: {
    flexDirection: "row",
    height: 100,
  },
  weekDayColumn: {
    flex: 1,
    marginHorizontal: 2,
  },
  weekDayHeader: {
    // backgroundColor is set dynamically
    borderRadius: 8,
    padding: 8,
    alignItems: "center",
    marginBottom: 8,
  },
  selectedWeekDay: {
    backgroundColor: "#3b82f6",
  },
  todaySelectedWeekDay: {
    backgroundColor: "#f5100b",
  },
  todayWeekDay: {
    backgroundColor: "#fef3c7",
  },
  weekDayName: {
    fontSize: 12,
    // color is set dynamically
    fontWeight: "500",
  },
  weekDayNumber: {
    fontSize: 16,
    // color is set dynamically
    fontWeight: "600",
    marginTop: 2,
  },
  selectedWeekDayText: {
    color: "white",
  },
  todayWeekDayText: {
    color: "#f59e0b",
  },
  todaySelectedWeekDayText: {
    color: "white",
  },
  weekDayEvents: {
    flex: 1,
  },
  weekEventCard: {
    backgroundColor: "white",
    borderRadius: 6,
    marginBottom: 4,
    flexDirection: "row",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  weekEventBar: {
    width: 3,
    borderTopLeftRadius: 6,
    borderBottomLeftRadius: 6,
  },
  weekEventContent: {
    flex: 1,
    padding: 8,
  },
  weekEventTitle: {
    fontSize: 11,
    fontWeight: "600",
    color: "#1f2937",
    marginBottom: 2,
  },
  weekEventTime: {
    fontSize: 7,
    color: "#6b7280",
  },
  weekEventTablo: {
    fontSize: 10,
    color: "#6b7280",
    marginTop: 2,
  },
  weekEventCircles: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    alignItems: "center",
    marginTop: 4,
  },
  weekEventCircle: {
    width: 10,
    height: 10,
    borderRadius: 5,
    margin: 2,
  },
  weekEventMoreCircle: {
    width: 20,
    height: 20,
    borderRadius: 10,
    // backgroundColor is set dynamically
    justifyContent: "center",
    alignItems: "center",
    margin: 2,
  },
  weekEventMoreText: {
    fontSize: 10,
    // color is set dynamically
  },
  weekEmptySlot: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    opacity: 0.5,
  },
  weekEmptyText: {
    fontSize: 10,
    color: "#9ca3af",
    textAlign: "center",
  },
  eventsSection: {
    paddingHorizontal: 20,
    paddingBottom: 40,
  },
  eventsSectionHeader: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
  },
  eventsSectionTitle: {
    fontSize: 18,
    fontWeight: "600",
    // color is set dynamically
    marginLeft: 8,
  },
  eventCard: {
    borderRadius: 12,
    marginBottom: 12,
    flexDirection: "row",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    borderWidth: 1,
  },
  eventColorBar: {
    width: 4,
    borderTopLeftRadius: 12,
    borderBottomLeftRadius: 12,
  },
  eventContent: {
    flex: 1,
    padding: 16,
  },
  eventTitle: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 8,
  },
  eventDetails: {
    gap: 6,
  },
  eventDetailItem: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  eventDetailText: {
    fontSize: 14,
  },
  emptyState: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    padding: 40,
    borderRadius: 12,
    borderWidth: 0,
  },
  emptyStateTitle: {
    fontSize: 18,
    fontWeight: "600",
    // color is set dynamically
    marginTop: 8,
    marginBottom: 8,
  },
  emptyStateText: {
    fontSize: 14,
    // color is set dynamically
    textAlign: "center",
    lineHeight: 20,
  },
  modalOverlay: {
    flex: 1,
    // backgroundColor is set dynamically
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 20,
  },
  modalContent: {
    borderRadius: 16,
    width: "100%",
    maxWidth: 400,
    maxHeight: "70%",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.25,
    shadowRadius: 20,
    elevation: 10,
    borderWidth: 1,
  },
  modalHeader: {
    padding: 20,
    borderBottomWidth: 1,
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: "600",
    textAlign: "center",
  },
  tabloOption: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
    borderBottomWidth: 1,
  },
  tabloOptionLeft: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
  },
  tabloOptionContent: {
    marginLeft: 12,
    flex: 1,
  },
  tabloOptionName: {
    fontSize: 16,
    fontWeight: "500",
    marginBottom: 2,
  },
  tabloOptionCount: {
    fontSize: 12,
    color: "#6b7280",
  },
  selectedWeekDayColumn: {
    flex: 1, // Make selected day column wider
  },
  selectedDayEventsContainer: {
    marginTop: 8,
    paddingHorizontal: 10,
  },
  selectedDayHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 12,
  },
  selectedDayTitle: {
    fontSize: 18,
    fontWeight: "600",
    // color is set dynamically
  },
  selectedDayEventsCount: {
    fontSize: 14,
    // color is set dynamically
  },
  selectedDayEventsList: {
    paddingBottom: 10,
  },
  selectedDayEmptyState: {
    alignItems: "center",
    padding: 40,
    borderRadius: 12,
    borderWidth: 0,
  },
  // Create Event Modal Styles
  createEventModalOverlay: {
    flex: 1,
    // backgroundColor is set dynamically
    justifyContent: "flex-end",
  },
  createEventModalContent: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    maxHeight: "90%",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -5 },
    shadowOpacity: 0.25,
    shadowRadius: 20,
    elevation: 10,
  },
  createEventModalHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 20,
    borderBottomWidth: 1,
  },
  createEventModalTitle: {
    fontSize: 20,
    fontWeight: "600",
  },
  createEventCloseButton: {
    padding: 4,
  },
  createEventForm: {
    padding: 20,
    maxHeight: 400,
  },
  formField: {
    marginBottom: 20,
  },
  formLabel: {
    fontSize: 16,
    fontWeight: "500",
    marginBottom: 8,
  },
  formInput: {
    borderWidth: 1,
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
  },
  tabloListInForm: {
    borderWidth: 1,
    borderRadius: 8,
    maxHeight: 150,
  },
  tabloOptionInForm: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 12,
    borderBottomWidth: 1,
  },
  selectedTabloOptionInForm: {
    // backgroundColor is set dynamically
  },
  tabloOptionNameInForm: {
    fontSize: 16,
    fontWeight: "500",
    marginLeft: 8,
  },
  selectedTabloOptionNameInForm: {
    color: "#3b82f6",
  },
  createEventModalActions: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 20,
    borderTopWidth: 1,
    gap: 12,
  },
  cancelButton: {
    flex: 1,
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    borderWidth: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  cancelButtonText: {
    fontSize: 16,
    fontWeight: "500",
  },
  saveButton: {
    flex: 1,
    flexDirection: "row",
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    backgroundColor: "#3b82f6",
    alignItems: "center",
    justifyContent: "center",
    gap: 8,
  },
  saveButtonText: {
    fontSize: 16,
    fontWeight: "500",
    color: "white",
  },
});
