import { StyleSheet } from 'react-native';
import { createThemedStyles } from '../../theme';

export const composerStyles = createThemedStyles({
  wrap: {
    alignItems: 'center',
    backgroundColor: '#000000',
    paddingBottom: 14,
    paddingHorizontal: 8,
    paddingTop: 6,
  },
  // Web-style stacked composer: textarea on its own row, controls row below.
  shell: {
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 14,
    borderWidth: 1,
    paddingBottom: 8,
    paddingHorizontal: 10,
    paddingTop: 10,
    position: 'relative',
    width: '100%',
  },
  controlsRow: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 4,
  },
  controlsLeft: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 4,
  },
  controlsRight: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 4,
  },
  // Send-to-queue + Stop rendered together while a turn is running.
  actionButtonRow: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 4,
  },
  // Bottom-sheet attachment drawer (composer "+").
  attachmentDrawerBackdrop: {
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    flex: 1,
    justifyContent: 'flex-end',
  },
  attachmentDrawerSheet: {
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderTopLeftRadius: 22,
    borderTopRightRadius: 22,
    borderWidth: 1,
    paddingBottom: 34,
    paddingTop: 8,
  },
  attachmentDrawerHandle: {
    alignSelf: 'center',
    backgroundColor: '#3A3A3A',
    borderRadius: 3,
    height: 5,
    marginBottom: 6,
    marginTop: 4,
    width: 40,
  },
  attachmentMenuIcon: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 24,
  },
  attachmentMenuItem: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 14,
    minHeight: 50,
    paddingHorizontal: 20,
    paddingVertical: 8,
  },
  attachmentMenuItemText: { color: '#F4F4F5', fontSize: 15, fontWeight: '700' },
  attachmentMenuItemTextDisabled: { color: '#8E8E93' },
  attachmentMenuSectionLabel: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '800',
    letterSpacing: 0.3,
    marginBottom: 4,
    marginTop: 10,
    paddingHorizontal: 20,
  },
  iconButton: { alignItems: 'center', borderRadius: 8, height: 34, justifyContent: 'center', width: 34 },
  iconButtonText: { color: '#F4F4F5', fontSize: 13, fontWeight: '800' },
  activeButton: { backgroundColor: '#2A2A2A' },
  disabledButton: { opacity: 0.38 },
  modelButton: {
    alignItems: 'center',
    borderRadius: 8,
    flexDirection: 'row',
    gap: 2,
    height: 34,
    maxWidth: 170,
    paddingHorizontal: 8,
  },
  modelButtonText: {
    color: '#A1A1AA',
    flexShrink: 1,
    fontSize: 13,
    fontWeight: '700',
  },
  input: {
    backgroundColor: 'transparent',
    color: '#F4F4F5',
    fontSize: 16,
    lineHeight: 24,
    maxHeight: 140,
    minHeight: 40,
    paddingBottom: 4,
    paddingHorizontal: 4,
    paddingTop: 2,
    width: '100%',
  },
  replyPreview: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 16,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 8,
    maxWidth: 900,
    minHeight: 48,
    paddingHorizontal: 12,
    paddingVertical: 8,
    width: '100%',
  },
  replyPreviewClose: {
    alignItems: 'center',
    borderRadius: 15,
    height: 30,
    justifyContent: 'center',
    marginLeft: 8,
    width: 30,
  },
  replyPreviewMarker: {
    alignSelf: 'stretch',
    backgroundColor: '#FF5A1F',
    borderRadius: 2,
    marginRight: 10,
    width: 3,
  },
  replyPreviewText: {
    color: '#D4D4D8',
    flex: 1,
    fontSize: 14,
    fontWeight: '700',
    lineHeight: 19,
  },
  sendButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 8, // DS radius.lg — rounded square, matching the web composer
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  sendButtonDisabled: { backgroundColor: '#2A2A2A' },
  sendButtonText: { color: '#111111', fontSize: 21, fontWeight: '900', lineHeight: 24 },
  liveActionButton: { backgroundColor: '#151515', borderColor: '#2A2A2A', borderWidth: 1 },
  stopButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 8, // DS radius.lg — rounded square, matching the web composer
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  stopButtonText: { color: '#111111', fontSize: 18, fontWeight: '900', lineHeight: 22 },
  attachmentStrip: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 8, maxWidth: 900, width: '100%' },
  errorText: { color: '#FCA5A5', fontSize: 12, marginBottom: 6, maxWidth: 900, width: '100%' },
  // Dictation recording bar — replaces the input + controls rows while recording.
  // Two rows: scrolling waveform + timer on top, discard/confirm circles below.
  // minHeight matches the idle composer's inner content (40 input + 4 + 34 controls)
  // so the shell doesn't jump when the bar swaps in.
  dictationBar: {
    gap: 8,
    justifyContent: 'flex-end', // controls row pinned to the bottom in every state
    minHeight: 78,
  },
  dictationWaveRow: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 10,
    height: 34,
    paddingHorizontal: 4,
  },
  dictationWaveTrack: {
    alignItems: 'center',
    flex: 1,
    flexDirection: 'row',
    height: 34,
    justifyContent: 'flex-end', // live edge on the right — newest bars slide in there
    overflow: 'hidden',
  },
  // Bar width/gap come inline from the component's WAVE_* constants — they must
  // stay equal to the conveyor's slide distance.
  dictationWaveStrip: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  dictationWaveBar: {
    borderRadius: 2,
  },
  dictationTimerText: {
    color: '#A1A1AA',
    fontSize: 14,
    fontVariant: ['tabular-nums'],
    fontWeight: '600',
    minWidth: 36,
    textAlign: 'right',
  },
  dictationControlsRow: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  dictationControlsRight: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 8,
  },
  dictationActionButton: {
    alignItems: 'center',
    backgroundColor: '#505050', // chipFill — one step above the shell's muted fill so the button reads
    borderRadius: 8, // DS radius.lg — rounded square, matching the composer's send button
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  dictationActionButtonInverse: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 8, // DS radius.lg — rounded square, matching the composer's send button
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  dictationStatusText: {
    color: '#A1A1AA',
    flex: 1,
    fontSize: 12,
    fontWeight: '600',
    textAlign: 'center',
  },
});