/**
 * Policy Details Screen
 * View detailed policy information
 */

import React from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { useNavigation } from '@react-navigation/native';
import { format } from 'date-fns';

export default function PolicyDetailsScreen({ route }) {
  const navigation = useNavigation();
  const { policy } = route.params;

  const getStatusColor = (status) => {
    switch (status) {
      case 'ACTIVE':
        return '#10b981';
      case 'LAPSED':
        return '#ef4444';
      default:
        return '#6b7280';
    }
  };

  return (
    <ScrollView style={styles.container}>
      <View style={styles.card}>
        <View style={styles.header}>
          <View style={styles.iconContainer}>
            <Icon name="shield-account" size={32} color="#3b82f6" />
          </View>
          <View style={styles.headerContent}>
            <Text style={styles.policyNumber}>{policy.policy_number}</Text>
            <View style={[styles.statusBadge, { backgroundColor: getStatusColor(policy.policy_status) + '20' }]}>
              <Text style={[styles.statusText, { color: getStatusColor(policy.policy_status) }]}>
                {policy.policy_status}
              </Text>
            </View>
          </View>
        </View>

        <View style={styles.details}>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>Product</Text>
            <Text style={styles.detailValue}>{policy.product_name || 'Life Insurance'}</Text>
          </View>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>Sum Assured</Text>
            <Text style={styles.detailValue}>
              KES {parseFloat(policy.sum_assured).toLocaleString()}
            </Text>
          </View>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>Premium Amount</Text>
            <Text style={styles.detailValue}>
              KES {parseFloat(policy.premium_amount).toLocaleString()}
            </Text>
          </View>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>Premium Frequency</Text>
            <Text style={styles.detailValue}>{policy.premium_frequency || 'ANNUAL'}</Text>
          </View>
          <View style={styles.detailRow}>
            <Text style={styles.detailLabel}>Start Date</Text>
            <Text style={styles.detailValue}>
              {format(new Date(policy.policy_start_date), 'dd MMMM yyyy')}
            </Text>
          </View>
          {policy.maturity_date && (
            <View style={styles.detailRow}>
              <Text style={styles.detailLabel}>Maturity Date</Text>
              <Text style={styles.detailValue}>
                {format(new Date(policy.maturity_date), 'dd MMMM yyyy')}
              </Text>
            </View>
          )}
        </View>

        <View style={styles.actions}>
          <TouchableOpacity
            style={styles.actionButton}
            onPress={() => navigation.navigate('Premiums')}
          >
            <Icon name="credit-card" size={20} color="#ffffff" />
            <Text style={styles.actionButtonText}>View Premiums</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.actionButton, styles.actionButtonSecondary]}
            onPress={() => navigation.navigate('Claims')}
          >
            <Icon name="file-document" size={20} color="#2563eb" />
            <Text style={[styles.actionButtonText, styles.actionButtonTextSecondary]}>
              File Claim
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f9fafb',
  },
  card: {
    backgroundColor: '#ffffff',
    margin: 16,
    borderRadius: 12,
    padding: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 24,
    paddingBottom: 24,
    borderBottomWidth: 1,
    borderBottomColor: '#e5e7eb',
  },
  iconContainer: {
    width: 64,
    height: 64,
    borderRadius: 32,
    backgroundColor: '#dbeafe',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 16,
  },
  headerContent: {
    flex: 1,
  },
  policyNumber: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#1f2937',
    marginBottom: 8,
  },
  statusBadge: {
    alignSelf: 'flex-start',
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 12,
  },
  statusText: {
    fontSize: 12,
    fontWeight: '600',
  },
  details: {
    marginTop: 8,
  },
  detailRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: 12,
    borderBottomWidth: 1,
    borderBottomColor: '#f3f4f6',
  },
  detailLabel: {
    fontSize: 14,
    color: '#6b7280',
  },
  detailValue: {
    fontSize: 14,
    fontWeight: '600',
    color: '#1f2937',
  },
  actions: {
    marginTop: 24,
    paddingTop: 24,
    borderTopWidth: 1,
    borderTopColor: '#e5e7eb',
  },
  actionButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2563eb',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
  },
  actionButtonSecondary: {
    backgroundColor: '#ffffff',
    borderWidth: 1,
    borderColor: '#2563eb',
  },
  actionButtonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
    marginLeft: 8,
  },
  actionButtonTextSecondary: {
    color: '#2563eb',
  },
});
