import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  StatusBar,
  FlatList,
  RefreshControl,
  Alert,
  Dimensions,
  Modal,
  TextInput,
  ScrollView,
  KeyboardAvoidingView,
  Platform,
} from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import { useCreateTablo, useTablosList, useDeleteTablo } from "@/hooks/tablos";
import { UserTablo } from "@/types/tablos.types";
import {
  Plus,
  Search,
  Filter,
  Grid3X3,
  List,
  Calendar,
  MessageCircle,
  X,
} from "lucide-react-native";
import { router } from "expo-router";
import { AVAILABLE_COLORS, ColorMap } from "@/constants/colors";
import { useThemeColor } from "@/hooks/useThemeColor";
import { useColorScheme } from "@/hooks/useColorScheme";

const { width } = Dimensions.get("window");
const numColumns = 2;
const itemMargin = 16;
const itemWidth = (width - itemMargin * 3) / numColumns;

export default function TablosScreen() {
  const { data: tablos, isLoading, error, refetch } = useTablosList();
  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
  const [filterStatus, setFilterStatus] = useState<"all" | "todo" | "in_progress" | "done">("all");
  const [refreshing, setRefreshing] = useState(false);
  const [isCreateModalVisible, setIsCreateModalVisible] = useState(false);
  const { mutate: createTablo } = useCreateTablo();
  const { mutate: deleteTablo } = useDeleteTablo();
  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";

  // Theme-aware gradient colors
  const gradientColors: [string, string, string] =
    colorScheme === "dark" ? ["#1f2937", "#374151", "#4b5563"] : ["#1e3a8a", "#3b82f6", "#60a5fa"];

  const [newTablo, setNewTablo] = useState<{
    name: string;
    color: string;
    status: "todo" | "in_progress" | "done";
  }>({
    name: "",
    color: "bg-blue-500",
    status: "todo",
  });

  const onRefresh = async () => {
    setRefreshing(true);
    await refetch();
    setRefreshing(false);
  };

  const getStatusLabel = (status: string) => {
    switch (status) {
      case "todo":
        return "À faire";
      case "in_progress":
        return "En cours";
      case "done":
        return "Terminé";
      default:
        return "À faire";
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case "todo":
        return "#f3f4f6";
      case "in_progress":
        return "#dbeafe";
      case "done":
        return "#dcfce7";
      default:
        return "#6b7280";
    }
  };

  const getTextColor = (status: string) => {
    switch (status) {
      case "todo":
        return "#364153";
      case "in_progress":
        return "#1447e6";
      case "done":
        return "#008236";
      default:
        return "#000";
    }
  };

  const getBorderColor = (status: string) => {
    switch (status) {
      case "todo":
        return "#d4d4d7";
      case "in_progress":
        return "#80b6fc";
      case "done":
        return "#62de80";
    }
  };

  const getChannelCid = (tabloId: string) => {
    return `messaging:${tabloId}`;
  };

  const filteredTablos = tablos?.filter((tablo) => {
    if (filterStatus === "all") return true;
    return tablo.status === filterStatus;
  });

  const navigateToTablo = (tablo: UserTablo) => {
    // Navigate to tablo details or chat
    router.push(`/channel/${getChannelCid(tablo.id)}`);
  };

  const showFilterOptions = () => {
    Alert.alert("Filtrer par statut", "Choisissez un statut pour filtrer vos tablos", [
      { text: "Tous", onPress: () => setFilterStatus("all") },
      { text: "À faire", onPress: () => setFilterStatus("todo") },
      { text: "En cours", onPress: () => setFilterStatus("in_progress") },
      { text: "Terminé", onPress: () => setFilterStatus("done") },
      { text: "Annuler", style: "cancel" },
    ]);
  };

  const handleCreateTablo = async () => {
    if (!newTablo.name) {
      Alert.alert("Erreur", "Le nom du tablo ne peut pas être vide.");
      return;
    }

    createTablo(newTablo);
    setIsCreateModalVisible(false);
    setNewTablo({
      name: "",
      color: "bg-blue-500",
      status: "todo",
    });
  };

  const handleDeleteTablo = (tablo: UserTablo) => {
    // Only allow admin users to delete tablos
    if (!tablo.is_admin) {
      Alert.alert("Non autorisé", "Seuls les administrateurs peuvent supprimer ce tablo.");
      return;
    }

    Alert.alert(
      "Supprimer le tablo",
      `Êtes-vous sûr de vouloir supprimer "${tablo.name}" ? Cette action est irréversible.`,
      [
        {
          text: "Annuler",
          style: "cancel",
        },
        {
          text: "Supprimer",
          style: "destructive",
          onPress: () => deleteTablo(tablo.id),
        },
      ]
    );
  };

  const renderTabloCard = ({ item: tablo }: { item: UserTablo }) => {
    const initials = tablo.name?.charAt(0)?.toUpperCase() || "T";

    return (
      <TouchableOpacity
        style={[
          styles.tabloCard,
          {
            width: viewMode === "grid" ? itemWidth : "100%",
            backgroundColor: cardBackgroundColor,
            borderColor: borderColor,
          },
        ]}
        onPress={() => navigateToTablo(tablo)}
        onLongPress={() => handleDeleteTablo(tablo)}
        activeOpacity={0.8}
      >
        {/* Tablo Image/Color Header */}
        <View
          style={[styles.tabloHeader, { backgroundColor: ColorMap[tablo.color || "bg-gray-500"] }]}
        >
          {tablo.image ? (
            <View style={styles.imageContainer}>
              {/* In a real app, you'd use an Image component here */}
              <Text style={styles.tabloInitials}>{initials}</Text>
            </View>
          ) : (
            <Text style={styles.tabloInitials}>{initials}</Text>
          )}
        </View>

        {/* Tablo Info */}
        <View style={styles.tabloInfo}>
          <View style={styles.nameRow}>
            <Text style={[styles.tabloName, { color: textColor }]} numberOfLines={2}>
              {tablo.name}
            </Text>
            <View
              style={[styles.nameStatusBadge, { backgroundColor: getStatusColor(tablo.status) }]}
            >
              <Text style={[styles.nameStatusText, { color: getTextColor(tablo.status) }]}>
                {getStatusLabel(tablo.status)}
              </Text>
            </View>
          </View>

          <View style={styles.tabloMeta}>
            <View style={styles.roleContainer}>
              <View
                style={[
                  styles.roleBadge,
                  { backgroundColor: tablo.is_admin ? "#396edd" : "#6b7280" },
                ]}
              >
                <Text style={styles.roleText}>{tablo.is_admin ? "Admin" : "Membre"}</Text>
              </View>
            </View>

            <View style={styles.actionsRow}>
              <TouchableOpacity
                style={styles.cardActionButton}
                onPress={() => router.push(`/channel/${getChannelCid(tablo.id)}`)}
              >
                <MessageCircle size={16} color={subtitleColor} />
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.cardActionButton}
                onPress={() => router.push("/planning")}
              >
                <Calendar size={16} color={subtitleColor} />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  const renderListItem = ({ item: tablo }: { item: UserTablo }) => {
    return (
      <TouchableOpacity
        style={[
          styles.listItem,
          { backgroundColor: cardBackgroundColor, borderColor: borderColor },
        ]}
        onPress={() => navigateToTablo(tablo)}
        onLongPress={() => handleDeleteTablo(tablo)}
        activeOpacity={0.8}
      >
        <View
          style={[styles.listAvatar, { backgroundColor: ColorMap[tablo.color || "bg-gray-500"] }]}
        >
          <Text style={styles.listInitials}>{tablo.name?.charAt(0)?.toUpperCase() || "T"}</Text>
        </View>

        <View style={styles.listItemContent}>
          <View style={styles.listNameRow}>
            <View style={styles.listNameContainer}>
              <Text style={[styles.listName, { color: textColor }]}>{tablo.name}</Text>
            </View>
            <View
              style={[styles.listStatusBadge, { backgroundColor: getStatusColor(tablo.status) }]}
            >
              <Text style={[styles.listStatusText, { color: getTextColor(tablo.status) }]}>
                {getStatusLabel(tablo.status)}
              </Text>
            </View>
          </View>
          <View style={styles.listMeta}>
            <View style={styles.listRoleContainer}>
              <View
                style={[
                  styles.listRoleBadge,
                  { backgroundColor: tablo.is_admin ? "#396edd" : "#6b7280" },
                ]}
              >
                <Text style={styles.listRoleText}>{tablo.is_admin ? "Admin" : "Membre"}</Text>
              </View>
            </View>

            <View style={styles.listActionsRow}>
              <TouchableOpacity
                style={styles.listActionButton}
                onPress={() => router.push(`/channel/${getChannelCid(tablo.id)}`)}
              >
                <MessageCircle size={16} color={subtitleColor} />
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.listActionButton}
                onPress={() => router.push("/planning")}
              >
                <Calendar size={16} color={subtitleColor} />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  if (error) {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" />
        <View style={styles.errorContainer}>
          <Text style={styles.errorTitle}>Erreur</Text>
          <Text style={styles.errorMessage}>
            Impossible de charger les tablos. Veuillez réessayer.
          </Text>
          <TouchableOpacity style={styles.retryButton} onPress={() => refetch()}>
            <Text style={styles.retryText}>Réessayer</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  return (
    <View style={[styles.container, { backgroundColor }]}>
      <StatusBar
        barStyle={colorScheme === "dark" ? "light-content" : "light-content"}
        backgroundColor={gradientColors[0]}
      />

      {/* Beautiful Header */}
      <LinearGradient
        colors={gradientColors}
        style={styles.headerGradient}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      >
        <View style={styles.headerContent}>
          {/* Bottom Row */}
          <View style={styles.headerBottom}>
            <View style={styles.titleContainer}>
              <Text style={styles.headerTitle}>Mes Tablos</Text>
              <Text style={styles.headerSubtitle}>
                {filteredTablos?.length || 0} tablo
                {(filteredTablos?.length || 0) > 1 ? "s" : ""}
                {filterStatus !== "all" && ` • ${getStatusLabel(filterStatus)}`}
              </Text>
            </View>

            <View style={styles.headerActions}>
              <TouchableOpacity style={styles.searchButton}>
                <Search size={20} color="#3b82f6" />
              </TouchableOpacity>
              <TouchableOpacity style={styles.filterButton} onPress={showFilterOptions}>
                <Filter size={20} color="#3b82f6" />
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.viewToggle}
                onPress={() => setViewMode(viewMode === "grid" ? "list" : "grid")}
              >
                {viewMode === "grid" ? (
                  <List size={20} color="#3b82f6" />
                ) : (
                  <Grid3X3 size={20} color="#3b82f6" />
                )}
              </TouchableOpacity>
            </View>
          </View>
        </View>

        {/* Decorative Elements */}
        <View style={styles.decorativeCircle1} />
        <View style={styles.decorativeCircle2} />
      </LinearGradient>

      {/* Content */}
      <View style={[styles.contentContainer, { backgroundColor }]}>
        {isLoading && !refreshing ? (
          <View style={styles.loadingContainer}>
            <Text style={[styles.loadingText, { color: subtitleColor }]}>
              Chargement de vos tablos...
            </Text>
          </View>
        ) : filteredTablos && filteredTablos.length > 0 ? (
          <FlatList
            data={filteredTablos}
            renderItem={viewMode === "grid" ? renderTabloCard : renderListItem}
            keyExtractor={(item) => item.id}
            numColumns={viewMode === "grid" ? numColumns : 1}
            key={viewMode}
            contentContainerStyle={styles.listContent}
            showsVerticalScrollIndicator={false}
            refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
          />
        ) : (
          <View style={styles.emptyContainer}>
            <Text style={[styles.emptyTitle, { color: textColor }]}>Aucun tablo trouvé</Text>
            <Text style={[styles.emptyMessage, { color: subtitleColor }]}>
              {filterStatus === "all"
                ? "Vous n'avez encore aucun tablo. Créez votre premier tablo pour commencer !"
                : `Aucun tablo avec le statut "${getStatusLabel(filterStatus)}"`}
            </Text>
            {filterStatus === "all" && (
              <TouchableOpacity style={styles.createButton}>
                <Plus size={20} color="white" />
                <Text style={styles.createButtonText}>Créer mon premier tablo</Text>
              </TouchableOpacity>
            )}
          </View>
        )}
      </View>

      {/* Floating Action Button */}
      <TouchableOpacity
        style={styles.fab}
        onPress={() => {
          setIsCreateModalVisible(true);
        }}
        activeOpacity={0.8}
      >
        <Plus size={24} color="white" />
      </TouchableOpacity>

      {/* Create Tablo Modal */}
      <Modal
        visible={isCreateModalVisible}
        animationType="slide"
        transparent={true}
        onRequestClose={() => setIsCreateModalVisible(false)}
      >
        <KeyboardAvoidingView
          behavior={Platform.OS === "ios" ? "padding" : "height"}
          style={styles.modalOverlay}
        >
          <View
            style={[styles.modalContent, { backgroundColor: cardBackgroundColor, borderColor }]}
          >
            <TouchableOpacity
              style={styles.modalCloseButton}
              onPress={() => setIsCreateModalVisible(false)}
            >
              <X size={24} color={subtitleColor} />
            </TouchableOpacity>
            <Text style={[styles.modalTitle, { color: textColor }]}>Nouveau Tablo</Text>
            <ScrollView>
              <View style={styles.modalFormGroup}>
                <Text style={[styles.modalLabel, { color: subtitleColor }]}>Nom du Tablo</Text>
                <TextInput
                  style={[
                    styles.modalInput,
                    {
                      backgroundColor: cardBackgroundColor,
                      borderColor,
                      color: textColor,
                    },
                  ]}
                  placeholder="Ex: Projet React Native"
                  placeholderTextColor={subtitleColor}
                  value={newTablo.name}
                  onChangeText={(text) => setNewTablo({ ...newTablo, name: text })}
                />
              </View>
              <View style={styles.modalFormGroup}>
                <Text style={[styles.modalLabel, { color: subtitleColor }]}>Couleur</Text>
                <View style={styles.colorPicker}>
                  {AVAILABLE_COLORS.map((color) => (
                    <TouchableOpacity
                      key={color}
                      style={[
                        styles.colorOption,
                        { backgroundColor: ColorMap[color] },
                        newTablo.color === color && styles.selectedColorOption,
                      ]}
                      onPress={() => setNewTablo({ ...newTablo, color })}
                    />
                  ))}
                </View>
              </View>
              <View style={styles.modalFormGroup}>
                <Text style={[styles.modalLabel, { color: subtitleColor }]}>Statut</Text>
                <View style={styles.statusPicker}>
                  {(["todo", "in_progress", "done"] as const).map((status) => (
                    <TouchableOpacity
                      key={status}
                      style={[
                        styles.statusOption,
                        { backgroundColor: getStatusColor(status) },
                        newTablo.status === status && {
                          borderColor: getBorderColor(status),
                        },
                      ]}
                      onPress={() => setNewTablo({ ...newTablo, status })}
                    >
                      <Text style={[styles.statusOptionText, { color: getTextColor(status) }]}>
                        {getStatusLabel(status)}
                      </Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>
            </ScrollView>
            <TouchableOpacity style={styles.modalButton} onPress={handleCreateTablo}>
              <Text style={styles.modalButtonText}>Créer Tablo</Text>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f8fafc",
  },
  headerGradient: {
    paddingTop: 50,
    paddingBottom: 25,
    paddingHorizontal: 20,
    position: "relative",
    overflow: "hidden",
  },
  headerContent: {
    zIndex: 10,
  },
  headerTop: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginBottom: 20,
  },
  userInfo: {
    flex: 1,
  },
  greetingContainer: {
    flex: 1,
  },
  greeting: {
    fontSize: 16,
    color: "rgba(255, 255, 255, 0.9)",
    fontWeight: "500",
  },
  userName: {
    fontSize: 20,
    color: "white",
    fontWeight: "bold",
    marginTop: 2,
  },
  actionButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: "rgba(255, 255, 255, 0.2)",
    justifyContent: "center",
    alignItems: "center",
  },
  headerBottom: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-end",
  },
  titleContainer: {
    flex: 1,
  },
  headerTitle: {
    fontSize: 28,
    color: "white",
    fontWeight: "bold",
    marginBottom: 4,
  },
  headerSubtitle: {
    fontSize: 16,
    color: "rgba(255, 255, 255, 0.8)",
    fontWeight: "400",
  },
  headerActions: {
    flexDirection: "row",
    gap: 12,
  },
  searchButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 4,
  },
  filterButton: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 4,
  },
  viewToggle: {
    width: 44,
    height: 44,
    borderRadius: 22,
    backgroundColor: "white",
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 8,
    elevation: 4,
  },
  decorativeCircle1: {
    position: "absolute",
    top: -50,
    right: -30,
    width: 120,
    height: 120,
    borderRadius: 60,
    backgroundColor: "rgba(255, 255, 255, 0.1)",
  },
  decorativeCircle2: {
    position: "absolute",
    bottom: -20,
    left: -20,
    width: 80,
    height: 80,
    borderRadius: 40,
    backgroundColor: "rgba(255, 255, 255, 0.08)",
  },
  contentContainer: {
    flex: 1,
    backgroundColor: "#f8fafc",
    marginTop: -10,
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10,
    paddingTop: 10,
  },
  listContent: {
    padding: 16,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  loadingText: {
    fontSize: 16,
    color: "#6b7280",
    fontWeight: "500",
  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 40,
  },
  emptyTitle: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#1f2937",
    marginBottom: 8,
    textAlign: "center",
  },
  emptyMessage: {
    fontSize: 16,
    color: "#6b7280",
    textAlign: "center",
    lineHeight: 24,
    marginBottom: 32,
  },
  createButton: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#3b82f6",
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 25,
    gap: 8,
  },
  createButtonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
  tabloCard: {
    backgroundColor: "white",
    borderRadius: 16,
    marginBottom: 12,
    marginHorizontal: 8,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 3,
    overflow: "hidden",
  },
  tabloHeader: {
    height: 90,
    justifyContent: "center",
    alignItems: "center",
    position: "relative",
  },
  imageContainer: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  tabloInitials: {
    fontSize: 24,
    fontWeight: "bold",
    color: "white",
  },

  tabloInfo: {
    padding: 12,
  },
  nameRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between",
    marginBottom: 6,
    gap: 8,
  },
  tabloName: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#1f2937",
    flex: 1,
  },
  nameStatusBadge: {
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: 10,
    alignSelf: "flex-start",
  },
  nameStatusText: {
    fontSize: 9,
    fontWeight: "600",
    textTransform: "uppercase",
  },
  tabloMeta: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  roleContainer: {
    flex: 1,
  },
  roleBadge: {
    paddingHorizontal: 6,
    paddingVertical: 3,
    borderRadius: 7,
    alignSelf: "flex-start",
  },
  roleText: {
    color: "white",
    fontSize: 11,
    fontWeight: "600",
  },
  actionsRow: {
    flexDirection: "row",
    gap: 8,
  },
  cardActionButton: {
    width: 28,
    height: 28,
    borderRadius: 14,
    backgroundColor: "#f3f4f6",
    justifyContent: "center",
    alignItems: "center",
  },
  listItem: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "white",
    padding: 16,
    marginBottom: 8,
    borderRadius: 12,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  listAvatar: {
    width: 50,
    height: 50,
    borderRadius: 13,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 16,
  },
  listInitials: {
    fontSize: 18,
    fontWeight: "bold",
    color: "white",
  },
  listItemContent: {
    flex: 1,
  },
  listNameRow: {
    flexDirection: "row",
    alignItems: "flex-start",
    justifyContent: "space-between",
    marginBottom: 4,
    gap: 8,
  },
  listNameContainer: {
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    gap: 10,
  },
  listColorIndicator: {
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  listName: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#1f2937",
    flex: 1,
  },
  listMeta: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  listStatusBadge: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    borderRadius: 8,
  },
  listStatusText: {
    fontSize: 10,
    fontWeight: "600",
  },
  listRoleContainer: {
    flex: 1,
  },
  listRoleBadge: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 8,
    alignSelf: "flex-start",
  },
  listRoleText: {
    color: "white",
    fontSize: 12,
    fontWeight: "600",
  },
  listActionsRow: {
    flexDirection: "row",
    gap: 8,
  },
  listActionButton: {
    width: 32,
    height: 32,
    borderRadius: 16,
    backgroundColor: "#f3f4f6",
    justifyContent: "center",
    alignItems: "center",
  },
  errorContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 40,
  },
  errorTitle: {
    fontSize: 24,
    fontWeight: "bold",
    color: "#dc2626",
    marginBottom: 12,
  },
  errorMessage: {
    fontSize: 16,
    color: "#6b7280",
    textAlign: "center",
    marginBottom: 24,
    lineHeight: 24,
  },
  retryButton: {
    backgroundColor: "#3b82f6",
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 8,
  },
  retryText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
  fab: {
    position: "absolute",
    bottom: 120,
    right: 30,
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: "#3b82f6",
    justifyContent: "center",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 8,
    zIndex: 1000,
  },
  modalOverlay: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0, 0, 0, 0.5)",
  },
  modalContent: {
    borderRadius: 20,
    padding: 20,
    width: "90%",
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 10,
    elevation: 10,
    borderWidth: 1,
  },
  modalCloseButton: {
    alignSelf: "flex-end",
    padding: 10,
  },
  modalTitle: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
  },
  modalFormGroup: {
    marginBottom: 15,
  },
  modalLabel: {
    fontSize: 16,
    marginBottom: 8,
  },
  modalInput: {
    borderWidth: 1,
    borderRadius: 12,
    padding: 12,
    fontSize: 16,
  },
  colorPicker: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    width: "100%",
    marginTop: 10,
  },
  colorOption: {
    width: "18%",
    height: 20,
    aspectRatio: 1,
    borderRadius: 15,
    marginBottom: 10,
    borderWidth: 2,
    borderColor: "transparent",
  },
  selectedColorOption: {
    borderColor: "#000",
  },
  statusPicker: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    width: "100%",
    marginTop: 10,
  },
  statusOption: {
    width: "28%",
    height: 40,
    borderRadius: 20,
    margin: 5,
    borderWidth: 2,
    borderColor: "transparent",
    justifyContent: "center",
    alignItems: "center",
  },
  selectedStatusOption: {
    borderColor: "#3b82f6",
  },
  statusOptionText: {
    fontSize: 14,
    fontWeight: "600",
  },
  modalButton: {
    backgroundColor: "#3b82f6",
    paddingHorizontal: 24,
    paddingVertical: 12,
    borderRadius: 25,
    width: "100%",
    alignItems: "center",
    marginTop: 20,
  },
  modalButtonText: {
    color: "white",
    fontSize: 16,
    fontWeight: "600",
  },
});
