import { StyleSheet, Text, View } from 'react-native';
import { DriverShell } from '../components/driver-shell';
import { driverTheme } from '../src/lib/driver-ui';

const docs = [
  { title: 'CNH frente e verso', status: 'Pendente de OCR e validade', tone: 'warning' },
  { title: 'CRLV do veiculo', status: 'Aguardando conferencia documental', tone: 'info' },
  { title: 'Selfie com documento', status: 'Fila de biometria operacional', tone: 'success' },
  { title: 'Comprovante bancario / PIX', status: 'Pronto para validacao financeira', tone: 'info' },
];

const toneStyles = {
  warning: { shell: '#FEF3C7', text: '#92400E' },
  info: { shell: '#E0F2FE', text: '#075985' },
  success: { shell: '#DCFCE7', text: '#166534' },
};

export default function DriverDocumentsScreen() {
  return (
    <DriverShell
      eyebrow="Compliance"
      title="Documentos do entregador"
      subtitle="Tudo o que impacta liberacao, antifraude e repasse fica visivel em uma trilha simples de acompanhar."
    >
      <View style={styles.grid}>
        {docs.map((doc) => {
          const tone = toneStyles[doc.tone as keyof typeof toneStyles];
          return (
            <View key={doc.title} style={styles.card}>
              <View style={[styles.badge, { backgroundColor: tone.shell }]}>
                <Text style={[styles.badgeText, { color: tone.text }]}>{doc.tone}</Text>
              </View>
              <Text style={styles.cardTitle}>{doc.title}</Text>
              <Text style={styles.cardStatus}>{doc.status}</Text>
            </View>
          );
        })}
      </View>

      <View style={styles.tipCard}>
        <Text style={styles.tipTitle}>O que destrava mais rapido</Text>
        <Text style={styles.tipBody}>Documento legivel, placa correta da moto e chave PIX validada reduzem retrabalho e aceleram a liberacao para corridas.</Text>
      </View>
    </DriverShell>
  );
}

const styles = StyleSheet.create({
  grid: { gap: 12 },
  card: {
    borderRadius: 24,
    padding: 18,
    backgroundColor: driverTheme.card,
  },
  badge: {
    alignSelf: 'flex-start',
    borderRadius: 999,
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
  badgeText: {
    fontSize: 10,
    fontWeight: '900',
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
  cardTitle: {
    marginTop: 12,
    fontSize: 18,
    fontWeight: '900',
    color: driverTheme.textDark,
  },
  cardStatus: {
    marginTop: 8,
    fontSize: 13,
    lineHeight: 19,
    color: '#475569',
    fontWeight: '600',
  },
  tipCard: {
    borderRadius: 24,
    padding: 18,
    backgroundColor: driverTheme.panelSoft,
    borderWidth: 1,
    borderColor: driverTheme.border,
  },
  tipTitle: {
    fontSize: 16,
    fontWeight: '900',
    color: driverTheme.text,
  },
  tipBody: {
    marginTop: 8,
    fontSize: 13,
    lineHeight: 20,
    color: '#CBD5E1',
    fontWeight: '600',
  },
});