import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Job } from '../../types';
import { StatusBadge } from '../common/StatusBadge';
import { colors, spacing, radii } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface JobCardProps {
  job: Job;
  onPress: () => void;
}

export function JobCard({ job, onPress }: JobCardProps) {
  const { fontSize } = useResponsive();
  return (
    <TouchableOpacity style={styles.card} onPress={onPress} activeOpacity={0.7}>
      <View style={styles.header}>
        <Text style={[styles.jobNumber, { fontSize: fontSize.caption }]}>{job.job_number}</Text>
        <StatusBadge status={job.status} />
      </View>
      <Text style={[styles.title, { fontSize: fontSize.h3 }]} numberOfLines={1}>
        {job.title}
      </Text>
      {job.description && (
        <Text style={[styles.description, { fontSize: fontSize.bodySmall }]} numberOfLines={2}>
          {job.description}
        </Text>
      )}
      <View style={styles.footer}>
        <View style={styles.progressContainer}>
          <View style={styles.progressBar}>
            <View
              style={[styles.progressFill, { width: `${job.completion_percentage}%` }]}
            />
          </View>
          <Text style={[styles.percentage, { fontSize: fontSize.caption }]}>{job.completion_percentage}%</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    backgroundColor: colors.white,
    borderRadius: radii.lg,
    padding: spacing.lg,
    marginBottom: spacing.md,
    borderWidth: 1,
    borderColor: colors.border,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: spacing.sm,
  },
  jobNumber: {
    fontWeight: '600',
    color: colors.primary[600],
  },
  title: {
    fontWeight: '600',
    color: colors.gray[900],
    marginBottom: 4,
  },
  description: {
    color: colors.gray[500],
    marginBottom: spacing.md,
    lineHeight: 18,
  },
  footer: {},
  progressContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.md,
  },
  progressBar: {
    flex: 1,
    height: 5,
    backgroundColor: colors.gray[100],
    borderRadius: 3,
    overflow: 'hidden',
  },
  progressFill: {
    height: '100%',
    backgroundColor: colors.primary[500],
    borderRadius: 3,
  },
  percentage: {
    fontWeight: '600',
    color: colors.gray[600],
    width: 36,
    textAlign: 'right',
  },
});