// DailyNotes.jsx — freeform per-day ops log (Admin + Operation only)
// Direct port of AppSheet "Notes" view: one note per day, used for standup/handover

function DailyNotesPage({ role }) {
  const [notes, setNotes] = React.useState(DAILY_NOTES);
  const [editing, setEditing] = React.useState(null);
  const [draft, setDraft] = React.useState('');
  const [adding, setAdding] = React.useState(false);
  const [newDate, setNewDate] = React.useState(TODAY);
  const [newText, setNewText] = React.useState('');

  const startEdit = (n) => { setEditing(n.date); setDraft(n.text); };
  const saveEdit = () => {
    setNotes(notes.map(n => n.date === editing ? { ...n, text: draft } : n));
    setEditing(null);
  };
  const addNote = () => {
    if (!newText.trim()) return;
    setNotes([{ date: newDate, author: 'You', text: newText.trim() }, ...notes.filter(n => n.date !== newDate)]);
    setAdding(false); setNewText(''); setNewDate(TODAY);
  };

  return (
    <div className="page">
      <div className="note-banner">
        <Lock size={16} style={{color: 'var(--color-navy)'}}/>
        <div>
          <strong>Restricted:</strong> Daily Notes are visible to <strong>Admin</strong> and <strong>Operation</strong> only.
          Operators, riggers, mechanics, finance and management cannot see this page. Use this for sensitive ops context — staff absences, customer disputes, internal reroutes.
        </div>
      </div>

      <div className="page-actions" style={{marginBottom: 16}}>
        <div style={{fontSize: 13, color: 'var(--color-grey-600)'}}>
          {notes.length} note{notes.length === 1 ? '' : 's'} · ordered newest first
        </div>
        <button className="btn btn--primary" onClick={() => setAdding(true)}>
          <Plus size={16}/> Add today's note
        </button>
      </div>

      {adding ? (
        <div className="note-card" style={{borderColor: 'var(--color-navy)', borderStyle: 'solid', borderWidth: 2}}>
          <div className="note-card__date">
            <input type="date" value={newDate} onChange={e => setNewDate(e.target.value)} className="input" style={{maxWidth: 180}}/>
          </div>
          <textarea
            className="note-card__body--editable"
            placeholder="What happened today? E.g. 'Ahmad absent until 9.30am — Irwan to ride 6382. JKR officer at Medini from 9am. Diesel surcharge bumped to 0.45/L.'"
            value={newText}
            onChange={e => setNewText(e.target.value)}
            autoFocus
          />
          <div style={{display: 'flex', gap: 8, marginTop: 12, justifyContent: 'flex-end'}}>
            <button className="btn btn--ghost" onClick={() => { setAdding(false); setNewText(''); }}>Cancel</button>
            <button className="btn btn--primary" onClick={addNote}>Save Note</button>
          </div>
        </div>
      ) : null}

      {notes.map(n => (
        <div key={n.date} className="note-card">
          <div style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8}}>
            <div className="note-card__date">
              <span className="note-card__date-pill">{fmtDateLong(n.date)}</span>
              {n.date === TODAY ? <span style={{fontSize: 11, color: 'var(--color-grey-600)', fontWeight: 600}}>· today</span> : null}
            </div>
            {editing !== n.date ? (
              <button className="btn btn--ghost" onClick={() => startEdit(n)} style={{fontSize: 12, padding: '4px 10px'}}>
                <Edit size={12}/> Edit
              </button>
            ) : null}
          </div>
          <div className="note-card__author">By {n.author}</div>
          {editing === n.date ? (
            <>
              <textarea
                className="note-card__body--editable"
                value={draft}
                onChange={e => setDraft(e.target.value)}
                autoFocus
              />
              <div style={{display: 'flex', gap: 8, marginTop: 12, justifyContent: 'flex-end'}}>
                <button className="btn btn--ghost" onClick={() => setEditing(null)}>Cancel</button>
                <button className="btn btn--primary" onClick={saveEdit}>Save</button>
              </div>
            </>
          ) : (
            <div className="note-card__body">{n.text}</div>
          )}
        </div>
      ))}
    </div>
  );
}

Object.assign(window, { DailyNotesPage });