import { Colors } from '@/constants/Colors';
import { Ionicons } from '@expo/vector-icons';
import dayjs from 'dayjs';
import React from 'react';
import { DimensionValue, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { InlineTipProps } from './types';

export const InlineTip: React.FC<InlineTipProps> = ({
  selectedDate,
  selectedInfo,
  columnIndex,
  onMarkStart,
  onCancelMark,
}) => {
  // 14.28% per cell. Center is 7.14%.
  const pointerLeft = `${columnIndex * 14.2857 + 7.1428}%` as DimensionValue;
  const isFuture = selectedDate.isAfter(dayjs(), 'day');

  return (
    <View style={styles.inlineTipCard}>
      <View style={[styles.inlineTipPointer, { left: pointerLeft }]} />
      <View style={styles.inlineTipRow}>
        <View style={styles.inlineTipDate}>
          <Ionicons name="calendar-outline" size={16} color="#111827" />
          <Text style={styles.inlineTipDateText}>{selectedDate.format('M月D日')}</Text>
        </View>
        {!isFuture && (!selectedInfo || !selectedInfo.confirmed) && (
          <TouchableOpacity style={styles.inlinePrimaryBtn} onPress={onMarkStart}>
            <Ionicons name="add" size={14} color="#fff" />
            <Text style={styles.inlinePrimaryText}>标记经期</Text>
          </TouchableOpacity>
        )}
        {!isFuture && selectedInfo?.confirmed && selectedInfo.status === 'period' && (
          <TouchableOpacity style={styles.inlineSecondaryBtn} onPress={onCancelMark}>
            <Text style={styles.inlineSecondaryText}>取消标记</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  inlineTipCard: {
    backgroundColor: '#e8e7ff',
    borderRadius: 18,
    paddingVertical: 10,
    paddingHorizontal: 12,
    shadowColor: '#000',
    shadowOpacity: 0.04,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
    elevation: 1,
  },
  inlineTipPointer: {
    position: 'absolute',
    top: -6,
    width: 12,
    height: 12,
    marginLeft: -6,
    backgroundColor: '#e8e7ff',
    transform: [{ rotate: '45deg' }],
    borderRadius: 3,
  },
  inlineTipRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    gap: 8,
  },
  inlineTipDate: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 6,
  },
  inlineTipDateText: {
    fontSize: 14,
    color: '#111827',
    fontWeight: '800',
    fontFamily: 'AliBold',
  },
  inlinePrimaryBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: Colors.light.primary,
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 14,
    gap: 6,
  },
  inlinePrimaryText: {
    color: '#fff',
    fontSize: 13,
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
  inlineSecondaryBtn: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 14,
    backgroundColor: '#fff',
    borderWidth: 1,
    borderColor: '#d1d5db',
  },
  inlineSecondaryText: {
    color: '#111827',
    fontSize: 13,
    fontWeight: '700',
    fontFamily: 'AliBold',
  },
});