import { useState } from 'react';

interface PingModalProps {
  profileName: string;
  availablePings: number;
  sending: boolean;
  onSend: (message: string) => void;
  onClose: () => void;
}

const styles = {
  overlay: {
    position: 'fixed' as const,
    inset: 0,
    zIndex: 60,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '16px',
  },
  backdrop: {
    position: 'absolute' as const,
    inset: 0,
    background: 'rgba(0,0,0,0.9)',
    backdropFilter: 'blur(12px)',
  },
  modal: {
    position: 'relative' as const,
    width: '100%',
    maxWidth: '420px',
    background: '#0f0f13',
    borderRadius: '24px',
    border: '1px solid rgba(255,255,255,0.08)',
    overflow: 'hidden',
    boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.7)',
  },
  header: {
    padding: '24px 24px 16px',
    borderBottom: '1px solid rgba(255,255,255,0.06)',
  },
  title: {
    fontFamily: "'Clash Display', sans-serif",
    fontSize: '24px',
    fontWeight: 700,
    color: '#fff',
    margin: 0,
    marginBottom: '8px',
  },
  subtitle: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '14px',
    color: 'rgba(255,255,255,0.5)',
    margin: 0,
  },
  pingsRemaining: {
    display: 'inline-flex',
    alignItems: 'center',
    gap: '6px',
    padding: '6px 12px',
    borderRadius: '20px',
    background: 'rgba(245,158,11,0.15)',
    color: '#fbbf24',
    fontSize: '13px',
    fontWeight: 600,
    fontFamily: "'Satoshi', sans-serif",
    marginTop: '12px',
  },
  content: {
    padding: '24px',
  },
  label: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '13px',
    fontWeight: 600,
    color: 'rgba(255,255,255,0.6)',
    marginBottom: '8px',
    display: 'block',
  },
  textarea: {
    width: '100%',
    minHeight: '120px',
    padding: '16px',
    borderRadius: '16px',
    border: '1px solid rgba(255,255,255,0.1)',
    background: 'rgba(255,255,255,0.03)',
    color: '#fff',
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '15px',
    lineHeight: 1.6,
    resize: 'vertical' as const,
    outline: 'none',
    transition: 'border-color 200ms ease',
  },
  charCount: {
    fontFamily: "'Satoshi', sans-serif",
    fontSize: '12px',
    color: 'rgba(255,255,255,0.4)',
    textAlign: 'right' as const,
    marginTop: '8px',
  },
  actionBar: {
    padding: '20px 24px',
    borderTop: '1px solid rgba(255,255,255,0.06)',
    display: 'flex',
    gap: '12px',
  },
  button: (variant: 'primary' | 'secondary', disabled: boolean) => ({
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '10px',
    padding: '16px 24px',
    borderRadius: '16px',
    fontSize: '15px',
    fontWeight: 600,
    fontFamily: "'Satoshi', sans-serif",
    border: variant === 'primary' ? 'none' : '1px solid rgba(255,255,255,0.1)',
    background: variant === 'primary'
      ? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
      : 'rgba(255,255,255,0.05)',
    color: variant === 'primary' ? '#000' : '#fff',
    cursor: disabled ? 'not-allowed' : 'pointer',
    transition: 'all 200ms ease',
    boxShadow: variant === 'primary' ? '0 8px 24px rgba(245,158,11,0.4)' : 'none',
    opacity: disabled ? 0.6 : 1,
  }),
  closeButton: {
    position: 'absolute' as const,
    top: '16px',
    right: '16px',
    width: '36px',
    height: '36px',
    borderRadius: '50%',
    background: 'rgba(255,255,255,0.05)',
    border: '1px solid rgba(255,255,255,0.1)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: 'rgba(255,255,255,0.6)',
    cursor: 'pointer',
    transition: 'all 200ms ease',
  },
};

const MAX_MESSAGE_LENGTH = 500;

export function PingModal({ profileName, availablePings, sending, onSend, onClose }: PingModalProps) {
  const [message, setMessage] = useState('');

  const handleSend = () => {
    if (message.trim() && availablePings > 0) {
      onSend(message.trim());
    }
  };

  const canSend = message.trim().length > 0 && availablePings > 0 && !sending;

  return (
    <div style={styles.overlay} onClick={onClose}>
      <div style={styles.backdrop} />

      <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
        {/* Close button */}
        <button
          style={styles.closeButton}
          onClick={onClose}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = 'rgba(255,255,255,0.1)';
            e.currentTarget.style.color = '#fff';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
            e.currentTarget.style.color = 'rgba(255,255,255,0.6)';
          }}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '18px', height: '18px' }}>
            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>

        {/* Header */}
        <div style={styles.header}>
          <h2 style={styles.title}>Send a Ping</h2>
          <p style={styles.subtitle}>
            Skip the queue and message {profileName} directly
          </p>
          <div style={styles.pingsRemaining}>
            <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '16px', height: '16px' }}>
              <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
            </svg>
            {availablePings} ping{availablePings !== 1 ? 's' : ''} available
          </div>
        </div>

        {/* Content */}
        <div style={styles.content}>
          <label style={styles.label}>Your message</label>
          <textarea
            style={styles.textarea}
            value={message}
            onChange={(e) => setMessage(e.target.value.slice(0, MAX_MESSAGE_LENGTH))}
            placeholder="Write something that stands out..."
            onFocus={(e) => e.currentTarget.style.borderColor = 'rgba(245,158,11,0.5)'}
            onBlur={(e) => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)'}
            disabled={sending}
          />
          <p style={styles.charCount}>
            {message.length}/{MAX_MESSAGE_LENGTH}
          </p>
        </div>

        {/* Action Bar */}
        <div style={styles.actionBar}>
          <button
            style={styles.button('secondary', false)}
            onClick={onClose}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
            }}
          >
            Cancel
          </button>
          <button
            style={styles.button('primary', !canSend)}
            onClick={handleSend}
            disabled={!canSend}
            onMouseEnter={(e) => {
              if (canSend) e.currentTarget.style.transform = 'scale(1.02)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'scale(1)';
            }}
          >
            <svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '18px', height: '18px' }}>
              <path d="M3.478 2.404a.75.75 0 0 0-.926.941l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.404Z" />
            </svg>
            {sending ? 'Sending...' : 'Send Ping'}
          </button>
        </div>
      </div>
    </div>
  );
}
