import React from 'react';
import type { Note, Context } from '../types';
import { NoteDetailView } from './NoteDetailView';

type Props = {
  item: Note;
  onClose: () => void;
  onUpdated: () => void;
  onDeleted: () => void;
  onShowToast: (message: string) => void;
  contextChain?: Context[];
  hideEmbedded?: boolean;
};

export function NoteDetailModal({
  item,
  onClose,
  onUpdated,
  onDeleted,
  onShowToast,
  contextChain,
  hideEmbedded = false,
}: Props) {
  const handleDeleted = () => {
    onDeleted();
    onClose();
  };

  return (
    <>
      <div style={{
        padding: '20px 24px',
        borderBottom: '1px solid #e8e4df',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#f9f7f4',
        flexShrink: 0,
      }}>
        <h2 style={{ margin: 0, fontSize: '20px', color: '#2d251f' }}>Note Details</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>

      <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
        <div style={{ height: '100%' }}>
          <NoteDetailView
            note={item}
            onUpdated={onUpdated}
            onDeleted={handleDeleted}
            onShowToast={onShowToast}
            contextChain={contextChain}
            hideEmbedded={hideEmbedded}
          />
        </div>
      </div>
    </>
  );
}