CBS-Mobile-App/src/modules/services/screens/CertificateListScreen.tsx

import React, { useState } from 'react';
import { View, StyleSheet, Text, FlatList } from 'react-native';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';
import Ionicons from '@react-native-vector-icons/ionicons';
import type { ServicesStackParamList } from '../../../navigation/types';
import { ScreenShell, Card, Button } from '../../../components';
import { AppModal } from '../../../components/Modal';
import { useToast } from '../../../hooks/useToast';
import { useTheme, fontFamily } from '../../../theme';

type Props = NativeStackScreenProps<ServicesStackParamList, 'CertificateList'>;

export default function CertificateListScreen({ route }: Props) {
  const { title, category } = route.params;
  const theme = useTheme();
  const toast = useToast();
  const [viewingDoc, setViewingDoc] = useState<string | null>(null);

  const mockDocs = Array.from({ length: 4 }).map((_, i) => ({
    id: String(i),
    name: `FY ${26 - i}-${27 - i} ${title}`,
    date: `Generated Apr ${2026 - i}`,
    size: `${(1.2 + i * 0.3).toFixed(1)} MB`,
  }));

  const handleDownload = (docName: string) => {
    toast('Download started', 'success', `${docName} is being saved securely to your device.`);
  };

  return (
    <ScreenShell
      // The body is a FlatList, so it owns the scrolling.
      scrollable={false}
      title={title} subtitle={`${mockDocs.length} documents available`}>
      <FlatList
        data={mockDocs}
        keyExtractor={item => item.id}
        contentContainerStyle={{ gap: 16, paddingBottom: 24 }}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => (
          <Card variant="glass" style={styles.card}>
            <View style={styles.cardTop}>
              <View style={[styles.docIcon, { backgroundColor: `${theme.colors.primary}10`, borderColor: `${theme.colors.primary}20` }]}>
                 <Ionicons name="document-text" size={26} color={theme.colors.primary} />
              </View>
              <View style={styles.docInfo}>
                <Text style={[styles.docTitle, { color: theme.colors.textPrimary }]}>{item.name}</Text>
                <Text style={[styles.docMeta, { color: theme.colors.textSecondary }]}>
                  {item.date}  •  {item.size}
                </Text>
              </View>
            </View>

            <View style={[styles.divider, { backgroundColor: theme.colors.cardBorder }]} />

            <View style={styles.actionRow}>
              <Button
                title="View"
                variant="ghost"
                fullWidth={false}
                style={[styles.actionBtn, { borderColor: theme.colors.cardBorder }]}
                onPress={() => setViewingDoc(item.name)}
                leftAccessory={<Ionicons name="eye-outline" size={18} color={theme.colors.textPrimary} style={{ marginRight: 2 }} />}
              />
              <Button
                title="Download"
                variant="secondary"
                fullWidth={false}
                style={styles.actionBtn}
                onPress={() => handleDownload(item.name)}
                leftAccessory={<Ionicons name="cloud-download-outline" size={18} color={theme.colors.textPrimary} style={{ marginRight: 2 }} />}
              />
            </View>
          </Card>
        )}
      />

      <AppModal 
        visible={!!viewingDoc} 
        title="Document Preview" 
        onClose={() => setViewingDoc(null)}
      >
        <View style={[styles.certificatePreview, { backgroundColor: theme.colors.background, borderColor: theme.colors.cardBorder }]}>
          <View style={[styles.certHeader, { borderBottomColor: theme.colors.cardBorder }]}>
             <Ionicons name="business" size={20} color={theme.colors.primary} />
             <Text style={[styles.certBankName, { color: theme.colors.primary }]}>CBS BANK LTD.</Text>
          </View>
          <Text style={[styles.certTitle, { color: theme.colors.textPrimary }]}>{title}</Text>
          <View style={{ gap: 8, marginTop: 12 }}>
             <Text style={[styles.certText, { color: theme.colors.textSecondary }]}>
               This officially certifies that the document <Text style={{fontFamily: fontFamily.bold, color: theme.colors.textPrimary}}>{viewingDoc}</Text> has been cryptographically generated and is valid.
             </Text>
             <Text style={[styles.certText, { color: theme.colors.textSecondary }]}>Reference Category: <Text style={{fontFamily: fontFamily.bold}}>{category.toUpperCase()}</Text></Text>
             <Text style={[styles.certText, { color: theme.colors.textSecondary }]}>Account Bearer: Lincpay User</Text>
             <Text style={[styles.certText, { color: theme.colors.textSecondary }]}>Account #: XXXX-XXXX-1234</Text>
          </View>
          <View style={styles.certFooter}>
             <View style={[styles.sealBox, { borderColor: theme.colors.primary }]}>
                <Ionicons name="ribbon-outline" size={20} color={theme.colors.primary} />
             </View>
             <View style={{ alignItems: 'center' }}>
               <Text style={[styles.signature, { color: theme.colors.textPrimary }]}>Auth. Signatory</Text>
               <View style={{ width: 80, height: 1, backgroundColor: theme.colors.textSecondary, marginTop: 4 }} />
             </View>
          </View>
        </View>
        <Button 
          title="Download Full PDF" 
          variant="primary" 
          onPress={() => {
            if (viewingDoc) handleDownload(viewingDoc);
            setViewingDoc(null);
          }} 
          style={{ marginTop: 8 }}
          leftAccessory={<Ionicons name="cloud-download-outline" size={18} color="#fff" style={{ marginRight: 4 }} />}
        />
        <Button 
          title="Close" 
          variant="ghost" 
          onPress={() => setViewingDoc(null)} 
          style={{ marginTop: 4 }}
        />
      </AppModal>
    </ScreenShell>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    gap: 16,
    borderWidth: 1,
  },
  cardTop: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 16,
  },
  docIcon: {
    width: 52,
    height: 52,
    borderRadius: 16,
    borderWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  docInfo: {
    flex: 1,
    gap: 6,
  },
  docTitle: {
    fontFamily: fontFamily.bold,
    fontSize: 16,
    letterSpacing: -0.3,
  },
  docMeta: {
    fontSize: 13,
    fontFamily: fontFamily.medium,
  },
  divider: {
    height: 1,
    width: '100%',
    opacity: 0.6,
  },
  actionRow: {
    flexDirection: 'row',
    gap: 12,
  },
  actionBtn: {
    flex: 1,
    height: 44,
  },
  certificatePreview: {
    padding: 20,
    borderWidth: 1,
    borderRadius: 8,
    marginVertical: 12,
  },
  certHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    borderBottomWidth: 1,
    paddingBottom: 8,
    marginBottom: 12,
  },
  certBankName: {
    fontFamily: fontFamily.bold,
    fontSize: 14,
    letterSpacing: 0.5,
  },
  certTitle: {
    fontFamily: fontFamily.bold,
    fontSize: 18,
    textAlign: 'center',
  },
  certText: {
    fontSize: 13,
    lineHeight: 20,
  },
  certFooter: {
    marginTop: 24,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end',
  },
  sealBox: {
    width: 44, 
    height: 44, 
    borderRadius: 22, 
    borderWidth: 1,
    alignItems: 'center', 
    justifyContent: 'center',
    borderStyle: 'dashed',
  },
  signature: {
    fontStyle: 'italic',
    fontSize: 14,
    fontFamily: fontFamily.semibold,
  },
});