import React, { useState, useCallback } from 'react'
import { View, Text, ScrollView, TouchableOpacity, StyleSheet, Alert, RefreshControl } from 'react-native'
import { useFocusEffect } from 'expo-router'
import { COLORS } from '../../constants/Config'
import { getPatchStatus, getPIITypes, applyPatch } from '../../services/api'

const SEV_COLOR: Record<string, string> = {
  critical: COLORS.danger,
  high:     '#F97316',
  medium:   COLORS.warning,
  low:      COLORS.success,
}

export default function PIIStatusScreen() {
  const [piiTypes, setPiiTypes] = useState<any[]>([])
  const [servers,  setServers]  = useState<any[]>([])
  const [loading, setLoading]   = useState(false)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const [p, s] = await Promise.all([getPIITypes(), getPatchStatus()])
      setPiiTypes(p.data?.items ?? [])
      setServers(s.data?.servers ?? [])
    } catch {} finally { setLoading(false) }
  }, [])

  useFocusEffect(useCallback(() => { load() }, [load]))

  return (
    <ScrollView style={s.container} refreshControl={<RefreshControl refreshing={loading} onRefresh={load} />}>

      {/* PII 유형 */}
      <Text style={s.section}>PII 데이터 처리 현황</Text>
      {piiTypes.map((p, i) => (
        <View key={i} style={s.card}>
          <View style={s.row}>
            <Text style={s.piiName}>{p.name}</Text>
            <View style={[s.badge, { backgroundColor: p.status === 'compliant' ? COLORS.success : COLORS.danger }]}>
              <Text style={s.badgeText}>{p.status === 'compliant' ? '준수' : '미준수'}</Text>
            </View>
          </View>
          <Text style={s.meta}>저장 방식: {p.storage} · 보존: {p.retention}</Text>
        </View>
      ))}

      {/* 서버별 패치율 */}
      <Text style={s.section}>서버 패치 적용 현황</Text>
      {servers.map((srv, i) => (
        <View key={i} style={s.card}>
          <View style={s.row}>
            <Text style={s.srvName}>{srv.name} <Text style={s.role}>({srv.role})</Text></Text>
            <Text style={[s.rate, { color: srv.patch_rate >= 80 ? COLORS.success : COLORS.danger }]}>{srv.patch_rate}%</Text>
          </View>
          <View style={s.barBg}>
            <View style={[s.barFill, { width: `${srv.patch_rate}%`, backgroundColor: srv.patch_rate >= 80 ? COLORS.success : COLORS.warning }]} />
          </View>
          <Text style={s.pending}>미적용: {srv.pending}건</Text>
        </View>
      ))}
    </ScrollView>
  )
}

const s = StyleSheet.create({
  container: { flex: 1, backgroundColor: COLORS.bg },
  section:   { fontSize: 15, fontWeight: '700', color: COLORS.text, padding: 16, paddingBottom: 8 },
  card:      { backgroundColor: '#fff', borderRadius: 10, marginHorizontal: 12, marginBottom: 8, padding: 14, elevation: 1 },
  row:       { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 },
  piiName:   { fontSize: 14, fontWeight: '600', color: COLORS.text },
  badge:     { borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2 },
  badgeText: { fontSize: 11, color: '#fff', fontWeight: '700' },
  meta:      { fontSize: 12, color: COLORS.muted },
  srvName:   { fontSize: 14, fontWeight: '600', color: COLORS.text },
  role:      { fontWeight: '400', color: COLORS.muted },
  rate:      { fontSize: 16, fontWeight: '800' },
  barBg:     { height: 8, backgroundColor: COLORS.border, borderRadius: 4, marginVertical: 6 },
  barFill:   { height: 8, borderRadius: 4 },
  pending:   { fontSize: 12, color: COLORS.muted },
})