import React, { memo } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Ionicons from '@react-native-vector-icons/ionicons';
import { useTheme, fontFamily } from '../../../theme';
import { Card } from '../../../components';

interface SummaryCardProps {
  branch: string;
  user: string;
  tenant: string;
}

const SummaryCardComponent = ({ branch, user, tenant }: SummaryCardProps) => {
  const theme = useTheme();
  const today = new Date().toLocaleDateString('en-IN', {
    day: '2-digit',
    month: 'short',
    year: 'numeric',
  });

  return (
    <Card style={styles.container}>
      <View style={styles.header}>
        <View style={[styles.iconFrame, { backgroundColor: `${theme.colors.primary}10` }]}>
          <Ionicons name="information-circle" size={18} color={theme.colors.primary} />
        </View>
        <View>
          <Text style={[styles.title, { color: theme.colors.textPrimary }]}>Account Details</Text>
          <Text style={[styles.date, { color: theme.colors.textSecondary }]}>{today}</Text>
        </View>
      </View>
      
      <View style={styles.grid}>
        <View style={styles.item}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Branch Name</Text>
          <Text style={[styles.value, { color: theme.colors.textPrimary }]}>{branch}</Text>
        </View>
        <View style={styles.item}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Account ID</Text>
          <Text style={[styles.value, { color: theme.colors.textPrimary }]}>{user}</Text>
        </View>
        <View style={styles.item}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>Server Node</Text>
          <Text style={[styles.value, { color: theme.colors.textPrimary }]}>{tenant}</Text>
        </View>
        <View style={styles.item}>
          <Text style={[styles.label, { color: theme.colors.textSecondary }]}>System Status</Text>
          <View style={styles.row}>
            <View style={[styles.dot, { backgroundColor: theme.colors.success }]} />
            <Text style={[styles.value, { color: theme.colors.success }]}>Online</Text>
          </View>
        </View>
      </View>
    </Card>
  );
};

const styles = StyleSheet.create({
  container: {
    gap: 20,
    padding: 20,
    borderRadius: 24,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  iconFrame: {
    width: 36,
    height: 36,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 16,
    fontFamily: fontFamily.bold,
    letterSpacing: -0.3,
  },
  date: {
    fontSize: 12,
    fontFamily: fontFamily.medium,
    marginTop: 1,
  },
  grid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    rowGap: 16,
  },
  item: {
    width: '50%',
    gap: 4,
  },
  label: {
    fontSize: 10,
    fontFamily: fontFamily.bold,
    textTransform: 'uppercase',
    letterSpacing: 1,
  },
  value: {
    fontSize: 13,
    fontFamily: fontFamily.bold,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  dot: {
    width: 6,
    height: 6,
    borderRadius: 3,
  },
});

export const SummaryCard = memo(SummaryCardComponent);