import React from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { useDeviceStore } from '../stores/deviceStore';
import { useDataStore } from '../stores/dataStore';
import { formatBattery, formatTemperature } from '../utils/format';
import { useTheme, type ThemeColors } from '../design/tokens';

function Chip({ label, value, color, theme }: { label: string; value: string; color?: string; theme: ThemeColors }) {
  return (
    <View style={[S.chip, { backgroundColor: theme.bg.raised, borderColor: theme.bg.border }, color ? { borderColor: color + '44' } : null]}>
      {color && <View style={[S.chipDot, { backgroundColor: color }]} />}
      <Text style={[S.chipLabel, { color: theme.text.muted }]}>{label}</Text>
      <Text style={[S.chipValue, { color: color ?? theme.text.secondary }]}>{value}</Text>
    </View>
  );
}

export function DeviceStatusBar() {
  const theme = useTheme();
  const { batteryVolt, temperature, gpsStatus, sdStatus, deviceStatus } = useDeviceStore();
  const frame = useDataStore((s) => s.currentFrame);
  const meta = frame?.meta;

  const hasGps = gpsStatus > 0 || (meta?.gpsStatus ?? 0) > 0;
  const lat = meta?.latitude ?? 0;
  const lon = meta?.longitude ?? 0;
  const coordStr = hasGps && lat ? `${lat.toFixed(4)}, ${lon.toFixed(4)}` : '--';

  const running = deviceStatus === 'running';
  const single  = deviceStatus === 'single';
  const statusColor = running ? theme.green.fg : single ? theme.amber.fg : theme.text.muted;
  const statusLabel = running ? '● 运行中' : single ? '◎ 单次' : '○ 停止';

  return (
    <View style={[S.bar, { backgroundColor: theme.bg.surface, borderBottomColor: theme.bg.border }]}>
      <View style={[S.statusPill, { borderColor: statusColor + '55', backgroundColor: statusColor + '18' }]}>
        <Text style={[S.statusText, { color: statusColor }]}>{statusLabel}</Text>
      </View>

      <Chip label="GPS" value={coordStr} color={hasGps ? theme.green.fg : theme.text.muted} theme={theme} />
      <Chip label="SD"  value={sdStatus > 0 ? 'OK' : '--'} color={sdStatus > 0 ? theme.blue.fg : theme.text.muted} theme={theme} />
      {!!batteryVolt && <Chip label="电池" value={formatBattery(batteryVolt)} theme={theme} />}
      {!!temperature && <Chip label="温度" value={formatTemperature(temperature)} theme={theme} />}
      {frame && (
        <View style={S.frameCount}>
          <Text style={[S.frameCountText, { color: theme.text.ghost }]}>#{frame.frameId}</Text>
        </View>
      )}
    </View>
  );
}

const S = StyleSheet.create({
  bar: {
    flexDirection: 'row',
    paddingHorizontal: 12,
    paddingVertical: 8,
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: 6,
    borderBottomWidth: 1,
  },
  statusPill: {
    borderRadius: 6,
    borderWidth: 1,
    paddingHorizontal: 8,
    paddingVertical: 3,
  },
  statusText: { fontSize: 11, fontWeight: '700', letterSpacing: 0.5 },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
    borderRadius: 6,
    borderWidth: 1,
    paddingHorizontal: 7,
    paddingVertical: 3,
  },
  chipDot:   { width: 5, height: 5, borderRadius: 3 },
  chipLabel: { fontSize: 9, fontWeight: '600', letterSpacing: 0.5 },
  chipValue: { fontSize: 10, fontWeight: '500', fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace' },
  frameCount: { marginLeft: 'auto' },
  frameCountText: { fontSize: 10, fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace' },
});
