import { StyleSheet } from "react-native";
import {
  type ThemeColors,
  fontSize,
  fontWeight,
  radius,
  withOpacity,
} from "@/styles/theme";

export const makeStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: { flex: 1, backgroundColor: colors.background },
    loadingWrap: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12 },
    spinner: {
      width: 32,
      height: 32,
      borderRadius: 16,
      borderWidth: 2,
      borderColor: withOpacity(colors.primary, 0.3),
      borderTopColor: colors.primary,
    },
    loadingText: { fontSize: fontSize.sm, color: colors.mutedForeground },
    header: {
      paddingHorizontal: 16,
      paddingTop: 12,
      paddingBottom: 12,
      borderBottomWidth: 0.5,
      borderBottomColor: colors.border,
    },
    headerRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
    headerTitle: {
      fontSize: fontSize["2xl"],
      fontWeight: fontWeight.bold,
      color: colors.foreground,
    },
    searchToggle: {
      width: 36,
      height: 36,
      borderRadius: radius.full,
      alignItems: "center",
      justifyContent: "center",
    },
    statsRow: { flexDirection: "row", gap: 12, marginTop: 10 },
    statBadge: {
      flexDirection: "row",
      alignItems: "center",
      gap: 6,
      backgroundColor: colors.muted,
      borderRadius: radius.lg,
      paddingHorizontal: 10,
      paddingVertical: 6,
    },
    statValue: { fontSize: fontSize.sm, fontWeight: fontWeight.semibold, color: colors.foreground },
    statLabel: { fontSize: 12, color: colors.mutedForeground },
    searchBar: {
      flexDirection: "row",
      alignItems: "center",
      backgroundColor: colors.muted,
      borderRadius: radius.lg,
      paddingHorizontal: 12,
      height: 36,
      gap: 8,
      marginTop: 10,
    },
    searchInput: { flex: 1, fontSize: fontSize.sm, color: colors.foreground, padding: 0 },
    emptyWrap: { flex: 1, alignItems: "center", justifyContent: "center", paddingHorizontal: 24 },
    emptyIconWrap: {
      width: 80,
      height: 80,
      borderRadius: radius.full,
      backgroundColor: colors.muted,
      alignItems: "center",
      justifyContent: "center",
      marginBottom: 16,
    },
    emptyTitle: {
      fontSize: fontSize.lg,
      fontWeight: fontWeight.semibold,
      color: colors.foreground,
      marginBottom: 8,
    },
    emptyHint: {
      fontSize: fontSize.sm,
      color: colors.mutedForeground,
      textAlign: "center",
      maxWidth: 260,
    },
    listContent: { paddingHorizontal: 16, paddingTop: 12, paddingBottom: 24 },
    notebookCard: {
      flexDirection: "row",
      alignItems: "flex-start",
      backgroundColor: colors.card,
      borderRadius: radius.xl,
      borderWidth: 0.5,
      borderColor: colors.border,
      padding: 12,
      marginBottom: 12,
      gap: 12,
    },
    notebookCover: { width: 44, height: 64, borderRadius: radius.sm, backgroundColor: colors.muted },
    notebookCoverFallback: {
      width: 44,
      height: 64,
      borderRadius: radius.sm,
      backgroundColor: colors.muted,
      alignItems: "center",
      justifyContent: "center",
    },
    notebookInfo: { flex: 1, gap: 4 },
    notebookTitle: { fontSize: fontSize.sm, fontWeight: fontWeight.medium, color: colors.foreground },
    notebookAuthor: { fontSize: fontSize.xs, color: colors.mutedForeground },
    notebookStats: { flexDirection: "row", alignItems: "center", gap: 12, marginTop: 4 },
    notebookStatItem: { flexDirection: "row", alignItems: "center", gap: 4 },
    notebookStatText: { fontSize: fontSize.xs, color: colors.mutedForeground },
    notebookBadge: {
      backgroundColor: colors.muted,
      borderRadius: radius.full,
      paddingHorizontal: 8,
      paddingVertical: 2,
    },
    notebookBadgeText: { fontSize: fontSize.xs, color: colors.mutedForeground },
    detailHeader: { borderBottomWidth: 0.5, borderBottomColor: colors.border },
    detailHeaderTop: {
      flexDirection: "row",
      alignItems: "center",
      gap: 12,
      paddingHorizontal: 16,
      paddingVertical: 12,
    },
    backBtn: {
      width: 32,
      height: 32,
      borderRadius: radius.full,
      alignItems: "center",
      justifyContent: "center",
    },
    detailCover: { width: 28, height: 40, borderRadius: 4, backgroundColor: colors.muted },
    detailCoverFallback: {
      width: 28,
      height: 40,
      borderRadius: 4,
      backgroundColor: colors.muted,
      alignItems: "center",
      justifyContent: "center",
    },
    detailHeaderInfo: { flex: 1, minWidth: 0 },
    detailTitle: { fontSize: fontSize.sm, fontWeight: fontWeight.semibold, color: colors.foreground },
    detailAuthor: { fontSize: fontSize.xs, color: colors.mutedForeground },
    exportBtn: {
      width: 32,
      height: 32,
      borderRadius: radius.full,
      alignItems: "center",
      justifyContent: "center",
    },
    detailTabRow: { flexDirection: "column", gap: 8, paddingHorizontal: 16, paddingVertical: 12 },
    tabSwitcher: {
      flexDirection: "row",
      borderWidth: 0.5,
      borderColor: colors.border,
      borderRadius: radius.lg,
      padding: 2,
    },
    tabBtn: {
      flex: 1,
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
      gap: 6,
      paddingHorizontal: 12,
      paddingVertical: 6,
      borderRadius: radius.md,
    },
    tabBtnActive: { backgroundColor: colors.primary },
    tabBtnText: { fontSize: fontSize.xs, fontWeight: fontWeight.medium, color: colors.mutedForeground },
    tabBtnTextActive: { color: colors.primaryForeground },
    detailSearch: {
      flexDirection: "row",
      alignItems: "center",
      gap: 8,
      backgroundColor: colors.muted,
      borderRadius: radius.lg,
      paddingHorizontal: 12,
      height: 32,
    },
    detailSearchInput: { flex: 1, fontSize: fontSize.sm, color: colors.foreground, padding: 0 },
    detailEmpty: { flex: 1, alignItems: "center", justifyContent: "center", padding: 24 },
    detailEmptyText: { fontSize: fontSize.sm, color: colors.mutedForeground },
    detailList: { flex: 1, paddingHorizontal: 16 },
    chapterGroup: { marginBottom: 16 },
    chapterDivider: { flexDirection: "row", alignItems: "center", gap: 8, marginBottom: 8 },
    chapterLine: { flex: 1, height: 0.5, backgroundColor: colors.border },
    chapterName: {
      fontSize: fontSize.xs,
      fontWeight: fontWeight.medium,
      color: colors.mutedForeground,
      paddingHorizontal: 8,
    },
    noteCard: {
      backgroundColor: colors.card,
      borderRadius: radius.lg,
      borderWidth: 0.5,
      borderColor: colors.border,
      padding: 12,
      marginBottom: 8,
    },
    noteCardTop: { flexDirection: "row", alignItems: "flex-start", gap: 8 },
    colorDot: { width: 10, height: 10, borderRadius: 5, marginTop: 4 },
    noteQuote: { flex: 1, fontSize: fontSize.sm, color: colors.foreground, lineHeight: 20 },
    noteBody: {
      marginTop: 8,
      backgroundColor: colors.muted,
      borderRadius: radius.sm,
      paddingHorizontal: 8,
      paddingVertical: 6,
    },
    noteText: { fontSize: fontSize.xs, color: colors.mutedForeground, lineHeight: 16 },
    noteActions: { flexDirection: "row", justifyContent: "flex-end", gap: 4, marginTop: 8 },
    noteActionBtn: { padding: 6, borderRadius: radius.sm },
    editArea: { marginTop: 8 },
    editorContainer: {
      flex: 1,
      minHeight: 180,
      borderRadius: radius.lg,
      borderWidth: 1,
      borderColor: colors.border,
      overflow: "hidden",
    },
    editInput: {
      minHeight: 80,
      backgroundColor: colors.muted,
      borderRadius: radius.md,
      padding: 12,
      fontSize: fontSize.sm,
      color: colors.foreground,
      textAlignVertical: "top",
    },
    editTabs: { flexDirection: "row", gap: 12, marginBottom: 8, paddingHorizontal: 4 },
    editTabBtn: { paddingBottom: 4 },
    editTabBtnActive: { borderBottomWidth: 2, borderBottomColor: colors.primary },
    editTabText: { fontSize: fontSize.xs, color: colors.mutedForeground, fontWeight: fontWeight.medium },
    editTabTextActive: { color: colors.primary },
    editPreviewArea: { minHeight: 80, backgroundColor: colors.muted, borderRadius: radius.md, padding: 12 },
    editActions: { flexDirection: "row", justifyContent: "flex-end", gap: 8, marginTop: 8 },
    editCancelBtn: {
      flexDirection: "row",
      alignItems: "center",
      gap: 4,
      paddingHorizontal: 8,
      paddingVertical: 4,
      borderRadius: radius.md,
    },
    editCancelText: { fontSize: fontSize.xs, color: colors.mutedForeground },
    editSaveBtn: {
      flexDirection: "row",
      alignItems: "center",
      gap: 4,
      backgroundColor: colors.primary,
      paddingHorizontal: 8,
      paddingVertical: 4,
      borderRadius: radius.md,
    },
    editSaveText: { fontSize: fontSize.xs, color: colors.primaryForeground },
    highlightCard: {
      flexDirection: "row",
      alignItems: "flex-start",
      gap: 8,
      backgroundColor: colors.card,
      borderRadius: radius.lg,
      borderWidth: 0.5,
      borderColor: colors.border,
      padding: 12,
      marginBottom: 8,
    },
    highlightBody: { flex: 1, minWidth: 0 },
    highlightText: { fontSize: fontSize.sm, color: colors.foreground, lineHeight: 20 },
    highlightChapter: { fontSize: fontSize.xs, color: colors.mutedForeground, marginTop: 4 },
    highlightDeleteBtn: { padding: 6, borderRadius: radius.sm },
    exportOverlay: { flex: 1 },
    exportDropdown: {
      position: "absolute",
      top: 56,
      right: 16,
      minWidth: 140,
      backgroundColor: colors.card,
      borderRadius: radius.lg,
      borderWidth: 0.5,
      borderColor: colors.border,
      padding: 4,
      elevation: 5,
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.3,
      shadowRadius: 8,
    },
    exportItem: { paddingHorizontal: 12, paddingVertical: 8, borderRadius: radius.md },
    exportItemText: { fontSize: fontSize.sm, color: colors.foreground },
  });
