import { View, Text, Pressable } from "react-native";
import { ProposedEventChange } from "@calchat/shared";
import { useThemeStore } from "../stores/ThemeStore";
import { EventCardBase } from "./EventCardBase";

type ProposedEventCardProps = {
  proposedChange: ProposedEventChange;
  onConfirm: () => void;
  onReject: () => void;
};

const ConfirmRejectButtons = ({
  isDisabled,
  respondedAction,
  onConfirm,
  onReject,
}: {
  isDisabled: boolean;
  respondedAction?: "confirm" | "reject";
  onConfirm: () => void;
  onReject: () => void;
}) => {
  const { theme } = useThemeStore();
  return (
    <View className="flex-row mt-3 gap-2">
      <Pressable
        onPress={onConfirm}
        disabled={isDisabled}
        className="flex-1 py-2 rounded-lg items-center"
        style={{
          backgroundColor: isDisabled
            ? theme.disabledButton
            : theme.confirmButton,
          borderWidth: respondedAction === "confirm" ? 2 : 0,
          borderColor: theme.confirmButton,
        }}
      >
        <Text style={{ color: theme.buttonText }} className="font-medium">
          Annehmen
        </Text>
      </Pressable>
      <Pressable
        onPress={onReject}
        disabled={isDisabled}
        className="flex-1 py-2 rounded-lg items-center"
        style={{
          backgroundColor: isDisabled
            ? theme.disabledButton
            : theme.rejectButton,
          borderWidth: respondedAction === "reject" ? 2 : 0,
          borderColor: theme.rejectButton,
        }}
      >
        <Text style={{ color: theme.buttonText }} className="font-medium">
          Ablehnen
        </Text>
      </Pressable>
    </View>
  );
};

export const ProposedEventCard = ({
  proposedChange,
  onConfirm,
  onReject,
}: ProposedEventCardProps) => {
  const event = proposedChange.event;
  // respondedAction is now part of the proposedChange
  const isDisabled = !!proposedChange.respondedAction;

  if (!event) {
    return null;
  }

  return (
    <View className="mt-2">
      <EventCardBase
        className="m-2"
        title={event.title}
        startTime={event.startTime}
        endTime={event.endTime}
        description={event.description}
        isRecurring={event.isRecurring}
      >
        <ConfirmRejectButtons
          isDisabled={isDisabled}
          respondedAction={proposedChange.respondedAction}
          onConfirm={onConfirm}
          onReject={onReject}
        />
      </EventCardBase>
    </View>
  );
};