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

export const conversationStyles = createThemedStyles({
  safeArea: { flex: 1, backgroundColor: '#000000' },
  keyboard: { flex: 1 },
  // Anchor for the absolutely-positioned scroll-to-bottom button.
  chatArea: { flex: 1, position: 'relative' },
  scrollToBottomButton: {
    alignItems: 'center',
    alignSelf: 'center',
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 18,
    borderWidth: 1,
    bottom: 12,
    height: 36,
    justifyContent: 'center',
    position: 'absolute',
    shadowColor: '#000000',
    shadowOffset: { height: 6, width: 0 },
    shadowOpacity: 0.35,
    shadowRadius: 12,
    width: 36,
  },
  header: {
    alignItems: 'center',
    backgroundColor: '#000000',
    flexDirection: 'row',
    minHeight: 62,
    paddingBottom: 6,
    paddingHorizontal: 16,
    paddingTop: 4,
  },
  headerIconButton: {
    alignItems: 'center',
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 17,
    borderWidth: 1,
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  headerTitleWrap: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', marginHorizontal: 10, minWidth: 0 },
  headerTitleTextWrap: { flexShrink: 1, marginLeft: 9, minWidth: 0 },
  // DS small-semibold (14 / semibold). '900' resolves to semibold via the type engine.
  headerTitle: { color: '#F7F7F7', fontSize: 14, fontWeight: '900', maxWidth: '100%', textAlign: 'left' },
  headerActions: { alignItems: 'center', flexDirection: 'row', gap: 8 },
  headerMenuButton: {
    alignItems: 'center',
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 17,
    borderWidth: 1,
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  headerShareButton: {
    alignItems: 'center',
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 17,
    borderWidth: 1,
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  scrollContent: {
    flexGrow: 1,
    justifyContent: 'flex-end',
    paddingHorizontal: 20,
    paddingTop: 8,
  },
  messagesContainer: {
    alignSelf: 'center',
    flexGrow: 1,
    justifyContent: 'flex-end',
    paddingBottom: 14,
    width: '100%',
  },
  loadPreviousButton: {
    alignSelf: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 18,
    borderWidth: 1,
    marginBottom: 14,
    paddingHorizontal: 14,
    paddingVertical: 8,
  },
  loadPreviousText: { color: '#BDBDC2', fontSize: 12, fontWeight: '700' },
  statePanel: {
    alignItems: 'center',
    alignSelf: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 18,
    borderWidth: 1,
    flexDirection: 'row',
    marginBottom: 14,
    paddingHorizontal: 14,
    paddingVertical: 10,
  },
  statePanelText: { color: '#BDBDC2', fontSize: 13, marginLeft: 8 },
  errorPanel: {
    alignSelf: 'center',
    backgroundColor: '#241111',
    borderColor: '#5F2424',
    borderRadius: 16,
    borderWidth: 1,
    marginBottom: 14,
    maxWidth: '96%',
    padding: 14,
  },
  errorPanelTitle: { color: '#FCA5A5', fontSize: 14, fontWeight: '800' },
  errorPanelText: { color: '#FECACA', fontSize: 13, lineHeight: 19, marginTop: 5 },
  messageGroup: { marginBottom: 3, width: '100%' },
  messageGroupWithAvatar: { marginTop: 20 },
  userMessageGroup: { alignItems: 'flex-end' },
  assistantMessageGroup: { alignItems: 'flex-start' },
  messageRow: { alignItems: 'flex-start', flexDirection: 'row', width: '100%' },
  messageRowReversed: { flexDirection: 'row-reverse' },
  messageAvatarSlot: { alignItems: 'center', marginTop: 2, width: 28 },
  messageAvatarSpacer: { height: 28, width: 28 },
  messageContent: { flex: 1, minWidth: 0 },
  assistantMessageContent: { paddingLeft: 20 },
  userMessageContent: { alignItems: 'flex-end' },
  messageBubbleWrap: { maxWidth: '96%', minWidth: 0 },
  scrollableMessageBubbleWrap: { width: '100%' },
  assistantMessageBubbleWrap: { alignSelf: 'flex-start', marginLeft: 4 },
  userMessageBubbleWrap: { alignSelf: 'flex-end', marginRight: 4 },
  messageBubble: { paddingBottom: 9, paddingTop: 4 },
  userBubble: {
    backgroundColor: '#171717',
    borderColor: '#2A2A2A',
    borderRadius: 20,
    borderWidth: 1,
    paddingHorizontal: 13,
    paddingTop: 11,
  },
  assistantBubble: {
    backgroundColor: 'transparent',
    paddingHorizontal: 0,
  },
  userBubbleStacked: { borderTopRightRadius: 20 },
  assistantBubbleStacked: { paddingTop: 0 },
  messageTime: { color: '#73737A', fontSize: 12 },
  messageFooterRow: { alignItems: 'center', flexDirection: 'row', gap: 8, marginTop: 6 },
  messageFooterSeparator: { backgroundColor: '#3A3A3E', height: 12, width: 1 },
  messageReplyButton: {
    alignItems: 'center',
    borderRadius: 6,
    height: 22,
    justifyContent: 'center',
    marginLeft: -2,
    width: 22,
  },
  dateSeparator: { alignItems: 'center', flexDirection: 'row', marginVertical: 14 },
  dateSeparatorLine: { backgroundColor: '#242424', flex: 1, height: 1 },
  dateSeparatorText: { color: '#8E8E93', fontSize: 12, fontWeight: '800', paddingHorizontal: 14 },
  replyQuote: {
    backgroundColor: '#111111',
    borderLeftColor: '#3F3F46',
    borderLeftWidth: 2,
    borderRadius: 10,
    marginBottom: 9,
    paddingHorizontal: 10,
    paddingVertical: 7,
  },
  replyQuoteText: { color: '#A1A1AA', fontSize: 13, lineHeight: 18 },
  connectorBadgesWrap: { alignSelf: 'flex-end', flexDirection: 'row', gap: 6, marginBottom: 8 },
  connectorBadge: {
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderRadius: 8,
    height: 30,
    justifyContent: 'center',
    width: 30,
  },
  attachmentImagesWrap: { marginBottom: 8, width: '100%' },
  fileChipsWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginBottom: 8 },
  toolCallWrap: { marginTop: 12, width: '100%' },
  toolCallSlot: { marginTop: 8, width: '100%' },
  toolCallItem: {
    backgroundColor: '#101010',
    borderColor: '#29292E',
    borderRadius: 13,
    borderWidth: 1,
    padding: 11,
  },
  customToolWidget: { width: '100%' },
  sendImageWrap: { marginTop: 8, width: '100%' },
  sendImageHeader: { alignItems: 'center', flexDirection: 'row', gap: 6, marginBottom: 7 },
  sendImageHeaderText: { color: '#8E8E93', fontSize: 13, fontWeight: '700' },
  // The gallery grid + lightbox styles live with the generic ImageGallery in
  // components/imageGalleryStyles.ts; only the send-image wrapper/header stay here.
  toolCallHeader: { alignItems: 'center', flexDirection: 'row' },
  toolCallIcon: { alignItems: 'center', height: 24, justifyContent: 'center', marginRight: 8, width: 24 },
  toolCallMeta: { flex: 1, minWidth: 0 },
  toolCallName: { color: '#E4E4E7', fontSize: 12, fontWeight: '800' },
  toolCallStatus: { color: '#8E8E93', fontSize: 11, fontWeight: '700', marginTop: 2 },
  toolCallResult: { color: '#A1A1AA', fontSize: 12, lineHeight: 17 },
  toolCallResultBox: {
    backgroundColor: '#080808',
    borderColor: '#1F1F23',
    borderRadius: 10,
    borderWidth: 1,
    marginTop: 9,
    padding: 9,
  },
  toolTimelineHeader: {
    alignItems: 'center',
    alignSelf: 'flex-start',
    flexDirection: 'row',
    minHeight: 30,
    paddingHorizontal: 3,
    paddingVertical: 3,
  },
  toolTimelineHeaderText: { color: '#C7C7CC', fontSize: 13, fontWeight: '800' },
  toolTimelineChevron: { marginLeft: 5 },
  toolTimelineChevronOpen: { marginLeft: 5, transform: [{ rotate: '90deg' }] },
  toolTimelineRows: { marginTop: 3 },
  toolTimelineItem: { minHeight: 39, width: '100%' },
  toolTimelineRow: { flexDirection: 'row', minHeight: 39 },
  toolTimelineIconCol: { alignItems: 'center', width: 28 },
  toolTimelineLine: { backgroundColor: '#3A3A3E', flex: 1, marginTop: 1, width: 1 },
  toolTimelineMeta: { alignSelf: 'stretch', flex: 1, minWidth: 0, paddingBottom: 8 },
  toolTimelineRowHeader: { alignItems: 'center', flexDirection: 'row', minHeight: 27, width: '100%' },
  toolTimelineTitle: { color: '#F4F4F5', flexShrink: 1, fontSize: 15, fontWeight: '800' },
  toolTimelineInline: {
    color: '#A1A1AA',
    flex: 1,
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 13,
    fontWeight: '700',
    marginLeft: 8,
  },
  toolTimelineStatus: { color: '#A1A1AA', fontSize: 13, fontWeight: '700', marginLeft: 20, marginTop: 1 },
  toolTimelineDetailsSlot: {
    alignSelf: 'stretch',
    marginLeft: 8,
    marginRight: 2,
    paddingBottom: 10,
  },
  toolTimelineDetails: {
    backgroundColor: '#070707',
    borderColor: '#242429',
    borderRadius: 11,
    borderWidth: 1,
    marginLeft: 0,
    marginRight: 0,
    marginTop: 8,
    overflow: 'hidden',
    paddingHorizontal: 0,
    paddingVertical: 0,
    width: '100%',
  },
  toolTimelineDetailVerticalScroll: {
    maxHeight: 220,
    width: '100%',
  },
  toolTimelineDetailHorizontalScroll: {
    width: '100%',
  },
  toolTimelineDetailScrollContent: {
    paddingHorizontal: 10,
    paddingVertical: 9,
  },
  toolTimelineDetailText: {
    color: '#D4D4D8',
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 12,
    lineHeight: 18,
  },
  toolApprovalCard: {
    backgroundColor: '#111111',
    borderColor: '#2A2A2E',
    borderRadius: 15,
    borderWidth: 1,
    marginTop: 8,
    padding: 13,
    width: '100%',
  },
  toolApprovalHeader: {
    alignItems: 'center',
    flexDirection: 'row',
  },
  toolApprovalHeaderText: { flex: 1, marginLeft: 10, minWidth: 0 },
  toolApprovalTitle: { color: '#F4F4F5', fontSize: 14, fontWeight: '900' },
  toolApprovalSubtitle: { color: '#A1A1AA', fontSize: 12, fontWeight: '700', marginTop: 2 },
  toolApprovalBody: { color: '#D4D4D8', fontSize: 13, lineHeight: 19, marginTop: 12 },
  toolApprovalMuted: { color: '#8E8E93', fontSize: 11, fontWeight: '800', marginBottom: 7 },
  toolApprovalIcon: {
    alignItems: 'center',
    backgroundColor: '#1F1F22',
    borderColor: '#34343A',
    borderRadius: 13,
    borderWidth: 1,
    height: 34,
    justifyContent: 'center',
    width: 34,
  },
  toolApprovalBrandIcon: {
    alignItems: 'center',
    backgroundColor: '#F4F0E6',
    borderRadius: 13,
    height: 34,
    justifyContent: 'center',
    overflow: 'hidden',
    width: 34,
  },
  toolApprovalBrandFallback: { color: '#111111', fontSize: 12, fontWeight: '900' },
  toolApprovalScopeWrap: { marginTop: 12 },
  toolApprovalChipWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 10 },
  toolApprovalChip: {
    backgroundColor: '#181818',
    borderColor: '#303035',
    borderRadius: 10,
    borderWidth: 1,
    maxWidth: '100%',
    paddingHorizontal: 8,
    paddingVertical: 5,
  },
  toolApprovalChipText: {
    color: '#C7C7CC',
    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
    fontSize: 11,
    fontWeight: '700',
  },
  toolApprovalInputs: { gap: 11, marginTop: 12 },
  toolApprovalInputGroup: { gap: 5 },
  toolApprovalInputLabel: { color: '#F4F4F5', fontSize: 12, fontWeight: '800' },
  toolApprovalInputHelp: { color: '#A1A1AA', fontSize: 11, lineHeight: 15 },
  toolApprovalInputLink: { color: '#93C5FD', fontSize: 11, lineHeight: 15 },
  toolApprovalInput: {
    backgroundColor: '#080808',
    borderColor: '#2A2A2E',
    borderRadius: 10,
    borderWidth: 1,
    color: '#F4F4F5',
    fontSize: 14,
    minHeight: 42,
    paddingHorizontal: 11,
    paddingVertical: 9,
  },
  toolApprovalMultilineInput: {
    minHeight: 92,
    paddingTop: 10,
  },
  toolApprovalActions: { flexDirection: 'row', gap: 8, marginTop: 13 },
  toolApprovalPrimaryButton: {
    alignItems: 'center',
    backgroundColor: '#F4F4F5',
    borderRadius: 11,
    flexDirection: 'row',
    gap: 6,
    justifyContent: 'center',
    minHeight: 38,
    paddingHorizontal: 13,
  },
  toolApprovalSecondaryButton: {
    alignItems: 'center',
    backgroundColor: '#171717',
    borderColor: '#333338',
    borderRadius: 11,
    borderWidth: 1,
    justifyContent: 'center',
    minHeight: 38,
    paddingHorizontal: 13,
  },
  toolApprovalButtonDisabled: { opacity: 0.55 },
  toolApprovalPrimaryText: { color: '#111111', fontSize: 13, fontWeight: '900' },
  toolApprovalSecondaryText: { color: '#E4E4E7', fontSize: 13, fontWeight: '800' },
  toolApprovalPreviousText: { color: '#8E8E93', fontSize: 12, fontStyle: 'italic', lineHeight: 17, marginTop: 12 },
  toolApprovalError: { color: '#FCA5A5', fontSize: 12, fontWeight: '700', lineHeight: 17, marginTop: 10 },
  toolDoneRow: { alignItems: 'center', flexDirection: 'row', minHeight: 32 },
  toolDoneText: { color: '#F4F4F5', fontSize: 15, fontWeight: '800', marginLeft: 0 },
  identityRow: {
    alignItems: 'center',
    flexDirection: 'row',
    marginBottom: 6,
  },
  identityName: { color: '#BDBDC2', flexShrink: 1, fontSize: 15, fontWeight: '700', minWidth: 0 },
  userIdentityRow: { alignSelf: 'flex-end', flexDirection: 'row-reverse', marginRight: 0 },
  userIdentityName: { color: '#8E8E93', marginRight: 8, textAlign: 'right' },
  assistantIdentityRow: {
    alignItems: 'center',
    alignSelf: 'flex-start',
    flexDirection: 'row',
    marginBottom: 6,
  },
  assistantIdentityName: { color: '#F4F4F5', fontSize: 15, fontWeight: '800', marginLeft: 8 },
  typingWrap: {
    alignItems: 'center',
    alignSelf: 'flex-start',
    flexDirection: 'row',
    marginLeft: 4,
    marginTop: 8,
    paddingHorizontal: 3,
    paddingVertical: 6,
  },
  thinkingPhaseIcon: { alignItems: 'center', height: 24, justifyContent: 'center', width: 24 },
  typingTextWrap: { marginLeft: 8 },
  queuedWrap: {
    alignSelf: 'stretch',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 14,
    borderWidth: 1,
    marginTop: 8,
    padding: 11,
  },
  queuedTitle: { color: '#8E8E93', fontSize: 11, fontWeight: '800', marginBottom: 4 },
  queuedRow: { alignItems: 'flex-start', flexDirection: 'row', gap: 6, marginTop: 2 },
  queuedMessage: { color: '#C7C7CC', flex: 1, fontSize: 12, lineHeight: 17 },
  queuedEditInput: {
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    color: '#F4F4F5',
    flex: 1,
    fontSize: 12,
    maxHeight: 100,
    paddingHorizontal: 8,
    paddingVertical: 6,
  },
  queuedIconButton: { alignItems: 'center', height: 22, justifyContent: 'center', width: 22 },
});