import { createThemedStyles } from '../../theme';

export const connectorPanelStyles = createThemedStyles({
  // Cards sit on the surface fill so they read lighter than the canvas page
  // background (matches the web connectors experience), with 12px inner padding.
  cardSurface: {
    backgroundColor: '#0B0B0C',
    paddingVertical: 12,
  },
  cancelButton: {
    alignItems: 'center',
    backgroundColor: '#1F1F23',
    borderRadius: 8,
    flex: 1,
    justifyContent: 'center',
    minHeight: 46,
  },
  cancelButtonText: {
    color: '#F4F4F5',
    fontSize: 14,
    fontWeight: '900',
  },
  connectButton: {
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: '#F4F4F5',
    borderRadius: 8,
    justifyContent: 'center',
    minHeight: 46,
  },
  connectButtonText: {
    color: '#111111',
    fontSize: 14,
    fontWeight: '900',
  },
  connectChip: {
    alignItems: 'center',
    backgroundColor: '#0B0B0C',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    justifyContent: 'center',
    marginLeft: 8,
    minHeight: 32,
    paddingHorizontal: 12,
  },
  connectChipText: {
    color: '#F4F4F5',
    fontSize: 12,
    fontWeight: '800',
  },
  connectingFooter: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 12,
  },
  detailDescription: {
    color: '#E4E4E7',
    fontSize: 14,
    fontWeight: '600',
    lineHeight: 21,
    marginTop: 14,
  },
  detailFooter: {
    marginTop: 20,
  },
  detailHeader: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 10,
  },
  detailSubtitle: {
    color: '#A1A1AA',
    fontSize: 13,
    fontWeight: '600',
    lineHeight: 18,
    marginTop: 2,
  },
  detailTitle: {
    color: '#F4F4F5',
    fontSize: 18,
    fontWeight: '800',
  },
  detailTitleWrap: {
    flex: 1,
    minWidth: 0,
  },
  disabled: {
    opacity: 0.55,
  },
  emptyText: {
    color: '#A1A1AA',
    fontSize: 13,
    fontWeight: '600',
    lineHeight: 18,
  },
  greenCount: {
    backgroundColor: '#11251A',
    borderRadius: 11,
    color: '#34D399',
    fontSize: 12,
    fontWeight: '900',
    minWidth: 22,
    overflow: 'hidden',
    paddingHorizontal: 7,
    paddingVertical: 3,
    textAlign: 'center',
  },
  readOnlyBody: {
    color: '#A1A1AA',
    fontSize: 12,
    fontWeight: '600',
    lineHeight: 17,
    marginTop: 2,
  },
  readOnlyRow: {
    alignItems: 'center',
    backgroundColor: '#151515',
    borderColor: '#2A2A2A',
    borderRadius: 8,
    borderWidth: 1,
    flexDirection: 'row',
    gap: 12,
    marginTop: 16,
    paddingHorizontal: 12,
    paddingVertical: 12,
  },
  readOnlyText: {
    flex: 1,
    minWidth: 0,
  },
  readOnlyTitle: {
    color: '#F4F4F5',
    fontSize: 14,
    fontWeight: '800',
  },
  section: {
    marginBottom: 22,
  },
  sectionHeader: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 8,
    justifyContent: 'space-between',
    marginBottom: 11,
  },
  sectionTitle: {
    color: '#F4F4F5',
    fontSize: 15,
    fontWeight: '700',
  },
  statusRow: {
    alignItems: 'center',
    flexDirection: 'row',
    gap: 5,
    marginLeft: 8,
  },
  statusDot: {
    backgroundColor: '#34D399',
    borderRadius: 4,
    height: 7,
    width: 7,
  },
  statusActiveText: {
    color: '#34D399',
    fontSize: 11,
    fontWeight: '700',
  },
  statusMutedText: {
    color: '#A1A1AA',
    fontSize: 11,
    fontWeight: '700',
  },
  statusDangerText: {
    color: '#FCA5A5',
    fontSize: 11,
    fontWeight: '700',
    textTransform: 'capitalize',
  },
  webOnlyPill: {
    alignItems: 'center',
    alignSelf: 'flex-start',
    backgroundColor: '#1F1F23',
    borderRadius: 8,
    flexDirection: 'row',
    gap: 6,
    paddingHorizontal: 12,
    paddingVertical: 9,
  },
  webOnlyPillText: {
    color: '#A1A1AA',
    fontSize: 13,
    fontWeight: '900',
  },
});