import React, { useState, useEffect } from 'react';
import { createNote } from '../api';
import type { Context } from '../types';

type Props = {
  onClose: () => void;
  onCreate: () => void;
  context?: Context;
};

export function CreateNoteModal({ onClose, onCreate, context }: Props) {
  const [text, setText] = useState('');
  const [creating, setCreating] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    const trimmedText = text.trim();
    
    if (!trimmedText) {
      setError('Please enter some text for your note');
      return;
    }

    try {
      setCreating(true);
      await createNote({
        text: trimmedText,
        context
      });
      setText('');
      onCreate();
      onClose();
    } catch (err) {
      console.error(err);
      const msg = err instanceof Error ? err.message : 'Failed to create note';
      setError(msg);
    } finally {
      setCreating(false);
    }
  }

  // Keyboard shortcut handler
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // Ctrl+Enter or Cmd+Enter to submit
      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
        e.preventDefault();
        const form = document.getElementById('form-create-note') as HTMLFormElement;
        if (form) {
          form.requestSubmit();
        }
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, []);

  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000,
      }}
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
    >
      <div
        style={{
          backgroundColor: 'white',
          borderRadius: '12px',
          width: '90%',
          maxWidth: '600px',
          maxHeight: '90vh',
          display: 'flex',
          flexDirection: 'column',
          overflow: 'hidden',
          boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
        }}
      >
        {/* Modal Header */}
        <div
          style={{
            padding: '20px 24px',
            borderBottom: '1px solid #e8e4df',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            backgroundColor: '#f9f7f4',
          }}
        >
          <h2 style={{ margin: 0, fontSize: '20px', color: '#2d251f' }}>Add Note</h2>
          <button
            type="button"
            onClick={onClose}
            style={{
              border: 'none',
              background: 'none',
              fontSize: '24px',
              cursor: 'pointer',
              color: '#6b5d52',
              padding: '0 8px',
              lineHeight: 1,
            }}
            title="Close"
          >
            ×
          </button>
        </div>

        {/* Modal Body */}
        <div style={{ padding: '24px', overflowY: 'auto' }}>
          <form onSubmit={onSubmit} id="form-create-note">
        <div style={{ marginBottom: 16 }}>
          <label htmlFor="input-note-text" style={{ display: 'block', marginBottom: 8, fontWeight: 500 }}>
            Note Text
          </label>
          <textarea
            id="input-note-text"
            name="text"
            placeholder="Enter your note..."
            required
            value={text}
            onChange={(e) => setText(e.target.value)}
            rows={8}
            style={{ 
              width: '100%', 
              padding: '12px 16px',
              fontSize: '14px',
              lineHeight: '1.6',
              border: '1.5px solid #d4cfc7',
              borderRadius: '8px',
              resize: 'vertical',
              fontFamily: 'inherit',
            }}
            autoFocus
          />
        </div>

        {context && (
          <div style={{ marginTop: 12, padding: '12px', backgroundColor: '#f9f7f4', borderRadius: '8px', fontSize: '13px', color: '#6b5d52' }}>
            <p style={{ margin: '0 0 4px 0' }}><strong>Context:</strong> {context.type}</p>
            <p style={{ margin: 0 }}><strong>ID:</strong> <code style={{ fontSize: '12px', fontFamily: 'monospace' }}>{context.id}</code></p>
          </div>
        )}

        {error && (
          <div style={{ marginTop: 12, padding: '12px', backgroundColor: '#fee', borderRadius: '8px', fontSize: '13px', color: '#c00' }}>
            {error}
          </div>
        )}

        <div style={{ marginTop: 24, display: 'flex', gap: '12px', justifyContent: 'flex-end' }}>
          <button
            id="btn-cancel-create-note"
            type="button"
            onClick={onClose}
            style={{
              padding: '10px 20px',
              border: '1px solid #d4cfc7',
              borderRadius: '8px',
              backgroundColor: 'white',
              color: '#6b5d52',
              cursor: 'pointer',
              fontSize: '14px',
              fontWeight: 500,
            }}
          >
            Cancel
          </button>
          <button
            id="btn-submit-create-note"
            type="submit"
            disabled={creating}
            style={{
              padding: '10px 20px',
              border: 'none',
              borderRadius: '8px',
              backgroundColor: creating ? '#ccc' : '#bc915c',
              color: 'white',
              cursor: creating ? 'not-allowed' : 'pointer',
              fontSize: '14px',
              fontWeight: 500,
            }}
          >
            {creating ? 'Creating...' : 'Create'}
          </button>
        </div>
        <div style={{ fontSize: '12px', color: '#6b5d52', marginTop: '12px', textAlign: 'center' }}>
          Tip: Press Ctrl+Enter (or Cmd+Enter) to create quickly
        </div>
      </form>
        </div>
      </div>
    </div>
  );
}