import React from 'react';
import { View, Text, StyleSheet, Modal, TouchableOpacity } from 'react-native';
import { useSettings } from '@/theme';
import { TaskData, SubtaskData } from '@/types';
import Svg, { Path } from 'react-native-svg';

interface TaskOverflowMenuProps {
  visible: boolean;
  task: TaskData | SubtaskData | null;
  subtask?: boolean;
  onClose: () => void;
  onEdit: () => void;
  onDelete: () => void;
  onDuplicate: () => void;
  onToggleComplete: () => void;
  onChangeCategory?: () => void;
  onChangePriority: () => void;
  onAddSubtask?: () => void;
}

interface MenuAction {
  key: string;
  label: string;
  icon: React.ReactNode;
  onPress: () => void;
  destructive?: boolean;
}

export function TaskOverflowMenu({
  visible,
  task,
  subtask,
  onClose,
  onEdit,
  onDelete,
  onDuplicate,
  onToggleComplete,
  onChangeCategory,
  onChangePriority,
  onAddSubtask,
}: TaskOverflowMenuProps) {
  const { theme } = useSettings();

  if (!task) return null;

  const actions: MenuAction[] = [
    {
      key: 'edit',
      label: 'Edit',
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17v3z" stroke={theme.text} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
      onPress: onEdit,
    },
    {
      key: 'complete',
      label: task.completed ? 'Mark Incomplete' : 'Mark Complete',
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M5 12l5 5 9-10" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
      onPress: onToggleComplete,
    },
    {
      key: 'duplicate',
      label: 'Duplicate',
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M8 8h12v12H8zM4 16V4h12" stroke={theme.text} strokeWidth={2.2} fill="none" /></Svg>,
      onPress: onDuplicate,
    },
  ];

  if (!subtask) {
    actions.push({
      key: 'category',
      label: 'Change Category',
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Circle2 /></Svg>,
      onPress: onChangeCategory ?? (() => {}),
    });
  }

  actions.push(
    {
      key: 'priority',
      label: 'Change Priority',
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M5 3v18M5 5h14l-3 4 3 4H5" stroke={theme.text} strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
      onPress: onChangePriority,
    },
    {
      key: 'delete',
      label: 'Delete',
      destructive: true,
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13" stroke="#E57373" strokeWidth={2.2} strokeLinecap="round" strokeLinejoin="round" fill="none" /></Svg>,
      onPress: onDelete,
    },
  );

  if (subtask && onAddSubtask) {
    actions.push({
      key: 'addSubtask',
      label: 'Add Subtask',
      icon: <Svg width={20} height={20} viewBox="0 0 24 24"><Path d="M12 5v14M5 12h14" stroke={theme.text} strokeWidth={2.5} strokeLinecap="round" /></Svg>,
      onPress: onAddSubtask,
    });
  }

  return (
    <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
      <TouchableOpacity
        style={[styles.overlay, { backgroundColor: theme.overlay }]}
        activeOpacity={1}
        onPress={onClose}
      >
        <View style={[styles.sheet, { backgroundColor: theme.sheetBg }]}>
          <View style={[styles.handle, { backgroundColor: theme.borderStrong }]} />
          <Text style={[styles.title, { color: theme.text }]} numberOfLines={1}>
            {task.title}
          </Text>
          {actions.map((action) => (
            <TouchableOpacity
              key={action.key}
              style={[styles.action, { borderColor: theme.border }]}
              onPress={() => {
                onClose();
                action.onPress();
              }}
              activeOpacity={0.7}
              accessibilityRole="button"
              accessibilityLabel={`${action.label}${action.destructive ? ' (dangerous)' : ''}`}
            >
              {action.icon}
              <Text style={[styles.actionText, action.destructive ? styles.destructiveText : { color: theme.textSecondary }]}>
                {action.label}
              </Text>
            </TouchableOpacity>
          ))}
        </View>
      </TouchableOpacity>
    </Modal>
  );
}

function Circle2() {
  const { theme } = useSettings();
  return (
    <Svg width={20} height={20} viewBox="0 0 24 24">
      <Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" stroke={theme.text} strokeWidth={2.2} fill="none" />
      <Path d="M12 2a10 10 0 0 1 0 20z" fill={theme.text} opacity={0.35} />
    </Svg>
  );
}

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  sheet: {
    borderTopLeftRadius: 24,
    borderTopRightRadius: 24,
    paddingTop: 8,
    paddingHorizontal: 16,
    paddingBottom: 32,
  },
  handle: {
    width: 40,
    height: 4,
    borderRadius: 2,
    alignSelf: 'center',
    marginBottom: 12,
  },
  title: {
    fontSize: 14,
    fontWeight: '600',
    textAlign: 'center',
    marginBottom: 16,
    opacity: 0.8,
  },
  action: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderRadius: 12,
    borderWidth: 1,
    marginBottom: 8,
  },
  actionText: {
    fontSize: 15,
    fontWeight: '500',
  },
  destructiveText: {
    color: '#E53935',
    fontWeight: '600',
  },
});
