import React, { useState, useEffect } from 'react';
import type { Note } from '../types';
import { updateNote, deleteNote } from '../api';

type Props = {
  note: Note | null;
  onUpdated: () => void;
  onDeleted: () => void;
  onShowToast: (message: string) => void;
  contextChain?: any[];
  hideEmbedded?: boolean;
};

export function NoteDetailView({
  note,
  onUpdated,
  onDeleted,
  onShowToast,
  contextChain,
  hideEmbedded = false,
}: Props) {
  const [deleting, setDeleting] = useState(false);
  const [editedText, setEditedText] = useState('');
  const [saving, setSaving] = useState(false);
  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  // Update local state when note changes
  useEffect(() => {
    if (note) {
      setEditedText(note.text);
      setHasUnsavedChanges(false);
    }
  }, [note?.id]); // Only update when note ID changes

  const handleTextChange = (newText: string) => {
    setEditedText(newText);
    setHasUnsavedChanges(note ? newText !== note.text : false);
  };

  const handleSave = async () => {
    if (!note) return;
    const trimmed = editedText.trim();
    if (!trimmed) {
      onShowToast('Note text cannot be empty');
      return;
    }
    if (trimmed === note.text) {
      setHasUnsavedChanges(false);
      return;
    }

    setSaving(true);
    try {
      await updateNote(note.id, { text: trimmed });
      setHasUnsavedChanges(false);
      onUpdated();
      onShowToast('Note saved');
    } catch (err) {
      console.error(err);
      onShowToast('Failed to save note');
    } finally {
      setSaving(false);
    }
  };

  const handleDeleteClick = () => {
    setShowDeleteConfirm(true);
  };

  const handleConfirmDelete = async () => {
    if (!note) return;
    setShowDeleteConfirm(false);
    setDeleting(true);
    try {
      await deleteNote(note.id);
      onShowToast('Deleted');
      onDeleted();
    } catch (err) {
      console.error(err);
      onShowToast('Failed to delete note');
    } finally {
      setDeleting(false);
    }
  };

  // Auto-save on keyboard shortcut
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        if (hasUnsavedChanges && note) {
          handleSave();
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [hasUnsavedChanges, editedText, note]);

  if (!note) {
    return (
      <div id="note-detail-view" style={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '48px',
        backgroundColor: '#fefdfb',
      }}>
        <div style={{
          textAlign: 'center',
          color: '#8a7c6f',
        }}>
          <div style={{ fontSize: '48px', marginBottom: '16px' }}>📝</div>
          <h2 style={{ marginBottom: '8px', color: '#6b5d52' }}>No Note Selected</h2>
          <p>Select a note from the sidebar to view its details</p>
        </div>
      </div>
    );
  }

  return (
      <div id="note-detail-view" style={{
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        height: '100%',
        backgroundColor: '#fefdfb',
      }}>
        {/* Header */}
        <div style={{
          padding: '24px 32px',
          borderBottom: '1px solid #e8e4df',
          backgroundColor: '#fefdfb',
        }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}>
            <h1 style={{
              margin: 0,
              fontSize: '28px',
              fontWeight: 600,
              color: '#2d251f',
            }}>
              Note
            </h1>
            
            <div style={{ display: 'flex', gap: '8px' }}>
              {hasUnsavedChanges && (
                <button
                  id="btn-save-note"
                  type="button"
                  className="btn primary"
                  onClick={handleSave}
                  disabled={saving}
                  style={{ padding: '12px 24px' }}
                >
                  {saving ? 'Saving...' : 'Save'}
                </button>
              )}
              <button
                id="btn-delete-note"
                type="button"
                className="btn danger"
                onClick={handleDeleteClick}
                disabled={deleting}
                style={{ padding: '12px 16px' }}
              >
                {deleting ? 'Deleting...' : 'Delete'}
              </button>
            </div>
          </div>
        </div>

        {/* Content Area */}
        <div style={{
          flex: 1,
          overflowY: 'auto',
          padding: '24px 32px',
          maxWidth: '100%',
        }}>
          {/* Note Editor */}
          <textarea
            id="input-note-text"
            value={editedText}
            onChange={(e) => handleTextChange(e.target.value)}
            placeholder="Write your note here..."
            style={{
              width: '100%',
              minHeight: '300px',
              padding: '16px',
              fontSize: '16px',
              lineHeight: '1.6',
              border: '1.5px solid #d4cfc7',
              borderRadius: '8px',
              resize: 'vertical',
              fontFamily: 'inherit',
              backgroundColor: '#ffffff',
            }}
          />

          {hasUnsavedChanges && (
            <div style={{
              marginTop: '12px',
              fontSize: '14px',
              color: '#8a7c6f',
              fontStyle: 'italic',
            }}>
              Unsaved changes (Press Ctrl+S or Cmd+S to save)
            </div>
          )}

          {/* Embedded Modules intentionally removed for simplified notes-only app */}
      </div>

      {/* Delete Confirmation Modal */}
      {showDeleteConfirm && (
        <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) setShowDeleteConfirm(false); }}
        >
          <div
          style={{
            backgroundColor: 'white',
            borderRadius: '12px',
            width: '90%',
            maxWidth: '450px',
            overflow: 'hidden',
            boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
          }}
        >
            <div
              style={{
                padding: '20px 24px',
                borderBottom: '1px solid #e8e4df',
                backgroundColor: '#f9f7f4',
              }}
            >
              <h2 style={{ margin: 0, fontSize: '18px', color: '#2d251f' }}>Delete Note</h2>
            </div>
            <div style={{ padding: '20px 24px' }}>
              <p style={{ margin: 0, fontSize: '14px', lineHeight: '1.5', color: '#3c3530' }}>
                Are you sure you want to delete this note? This action cannot be undone.
              </p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 12, padding: '12px 24px 20px' }}>
              <button
                type="button"
                onClick={() => setShowDeleteConfirm(false)}
                style={{
                  padding: '10px 20px',
                  border: '1px solid #d4cfc7',
                  borderRadius: '8px',
                  backgroundColor: 'white',
                  color: '#6b5d52',
                  cursor: 'pointer',
                  fontSize: '14px',
                  fontWeight: 500,
                }}
              >
                Cancel
              </button>
              <button
                type="button"
                onClick={handleConfirmDelete}
                style={{
                  padding: '10px 20px',
                  border: 'none',
                  borderRadius: '8px',
                  backgroundColor: '#d32f2f',
                  color: 'white',
                  cursor: 'pointer',
                  fontSize: '14px',
                  fontWeight: 500,
                }}
              >
                Delete
              </button>
            </div>
          </div>
        </div>
      )}
      </div>
  );
}