'use client';

import React from 'react';
import styled from 'styled-components';
import { theme } from '@/styles/theme';

interface ConfirmModalProps {
  title: string;
  message: string;
  confirmLabel?: string;
  danger?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
`;

const Modal = styled.div`
  background: #161b22;
  border: 1px solid ${theme.colors.border};
  border-radius: 12px;
  padding: 28px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
`;

const Title = styled.h2`
  font-size: 16px;
  font-weight: 700;
  color: ${theme.colors.textPrimary};
  margin-bottom: 10px;
`;

const Message = styled.p`
  font-size: 14px;
  color: ${theme.colors.textSecondary};
  line-height: 1.6;
  margin-bottom: 24px;
`;

const Buttons = styled.div`
  display: flex;
  gap: 10px;
  justify-content: flex-end;
`;

const Btn = styled.button<{ $danger?: boolean; $primary?: boolean }>`
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.15s;

  ${({ $danger }) =>
    $danger &&
    `
    background: rgba(255,23,68,0.12);
    border-color: rgba(255,23,68,0.4);
    color: #FF1744;
    &:hover { background: rgba(255,23,68,0.2); }
  `}

  ${({ $primary }) =>
    $primary &&
    `
    background: rgba(88,166,255,0.12);
    border-color: rgba(88,166,255,0.4);
    color: #58A6FF;
    &:hover { background: rgba(88,166,255,0.2); }
  `}

  ${({ $danger, $primary }) =>
    !$danger && !$primary &&
    `
    background: transparent;
    border-color: rgba(240,246,252,0.15);
    color: #8B949E;
    &:hover { background: rgba(240,246,252,0.06); color: #E6EDF3; }
  `}
`;

export default function ConfirmModal({
  title,
  message,
  confirmLabel = '확인',
  danger,
  onConfirm,
  onCancel,
}: ConfirmModalProps) {
  return (
    <Overlay onClick={onCancel}>
      <Modal onClick={(e) => e.stopPropagation()}>
        <Title>{title}</Title>
        <Message>{message}</Message>
        <Buttons>
          <Btn onClick={onCancel}>취소</Btn>
          <Btn $danger={danger} $primary={!danger} onClick={onConfirm}>
            {confirmLabel}
          </Btn>
        </Buttons>
      </Modal>
    </Overlay>
  );
}