import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
import { useAppTheme } from '@theme';
import { ScreenHeader } from '@components';
import { ClipboardIcon, ChevronRightIcon } from '@icons';
import { useNavigation } from '@react-navigation/native';
import { getStyles } from './documentsScreen.styles';

export const DocumentsScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation();

  const documentsList = [
    { id: 'dl', title: 'Driving License', sub: 'Verified', status: 'verified' },
    { id: 'aadhaar', title: 'Aadhaar Card', sub: 'Verified', status: 'verified' },
    { id: 'rc', title: 'Vehicle RC', sub: 'Verified', status: 'verified' },
    { id: 'insurance', title: 'Insurance', sub: 'Expires on 12 May 2026', status: 'expiring' },
    { id: 'vehicle_photo', title: 'Vehicle Photo', sub: 'Verified', status: 'verified' },
    { id: 'profile_photo', title: 'Profile Photo', sub: 'Verified', status: 'verified' },
  ];

  const handleDocClick = (title: string) => {
    Alert.alert('Document Preview', `Opening document view for ${title}...`);
  };

  return (
    <View style={styles.container}>
      {/* Navigation Screen Header */}
      <ScreenHeader
        title="Documents"
        showBack={true}
        onBack={() => navigation.goBack()}
      />

      <ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
        {documentsList.map((doc) => (
          <TouchableOpacity
            key={doc.id}
            style={styles.docCard}
            activeOpacity={0.7}
            onPress={() => handleDocClick(doc.title)}
          >
            <View style={styles.docLeft}>
              <View style={styles.iconContainer}>
                <ClipboardIcon size={20} color={colors.primary} />
              </View>
              <View style={styles.docInfo}>
                <Text style={styles.docTitle} numberOfLines={1}>{doc.title}</Text>
                <Text style={styles.docSub}>{doc.sub}</Text>
              </View>
            </View>

            <View style={styles.statusContainer}>
              <View
                style={[
                  styles.statusBadge,
                  {
                    backgroundColor:
                      doc.status === 'verified'
                        ? colors.primaryLight
                        : colors.warningLight,
                  },
                ]}
              >
                <Text
                  style={[
                    styles.statusText,
                    {
                      color:
                        doc.status === 'verified'
                          ? colors.primary
                          : colors.warning,
                    },
                  ]}
                >
                  {doc.status === 'verified' ? 'VERIFIED' : 'ACTIVE'}
                </Text>
              </View>
              <ChevronRightIcon size={20} color={colors.textSecondary} />
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

export default DocumentsScreen;