import { Colors } from "@/constants/theme";
import { StyleSheet } from "react-native";

export const createStyles = (colors: typeof Colors.light) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.backgroundSecondary,
    },
    header: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      paddingHorizontal: 20,
      paddingTop: 30,
      paddingBottom: 16,
      backgroundColor: colors.surface,
      borderBottomWidth: 1,
      borderBottomColor: colors.separator,
    },
    title: {
      fontSize: 22,
      fontWeight: "700",
      color: colors.text,
      flex: 1,
    },
    closeButton: {
      padding: 4,
    },
    closeIconButton: {
      backgroundColor: colors.error,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
      alignItems: "center",
    },
    content: {
      flex: 1,
      padding: 16,
      marginBottom: 15,
    },
    infoCard: {
      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 16,
      marginBottom: 35,
      shadowColor: "#000",
      shadowOpacity: 0.05,
      shadowRadius: 4,
      shadowOffset: { width: 0, height: 2 },
      elevation: 2,
    },
    infoRow: {
      paddingVertical: 12,
      borderBottomWidth: 1,
      borderBottomColor: colors.separator,
    },
    infoLabel: {
      fontSize: 13,
      fontWeight: "600",
      color: colors.textSecondary,
      marginBottom: 6,
    },
    infoValue: {
      fontSize: 16,
      color: colors.text,
      fontWeight: "500",
    },
    statusBadge: {
      paddingHorizontal: 12,
      paddingVertical: 6,
      borderRadius: 8,
      alignSelf: "flex-start",
    },
    statusBadgeCompleted: {
      backgroundColor: colors.success,
    },
    statusBadgeInProgress: {
      backgroundColor: colors.warning,
    },
    statusBadgeText: {
      fontSize: 14,
      fontWeight: "600",
      color: "#fff",
    },
    statusBadgeTextCompleted: {
      color: "#fff",
    },
    statusBadgeTextInProgress: {
      color: "#fff",
    },
    headerButtons: {
      flexDirection: "row",
      alignItems: "center",
      gap: 12,
    },
    editButton: {
      padding: 4,
    },
    editIconButton: {
      backgroundColor: colors.primary,
      borderRadius: 10,
      padding: 10,
      justifyContent: "center",
      alignItems: "center",
    },
    cancelButton: {
      paddingHorizontal: 12,
      paddingVertical: 6,
    },
    cancelButtonText: {
      color: colors.primary,
      fontSize: 16,
      fontWeight: "600",
    },
    saveButton: {
      backgroundColor: colors.primary,
      paddingHorizontal: 16,
      paddingVertical: 6,
      borderRadius: 6,
    },
    saveButtonText: {
      color: "#fff",
      fontSize: 16,
      fontWeight: "600",
    },
    sectionHeader: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginTop: 16,
      marginBottom: 12,
      paddingHorizontal: 4,
    },
    sectionTitle: {
      fontSize: 18,
      fontWeight: "700",
      color: colors.text,
    },
    totalCatchText: {
      fontSize: 16,
      fontWeight: "600",
      color: colors.primary,
    },
    fishCard: {
      position: "relative",
      backgroundColor: colors.card,
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
      shadowColor: "#000",
      shadowOpacity: 0.05,
      shadowRadius: 4,
      shadowOffset: { width: 0, height: 2 },
      elevation: 2,
    },
    fieldGroup: {
      marginBottom: 12,
      marginTop: 0,
    },
    rowGroup: {
      flexDirection: "row",
      marginBottom: 12,
    },
    label: {
      fontSize: 13,
      fontWeight: "600",
      color: colors.textSecondary,
      marginBottom: 6,
    },
    input: {
      borderWidth: 1,
      borderColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      fontSize: 15,
      color: colors.text,
      backgroundColor: colors.surface,
    },
    selectButton: {
      borderWidth: 1,
      borderColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 12,
      paddingVertical: 10,
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      backgroundColor: colors.surface,
    },
    selectButtonText: {
      fontSize: 15,
      color: colors.text,
    },
    optionsList: {
      position: "absolute",
      top: 46,
      left: 0,
      right: 0,
      borderWidth: 1,
      borderColor: colors.primary,
      borderRadius: 8,
      marginTop: 4,
      backgroundColor: colors.surface,
      maxHeight: 100,
      zIndex: 1000,
      elevation: 5,
      shadowColor: "#000",
      shadowOpacity: 0.15,
      shadowRadius: 8,
      shadowOffset: { width: 0, height: 4 },
    },
    optionItem: {
      paddingHorizontal: 12,
      paddingVertical: 12,
      borderBottomWidth: 1,
      borderBottomColor: colors.separator,
    },
    optionText: {
      fontSize: 15,
      color: colors.text,
    },
    optionsStatusFishList: {
      borderWidth: 1,
      borderColor: colors.primary,
      borderRadius: 8,
      marginTop: 4,
      backgroundColor: colors.surface,
      maxHeight: 120,
      zIndex: 1000,
      elevation: 5,
      shadowColor: "#000",
      shadowOpacity: 0.15,
      shadowRadius: 8,
      shadowOffset: { width: 0, height: 4 },
    },
    fishNameDropdown: {
      position: "absolute",
      top: 46,
      left: 0,
      right: 0,
      borderWidth: 1,
      borderColor: colors.primary,
      borderRadius: 8,
      marginTop: 4,
      backgroundColor: colors.surface,
      maxHeight: 180,
      zIndex: 1000,
      elevation: 5,
      shadowColor: "#000",
      shadowOpacity: 0.15,
      shadowRadius: 8,
      shadowOffset: { width: 0, height: 4 },
    },
    fishCardHeaderContent: {
      flexDirection: "row",
      gap: 5,
    },
    fishCardTitle: {
      fontSize: 16,
      fontWeight: "600",
      color: colors.text,
    },
    fishCardSubtitle: {
      fontSize: 15,
      color: colors.warning,
      marginTop: 0,
    },
    addFishButton: {
      backgroundColor: colors.primary,
      borderRadius: 12,
      padding: 16,
      marginBottom: 12,
      justifyContent: "center",
      alignItems: "center",
      shadowColor: "#000",
      shadowOpacity: 0.05,
      shadowRadius: 4,
      shadowOffset: { width: 0, height: 2 },
      elevation: 2,
    },
    addFishButtonContent: {
      flexDirection: "row",
      alignItems: "center",
      gap: 8,
    },
    addFishButtonText: {
      fontSize: 16,
      fontWeight: "600",
      color: "#fff",
    },
  });