/**
 * Showing appointment card for calendar and list views.
 */

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { useTheme } from '../themes/ThemeProvider';
import { Showing } from '../services/api';

interface ShowingCardProps {
  showing: Showing;
  onPress: (showing: Showing) => void;
  propertyAddress?: string;
  clientName?: string;
}

export default function ShowingCard({
  showing,
  onPress,
  propertyAddress,
  clientName,
}: ShowingCardProps) {
  const { theme } = useTheme();

  const statusConfig: Record<string, { color: string; label: string }> = {
    requested: { color: theme.colors.warning, label: 'Requested' },
    confirmed: { color: theme.colors.success, label: 'Confirmed' },
    cancelled: { color: theme.colors.error, label: 'Cancelled' },
    completed: { color: theme.colors.info, label: 'Completed' },
  };

  const config = statusConfig[showing.status] ?? statusConfig.requested;

  const formatTime = (time: string): string => {
    try {
      const [hours, minutes] = time.split(':').map(Number);
      const ampm = hours >= 12 ? 'PM' : 'AM';
      const displayHours = hours % 12 || 12;
      return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
    } catch {
      return time;
    }
  };

  return (
    <TouchableOpacity
      style={[styles.card, theme.shadow.sm, { backgroundColor: theme.colors.card }]}
      onPress={() => onPress(showing)}
      activeOpacity={0.7}
    >
      <View style={[styles.timeStrip, { backgroundColor: config.color }]}>
        <Text style={styles.timeText}>{formatTime(showing.showing_time)}</Text>
      </View>

      <View style={styles.content}>
        <View style={styles.header}>
          <Text style={[styles.address, { color: theme.colors.text }]} numberOfLines={1}>
            {propertyAddress ?? `Property #${showing.property_id}`}
          </Text>
          <View style={[styles.statusDot, { backgroundColor: config.color }]} />
        </View>

        {clientName && (
          <Text style={[styles.client, { color: theme.colors.textSecondary }]}>
            {clientName}
          </Text>
        )}

        <Text style={[styles.date, { color: theme.colors.textSecondary }]}>
          {showing.showing_date}
        </Text>

        {showing.instructions ? (
          <Text style={[styles.instructions, { color: theme.colors.textSecondary }]} numberOfLines={2}>
            {showing.instructions}
          </Text>
        ) : null}

        {showing.lockbox_code ? (
          <View style={[styles.lockbox, { backgroundColor: theme.colors.inputBg }]}>
            <Text style={[styles.lockboxLabel, { color: theme.colors.textSecondary }]}>Lockbox:</Text>
            <Text style={[styles.lockboxCode, { color: theme.colors.primary }]}>
              {showing.lockbox_code}
            </Text>
          </View>
        ) : null}
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    borderRadius: 10,
    marginHorizontal: 16,
    marginVertical: 6,
    overflow: 'hidden',
  },
  timeStrip: {
    width: 60,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 12,
  },
  timeText: {
    color: '#FFF',
    fontSize: 12,
    fontWeight: '700',
    textAlign: 'center',
  },
  content: {
    flex: 1,
    padding: 12,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  address: {
    fontSize: 15,
    fontWeight: '600',
    flex: 1,
    marginRight: 8,
  },
  statusDot: {
    width: 10,
    height: 10,
    borderRadius: 5,
  },
  client: {
    fontSize: 13,
    marginTop: 2,
  },
  date: {
    fontSize: 12,
    marginTop: 4,
  },
  instructions: {
    fontSize: 12,
    marginTop: 6,
    fontStyle: 'italic',
  },
  lockbox: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 8,
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 6,
    alignSelf: 'flex-start',
  },
  lockboxLabel: {
    fontSize: 11,
    marginRight: 4,
  },
  lockboxCode: {
    fontSize: 13,
    fontWeight: '700',
    fontFamily: 'Courier',
  },
});