import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  app: {
    flex: 1,
    backgroundColor: '#f8f9fa',
  },
  container: {
    flex: 1,
    padding: 16,
  },
  videoContainer: {
    width: '100%',
    aspectRatio: 16 / 9,
    backgroundColor: '#000',
    borderRadius: 12,
    overflow: 'hidden',
    marginBottom: 16,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  video: {
    width: '100%',
    height: '100%',
  },
  hiddenVideo: {
    width: '100%',
    height: '100%',
    backgroundColor: '#333',
    alignItems: 'center',
    justifyContent: 'center',
  },
  hiddenVideoText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  section: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    marginBottom: 12,
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.05,
    shadowRadius: 2,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '700',
    color: '#1a1a1a',
    marginBottom: 12,
  },
  subSectionTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#666',
    marginTop: 12,
    marginBottom: 8,
  },
  progressRow: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  progressSlider: {
    flex: 1,
    marginHorizontal: 12,
  },
  timeText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#666',
    width: 50,
    textAlign: 'center',
    fontVariant: ['tabular-nums'],
  },
  transportRow: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    gap: 12,
  },
  controlButton: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#f0f0f0',
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  controlButtonLarge: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: '#007aff',
  },
  controlIcon: {
    fontSize: 20,
    color: '#333',
  },
  controlIconLarge: {
    fontSize: 28,
    color: '#fff',
  },
  audioControls: {
    gap: 16,
  },
  sliderControl: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  controlLabel: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
    width: 60,
  },
  slider: {
    flex: 1,
  },
  valueText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#666',
    width: 40,
    textAlign: 'right',
  },
  switchRow: {
    flexDirection: 'row',
    gap: 20,
    flexWrap: 'wrap',
  },
  switchColumn: {
    flexDirection: 'column',
    gap: 8,
  },
  switchControl: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    flex: 1,
    minWidth: 120,
  },
  switchLabel: {
    fontSize: 14,
    fontWeight: '500',
    color: '#333',
  },
  buttonGroup: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  toggleButton: {
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
    backgroundColor: '#f0f0f0',
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  toggleButtonActive: {
    backgroundColor: '#007aff',
    borderColor: '#007aff',
  },
  toggleButtonText: {
    fontSize: 14,
    fontWeight: '500',
    color: '#666',
    textTransform: 'capitalize',
  },
  toggleButtonTextActive: {
    color: '#fff',
    fontWeight: '600',
  },
  actionGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
  },
  actionButton: {
    backgroundColor: '#007aff',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
  },
  actionButtonText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: 14,
  },
  eventLog: {
    backgroundColor: '#f8f9fa',
    borderRadius: 8,
    borderLeftWidth: 3,
    borderLeftColor: '#007aff',
    height: 200,
  },
  eventLogScroll: {
    flex: 1,
    padding: 12,
  },
  eventItem: {
    paddingVertical: 4,
    borderBottomWidth: 1,
    borderBottomColor: '#e1e1e1',
  },
  eventTime: {
    fontSize: 10,
    color: '#999',
    fontFamily: 'monospace',
    marginBottom: 2,
  },
  eventText: {
    fontSize: 12,
    color: '#666',
    fontFamily: 'monospace',
  },
  mountControl: {
    padding: 16,
    alignItems: 'center',
  },
  trackList: {
    marginTop: 12,
  },
  trackButton: {
    padding: 12,
    borderWidth: 1,
    borderColor: '#e0e0e0',
    borderRadius: 8,
    marginBottom: 8,
  },
  trackButtonSelected: {
    backgroundColor: '#007aff',
    borderColor: '#007aff',
  },
  trackButtonText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
  },
  trackButtonTextSelected: {
    color: '#fff',
    fontWeight: '600',
  },
  noTracksText: {
    fontSize: 14,
    color: '#666',
    fontWeight: '600',
    textAlign: 'center',
  },
  noTracksSubText: {
    fontSize: 12,
    color: '#999',
    textAlign: 'center',
  },
  selectedTrackInfo: {
    backgroundColor: '#e7f4ff',
    padding: 12,
    borderRadius: 8,
    borderLeftWidth: 3,
    borderLeftColor: '#007aff',
    marginBottom: 12,
  },
  selectedTrackLabel: {
    fontSize: 12,
    fontWeight: '600',
    color: '#666',
    marginBottom: 4,
  },
  selectedTrackText: {
    fontSize: 14,
    fontWeight: '600',
    color: '#007aff',
  },
  eventLogContainer: {
    backgroundColor: '#f8f9fa',
    padding: 12,
    borderRadius: 8,
    borderLeftWidth: 3,
    borderLeftColor: '#28a745',
    marginBottom: 12,
  },
  eventLogTitle: {
    fontSize: 12,
    fontWeight: '600',
    color: '#666',
    marginBottom: 8,
  },
  eventLogText: {
    fontSize: 11,
    color: '#333',
    fontFamily: 'monospace',
    marginBottom: 2,
  },
});
