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

const { height: SH, width: SW } = Dimensions.get("window");
const COVER_H = Math.round(SH * 0.375);
const COVER_W = Math.round(COVER_H * (28 / 41));

export { COVER_H, COVER_W, SH, SW };

export const makeStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    screen: { flex: 1, backgroundColor: colors.background },
    content: { flex: 1, backgroundColor: colors.background },
    pager: { flex: 1 },
    pagerContent: {},
    page: { width: SW, flex: 1, flexDirection: "column", backgroundColor: colors.background },
    topBar: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      paddingHorizontal: 20,
      paddingTop: 52,
      paddingBottom: 4,
    },
    iconBtn: { width: 40, height: 36, alignItems: "center", justifyContent: "center" },
    statusPill: {
      flexDirection: "row",
      alignItems: "center",
      gap: 5,
      paddingHorizontal: 12,
      paddingVertical: 5,
      borderRadius: 999,
      backgroundColor: withOpacity(colors.primary, 0.1),
    },
    statusTxt: {
      fontSize: 11,
      fontWeight: fontWeight.semibold,
      color: colors.primary,
      textTransform: "uppercase",
      letterSpacing: 0.5,
    },
    coverSection: { flex: 1, alignItems: "center", justifyContent: "center", paddingVertical: 8 },
    glow: {
      position: "absolute",
      width: COVER_W + 60,
      height: COVER_H + 40,
      borderRadius: (COVER_W + 60) / 2,
      shadowColor: colors.primary,
      shadowOffset: { width: 0, height: 0 },
      shadowOpacity: 0.22,
      shadowRadius: 64,
    },
    coverShadow: {
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 18 },
      shadowOpacity: 0.28,
      shadowRadius: 32,
      elevation: 16,
    },
    bookInfo: { alignItems: "center", paddingHorizontal: 36, paddingTop: 4, paddingBottom: 8 },
    bookTitle: { fontSize: 18, fontWeight: fontWeight.bold, color: colors.foreground, textAlign: "center", lineHeight: 26 },
    bookChapter: { fontSize: 14, color: colors.mutedForeground, textAlign: "center", lineHeight: 20, marginTop: 2 },
    progress: { paddingHorizontal: 24, paddingBottom: 8 },
    progressTrack: { height: 3, borderRadius: 999, backgroundColor: withOpacity(colors.border, 0.45), overflow: "hidden" },
    progressFill: { height: "100%" as unknown as number, borderRadius: 999, backgroundColor: colors.primary },
    progressRow: { flexDirection: "row", justifyContent: "space-between", marginTop: 5 },
    progressTxt: { fontSize: 10, color: colors.mutedForeground },
    controls: { flexDirection: "row", alignItems: "flex-end", justifyContent: "center", gap: 8, paddingVertical: 4, paddingBottom: 10 },
    controlItem: { width: 54, alignItems: "center", justifyContent: "flex-end", gap: 6 },
    controlItemPrimary: { width: 74 },
    controlLabel: { fontSize: 10, lineHeight: 13, color: colors.mutedForeground, fontWeight: fontWeight.medium, textAlign: "center" },
    controlLabelPrimary: { color: colors.primary, fontWeight: fontWeight.semibold },
    ctrlBtn: { width: 46, height: 46, borderRadius: 23, alignItems: "center", justifyContent: "center", backgroundColor: withOpacity(colors.muted, 0.7) },
    ctrlBtnSm: { width: 38, height: 38, borderRadius: 19, alignItems: "center", justifyContent: "center", backgroundColor: withOpacity(colors.muted, 0.5) },
    ctrlBtnDisabled: { opacity: 0.3 },
    playBtn: { width: 68, height: 68, borderRadius: 34, alignItems: "center", justifyContent: "center", backgroundColor: colors.primary, shadowColor: colors.primary, shadowOffset: { width: 0, height: 6 }, shadowOpacity: 0.35, shadowRadius: 16, elevation: 10 },
    settings: { flexDirection: "row", alignItems: "center", marginHorizontal: 20, marginBottom: 8, borderRadius: 16, backgroundColor: withOpacity(colors.muted, 0.5), paddingHorizontal: 14, paddingVertical: 9 },
    settingGroup: { flex: 1, flexDirection: "row", alignItems: "center", justifyContent: "space-between" },
    settingLbl: { fontSize: 10, color: colors.mutedForeground, fontWeight: fontWeight.medium },
    stepper: { flexDirection: "row", alignItems: "center", gap: 6 },
    stepBtn: { width: 22, height: 22, borderRadius: 11, alignItems: "center", justifyContent: "center", backgroundColor: colors.card, borderWidth: 1, borderColor: withOpacity(colors.border, 0.6) },
    stepVal: { fontSize: 11, color: colors.foreground, fontWeight: fontWeight.semibold, minWidth: 28, textAlign: "center" },
    settingDiv: { width: 1, height: 20, backgroundColor: withOpacity(colors.border, 0.5), marginHorizontal: 10 },
    timerQuickCluster: { flexDirection: "row", alignItems: "center", gap: 6, flexShrink: 0 },
    timerQuickClusterActive: { maxWidth: 86 },
    timerQuickBtn: { width: 28, height: 28, borderRadius: 14, alignItems: "center", justifyContent: "center", backgroundColor: colors.card, borderWidth: 1, borderColor: withOpacity(colors.border, 0.6) },
    timerQuickBtnActive: { backgroundColor: withOpacity(colors.primary, 0.14), borderColor: withOpacity(colors.primary, 0.28) },
    timerCountdownInline: { fontSize: 11, fontWeight: fontWeight.semibold, color: colors.primary, minWidth: 38, textAlign: "right", fontVariant: ["tabular-nums"] },
    contBtn: { borderRadius: 999, paddingHorizontal: 9, paddingVertical: 4, backgroundColor: withOpacity(colors.background, 0.7), borderWidth: 1, borderColor: withOpacity(colors.border, 0.5) },
    contBtnOn: { backgroundColor: withOpacity(colors.primary, 0.12), borderColor: withOpacity(colors.primary, 0.3) },
    contBtnTxt: { fontSize: 10, fontWeight: fontWeight.semibold, color: colors.mutedForeground },
    contBtnTxtOn: { color: colors.primary },
    bottom: { alignItems: "center", justifyContent: "center", paddingBottom: 34, paddingTop: 2 },
    bottomStrip: { flexDirection: "column", alignItems: "stretch", justifyContent: "center", paddingHorizontal: 24, width: "100%" as unknown as number, gap: 7 },
    bottomStripLeft: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 8 },
    returnBtn: { borderRadius: 999, paddingHorizontal: 11, paddingVertical: 5, backgroundColor: withOpacity(colors.primary, 0.1), borderWidth: 1, borderColor: withOpacity(colors.primary, 0.22) },
    returnBtnTxt: { fontSize: 10, fontWeight: fontWeight.semibold, color: colors.primary },
    pageIndicator: { width: 29, height: 6 },
    dot: { width: 6, height: 6, borderRadius: 3, backgroundColor: withOpacity(colors.mutedForeground, 0.65) },
    dotAbs: { position: "absolute", top: 0 },
    dotPill: { position: "absolute", top: 0, left: 0, height: 6, borderRadius: 3, backgroundColor: colors.primary },
    chips: { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 6 },
    chip: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 999, backgroundColor: withOpacity(colors.muted, 0.9), maxWidth: Math.min(150, SW * 0.38) },
    chipTxt: { fontSize: 10, color: colors.mutedForeground, fontWeight: fontWeight.medium },
    lyricHeaderRow: { flexDirection: "row", alignItems: "center", paddingHorizontal: 22, paddingVertical: 10, gap: 14 },
    thumbShadowWrap: { shadowColor: "#000", shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.18, shadowRadius: 8, elevation: 6 },
    lyricHeaderMeta: { flex: 1 },
    lyricBookName: { fontSize: 15, fontWeight: fontWeight.semibold, color: colors.foreground, lineHeight: 22 },
    lyricChapterName: { fontSize: 12, color: colors.mutedForeground, lineHeight: 18, marginTop: 3 },
    lyricArea: { flex: 1, paddingHorizontal: 24, paddingTop: 8, paddingBottom: 16, alignSelf: "stretch" },
    lyricList: { flex: 1, alignSelf: "stretch" },
    lyricListContent: { justifyContent: "center" },
    lyricInner: { gap: 8 },
    lyricLinePressable: { paddingHorizontal: 14, paddingVertical: 10, borderRadius: 18 },
    lyricLinePressableActive: { backgroundColor: withOpacity(colors.foreground, 0.05) },
    lyricLine: { fontSize: 16, fontWeight: fontWeight.medium, color: colors.foreground, textAlign: "center", lineHeight: 27, opacity: 0.32 },
    lyricLineActive: { fontSize: 22, fontWeight: fontWeight.bold, lineHeight: 34, opacity: 1, color: colors.foreground },
    lyricLinePast: { opacity: 0.58 },
    lyricContextLabel: { fontSize: 11, color: colors.mutedForeground, textAlign: "center", marginBottom: 8 },
    lyricSectionDivider: { height: 1, backgroundColor: colors.mutedForeground, opacity: 0.2, marginVertical: 10, marginHorizontal: 16 },
    lyricHintLabel: { fontSize: 11, color: colors.mutedForeground, textAlign: "center", marginTop: 8 },
    lyricLoadingFooter: { alignItems: "center", paddingVertical: 16, opacity: 0.5 },
    lyricActive: { fontSize: 18, fontWeight: fontWeight.bold, color: colors.foreground, textAlign: "center", lineHeight: 28 },
    voicePickerContainer: { flex: 1, justifyContent: "flex-end", backgroundColor: "rgba(0,0,0,0.45)" },
    voicePickerSheet: { backgroundColor: colors.background, borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingBottom: 34, maxHeight: SH * 0.82 },
    voicePickerHandle: { width: 36, height: 4, borderRadius: 2, backgroundColor: colors.border, alignSelf: "center", marginTop: 12, marginBottom: 4 },
    voicePickerHeader: { paddingHorizontal: 20, paddingTop: 14, paddingBottom: 8 },
    voicePickerTitle: { fontSize: 11, fontWeight: fontWeight.semibold, color: colors.mutedForeground, textTransform: "uppercase", letterSpacing: 0.9 },
    engineSection: { marginHorizontal: 16, marginBottom: 4, borderRadius: 14, overflow: "hidden", borderWidth: StyleSheet.hairlineWidth, borderColor: colors.border },
    engineRow: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingVertical: 13, backgroundColor: colors.background, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: withOpacity(colors.border, 0.5) },
    engineRowActive: { backgroundColor: withOpacity(colors.primary, 0.06) },
    engineRowLeft: { flex: 1 },
    engineRowLabel: { fontSize: 15, fontWeight: fontWeight.medium, color: colors.foreground },
    engineRowLabelActive: { color: colors.primary, fontWeight: fontWeight.semibold },
    engineRowDesc: { fontSize: 11, color: colors.mutedForeground, marginTop: 2 },
    engineCheckmark: { width: 24, height: 24, borderRadius: 12, backgroundColor: colors.primary, alignItems: "center", justifyContent: "center", marginLeft: 12 },
    engineCheckmarkTxt: { fontSize: 13, color: "#fff", fontWeight: fontWeight.bold },
    voicePickerList: { flexGrow: 0 },
    voiceLangHeader: { paddingHorizontal: 20, paddingVertical: 6, backgroundColor: withOpacity(colors.muted, 0.6) },
    voiceLangTxt: { fontSize: 10, fontWeight: fontWeight.semibold, color: colors.mutedForeground, textTransform: "uppercase", letterSpacing: 0.7 },
    voiceItem: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 20, paddingVertical: 15, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: withOpacity(colors.border, 0.4) },
    voiceItemSelected: { backgroundColor: withOpacity(colors.primary, 0.06) },
    voiceItemTxt: { fontSize: 15, color: colors.foreground },
    voiceItemTxtSelected: { fontWeight: fontWeight.semibold, color: colors.primary },
    voiceItemCheck: { fontSize: 15, fontWeight: fontWeight.bold, color: colors.primary },
    voiceBrowserNote: { padding: 28, alignItems: "center" },
    voiceBrowserNoteTxt: { fontSize: 14, color: colors.mutedForeground, textAlign: "center", lineHeight: 20 },
    voicePickerCancel: { marginHorizontal: 16, marginTop: 12, paddingVertical: 15, borderRadius: 14, backgroundColor: colors.muted, alignItems: "center" },
    voicePickerCancelTxt: { fontSize: 15, fontWeight: fontWeight.semibold, color: colors.foreground },
  });
