TicketForm.jsx

Go to the documentation of this file.

import { useState, useEffect, useRef } from 'react';
import Quill from 'quill';
import { useNavigate, useParams } from 'react-router-dom';
import DOMPurify from 'dompurify';
import { apiFetch } from '../lib/api';
import { notifySuccess, notifyError } from '../utils/notifications';
 
import MainLayout from '../components/Layout/MainLayout';
import AIRewordButton from '../components/AIRewordButton';
import './TicketForm.css';
 
function TicketForm() {
  const navigate = useNavigate();
  const { id } = useParams();
  const quillRef = useRef(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [form, setForm] = useState({
    title: '',
    description: '',
    priority: 'low',
    status: 'open',
    assigned_to: null,
    customer_id: null
  });
 
  // Staff assignment state
  const [assigneeQuery, setAssigneeQuery] = useState('');
  const [assigneeSuggestions, setAssigneeSuggestions] = useState([]);
  const [assigneeName, setAssigneeName] = useState('');
  const [assigneeSelected, setAssigneeSelected] = useState(false);
 
  // Customer selection state
  const [customerQuery, setCustomerQuery] = useState('');
  const [customerSuggestions, setCustomerSuggestions] = useState([]);
  const [customerName, setCustomerName] = useState('');
  const [customerSelected, setCustomerSelected] = useState(false);
 
  // Check if user is root/MSP
  const [isRootUser, setIsRootUser] = useState(false);
  const [tenants, setTenants] = useState([]);
  const [selectedTenantId, setSelectedTenantId] = useState('');
 
  // Time tracking state
  const [timeEntries, setTimeEntries] = useState([]);
  const [newTimeEntry, setNewTimeEntry] = useState({
    description: '',
    duration_minutes: 0,
    billable: true,
    start_time: new Date().toISOString().slice(0, 16),
    end_time: new Date().toISOString().slice(0, 16)
  });
 
  // Notes state
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState({
    content: '',
    is_private: false,
    // Add time tracking fields
    has_time: true,
    start_time: '',
    end_time: '',
    billable: true,
    duration_minutes: 0
  });
 
  // Timer state for quick time tracking
  const [timerRunning, setTimerRunning] = useState(false);
  const [timerStart, setTimerStart] = useState(null);
  const [elapsedSeconds, setElapsedSeconds] = useState(0);
  const [ticketCreatedAt, setTicketCreatedAt] = useState(null);
  const [timeTouched, setTimeTouched] = useState(false);
  // Unsaved prompt state
  const [showUnsavedPrompt, setShowUnsavedPrompt] = useState(false);
  const [pendingAction, setPendingAction] = useState(null); // 'save' | 'navigate' | null
 
  // Helper: detect unsaved note/time or running timer
  const hasUnsavedNoteOrTimer = () => {
    const noteContent = (newNote.content || '').trim();
    const hasNoteText = noteContent.length > 0;
    const hasTimeData = newNote.has_time && (
      // user explicitly entered duration
      (newNote.duration_minutes && newNote.duration_minutes > 0) ||
      // user interacted with time fields AND has both start & end
      (timeTouched && newNote.start_time && newNote.end_time) ||
      // running timer always counts as unsaved
      !!timerRunning
    );
    return hasNoteText || hasTimeData;
  };
 
  // Warn on browser/tab close if there are unsaved notes or running timer (edit mode only)
  useEffect(() => {
    if (!id) return; // only on edit page
    const handleBeforeUnload = (e) => {
      if (hasUnsavedNoteOrTimer()) {
        e.preventDefault();
        e.returnValue = '';
        return '';
      }
      return undefined;
    };
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, [id, newNote, timerRunning]);
 
  // Helper to format datetime-local value
  const formatDateTimeLocal = (d) => {
    const pad = (n) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
  };
 
  // When enabling track time, prefill start & end to now for easy tweaking
  useEffect(() => {
    if (newNote.has_time) {
      const now = new Date();
      const val = formatDateTimeLocal(now);
      setNewNote(n => ({ ...n, start_time: n.start_time || val, end_time: n.end_time || val }));
    }
  }, [newNote.has_time]);
 
  // Tick elapsed timer when running
  useEffect(() => {
    if (!timerRunning) return;
    const iv = setInterval(() => {
      setElapsedSeconds(Math.floor((Date.now() - (timerStart?.getTime() || Date.now())) / 1000));
    }, 1000);
    return () => clearInterval(iv);
  }, [timerRunning, timerStart]);
 
  const handleStartTimer = () => {
    const now = new Date();
    setTimerStart(now);
    setElapsedSeconds(0);
    setTimerRunning(true);
    setTimeTouched(true);
    // ensure time tracking enabled and start time set
    setNewNote(n => ({ ...n, has_time: true, start_time: formatDateTimeLocal(now), end_time: '' }));
  };
 
  const handleStopTimer = () => {
    const now = new Date();
    setTimerRunning(false);
    const secs = Math.max(0, Math.floor((now.getTime() - (timerStart?.getTime() || now.getTime())) / 1000));
    const mins = Math.max(1, Math.round(secs / 60));
    setNewNote(n => ({ ...n, end_time: formatDateTimeLocal(now), duration_minutes: mins }));
  };
 
 
  useEffect(() => {
    if (id) {
      fetchTicketDetails();
    }
    // Check if user is root and fetch tenants
    async function checkRootStatus() {
      try {
        const res = await apiFetch('/tenants', { method: 'GET', credentials: 'include' });
        if (res.ok) {
          setIsRootUser(true);
          const data = await res.json();
          setTenants(data.tenants || []);
        } else {
          setIsRootUser(false);
        }
      } catch (err) {
        setIsRootUser(false);
      }
    }
    checkRootStatus();
  }, [id]);
 
  const fetchTicketDetails = async () => {
    try {
      const res = await apiFetch(`/tickets/${id}`, { method: 'GET', credentials: 'include' });
      if (!res.ok) throw new Error('Failed to load ticket');
      const data = await res.json();
 
      // Auto-select the tenant if the ticket belongs to a different tenant
      if (data.ticket.tenant_id && !selectedTenantId) {
        setSelectedTenantId(String(data.ticket.tenant_id));
      }
 
      setForm({
        title: data.ticket.title,
        description: data.ticket.description,
        priority: data.ticket.priority,
        status: data.ticket.status,
        assigned_to: data.ticket.assigned_to,
        customer_id: data.ticket.customer_id
      });
      setTicketCreatedAt(data.ticket.created_at || null);
 
      if (data.ticket.assigned_to_name) {
        setAssigneeQuery(data.ticket.assigned_to_name);
        setAssigneeName(data.ticket.assigned_to_name);
        setAssigneeSelected(true);
      }
 
      if (data.ticket.customer_name) {
        setCustomerQuery(data.ticket.customer_name);
        setCustomerName(data.ticket.customer_name);
        setCustomerSelected(true);
      }
 
      if (quillRef.current) {
        quillRef.current.root.innerHTML = data.ticket.description || '';
      }
 
      setNotes(data.notes || []);
      setTimeEntries(data.timeEntries || []);
    } catch (err) {
      console.error(err);
      setError('Failed to load ticket details');
    }
  };
 
  // Reload only time entries without disturbing the main form
  const loadTimeEntries = async () => {
    if (!id) return;
    try {
      const res = await apiFetch(`/tickets/${id}`, { method: 'GET', credentials: 'include' });
      if (!res.ok) return;
      const data = await res.json();
      setTimeEntries(data.timeEntries || []);
      setNotes(data.notes || []);
    } catch (err) {
      // Non-fatal; keep existing time entries
      console.error(err);
    }
  };
 
  // initialize quill for ticket description
  useEffect(() => {
    if (!quillRef.current) {
      const container = document.querySelector('#quill-editor-ticket');
      if (container) {
        quillRef.current = new Quill(container, { theme: 'snow' });
        // Make read-only if editing existing ticket
        if (id) {
          quillRef.current.enable(false);
        } else {
          quillRef.current.on('text-change', () => {
            setForm(f => ({ ...f, description: quillRef.current.root.innerHTML }));
          });
        }
      }
    }
  }, [id]);
 
  // debounced assignee search
  useEffect(() => {
    // Don't search if user has selected something
    if (assigneeSelected) return;
 
    const ac = setTimeout(async () => {
      if (!assigneeQuery || !assigneeQuery.trim()) {
        setAssigneeSuggestions([]);
        return;
      }
      try {
        const res = await apiFetch(`/users?search=${encodeURIComponent(assigneeQuery)}`, { method: 'GET', credentials: 'include' });
        if (!res.ok) return;
        const list = await res.json();
        setAssigneeSuggestions(list);
      } catch (err) { console.error(err); }
    }, 300);
    return () => clearTimeout(ac);
  }, [assigneeQuery, assigneeSelected, isRootUser, selectedTenantId, tenants]);
 
  useEffect(() => {
    if (assigneeName) {
      // find selected suggestion to set assigned_to
      const found = assigneeSuggestions.find(s => s.name === assigneeName);
      if (found) setForm(f => ({ ...f, assigned_to: found.user_id }));
    }
  }, [assigneeName, assigneeSuggestions]);
 
  // Add note handler
  const handleAddNote = async (e) => {
    e.preventDefault();
    if (!newNote.content) return;
 
    // If time tracking is included, validate inputs (allow either start/end or duration)
    if (newNote.has_time) {
      const hasRange = newNote.start_time && newNote.end_time;
      const hasDuration = newNote.duration_minutes && newNote.duration_minutes > 0;
      if (!hasRange && !hasDuration) {
        setError('Please provide a start/end time or enter duration (minutes).');
        return;
      }
    }
 
    try {
      const notePayload = {
        content: newNote.content,
        is_private: newNote.is_private
      };
      if (newNote.has_time) {
        notePayload.billable = newNote.billable;
        if (newNote.duration_minutes && newNote.duration_minutes > 0) {
          notePayload.duration_minutes = newNote.duration_minutes;
          if (newNote.end_time) notePayload.end_time = newNote.end_time;
        } else {
          notePayload.start_time = newNote.start_time;
          notePayload.end_time = newNote.end_time;
        }
      }
      const res = await apiFetch(`/tickets/${id}/notes`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(notePayload)
      });
      if (!res.ok) throw new Error('Failed to add note');
      const note = await res.json();
      setNotes([note, ...notes]);
      setNewNote({
        content: '',
        is_private: false,
        has_time: true,
        start_time: '',
        end_time: '',
        billable: true,
        duration_minutes: 0
      });
      if (newNote.has_time) {
        loadTimeEntries();
      }
    } catch (err) {
      console.error(err);
      setError('Failed to add note');
    }
  };
 
  // Add time entry handler
  const handleAddTime = async (e) => {
    e.preventDefault();
    if (!newTimeEntry.description || !newTimeEntry.start_time) return;
    try {
      const res = await apiFetch(`/tickets/${id}/time`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(newTimeEntry)
      });
      if (!res.ok) throw new Error('Failed to add time entry');
      const entry = await res.json();
      setTimeEntries([entry, ...timeEntries]);
      setNewTimeEntry({
        description: '',
        duration_minutes: 0,
        billable: true,
        start_time: new Date().toISOString().slice(0, 16),
        end_time: new Date().toISOString().slice(0, 16)
      });
    } catch (err) {
      console.error(err);
      setError('Failed to add time entry');
    }
  };
 
  // Search for customers
  useEffect(() => {
    // Don't search if user has selected something
    if (customerSelected) return;
 
    const searchCustomers = async () => {
      if (!customerQuery || !customerQuery.trim()) {
        setCustomerSuggestions([]);
        return;
      }
      try {
        const res = await apiFetch(`/customers?search=${encodeURIComponent(customerQuery)}`, { method: 'GET', credentials: 'include' });
        if (!res.ok) return;
        const data = await res.json();
        setCustomerSuggestions(data.customers || []);
      } catch (err) { console.error(err); }
    };
    const timer = setTimeout(searchCustomers, 300);
    return () => clearTimeout(timer);
  }, [customerQuery, customerSelected, isRootUser, selectedTenantId, tenants]);
 
  const performSave = async () => {
    setLoading(true);
    setError('');
    try {
      const res = await apiFetch(`/tickets${id ? `/${id}` : ''}`, {
        method: id ? 'PUT' : 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'include',
        body: JSON.stringify(form)
      });
      if (!res.ok) {
        const errorData = await res.json().catch(() => ({}));
        const errorMsg = errorData.error || `Failed to ${id ? 'update' : 'create'} ticket`;
        await notifyError(id ? 'Update Failed' : 'Create Failed', errorMsg);
        throw new Error(errorMsg);
      }
      await notifySuccess(id ? 'Ticket Updated' : 'Ticket Created', `Ticket has been ${id ? 'updated' : 'created'} successfully`);
      navigate('/tickets');
    } catch (err) {
      setError(err.message || 'Failed to save ticket');
    } finally {
      setLoading(false);
    }
  };
 
  const handleSubmit = async (e) => {
    e.preventDefault();
 
    // For new tickets, require title and description
    if (!id && (!form.title || !form.description)) {
      setError('Please fill in title and description');
      return;
    }
 
    // For both new and existing tickets, require customer
    if (!form.customer_id) {
      setError('Please select a customer from the dropdown');
      return;
    }
 
    if (id && hasUnsavedNoteOrTimer()) {
      setPendingAction('save');
      setShowUnsavedPrompt(true);
      return;
    }
 
    await performSave();
  };
 
  const handleNavigateBack = () => {
    if (id && hasUnsavedNoteOrTimer()) {
      setPendingAction('navigate');
      setShowUnsavedPrompt(true);
      return;
    }
    navigate('/tickets');
  };
 
  return (
    <MainLayout>
      <div className="page-content">
        <div className="page-header">
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>
            <h2>{id ? 'Edit Ticket' : 'Create Ticket'}</h2>
            {id && <h3 className="ticket-subject" style={{ flex: 1, textAlign: 'center', margin: '0 2rem' }}>{form.title}</h3>}
            {id && (
              <button
                type="button"
                className="btn"
                onClick={handleNavigateBack}
              >
                <span className="material-symbols-outlined">arrow_back</span> Back to Tickets
              </button>
            )}
          </div>
        </div>
 
        {error && <div className="error-message">{error}</div>}
 
        {showUnsavedPrompt && (
          <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}>
            <div style={{ background: '#fff', padding: '1.25rem', borderRadius: 8, maxWidth: 480, width: '90%', boxShadow: '0 10px 24px rgba(0,0,0,0.2)' }}>
              <h3 style={{ marginTop: 0 }}>Unsaved note or timer</h3>
              <p style={{ margin: '0.5rem 0 1rem' }}>Do you have any unsaved notes you need to add?</p>
              <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
                <button className="btn" onClick={() => { // Proceed
                  setShowUnsavedPrompt(false);
                  const action = pendingAction;
                  setPendingAction(null);
                  if (action === 'save') {
                    performSave();
                  } else if (action === 'navigate') {
                    navigate('/tickets');
                  }
                }}>Proceed</button>
                <button className="btn primary" onClick={() => { // Go Back
                  setShowUnsavedPrompt(false);
                  setPendingAction(null);
                }}>Go Back</button>
              </div>
            </div>
          </div>
        )}
 
        {isRootUser && (
          <div className="form-section" style={{ marginBottom: '1.5rem', backgroundColor: '#f8f9fa', padding: '1rem', borderRadius: '8px', border: '2px solid #dee2e6' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#6c757d', fontWeight: 500 }}>
                <span className="material-symbols-outlined" style={{ fontSize: '20px' }}>admin_panel_settings</span>
                <span>Root Tenant Control:</span>
              </div>
              <div style={{ flex: '1', minWidth: '250px', maxWidth: '400px' }}>
                <select
                  value={selectedTenantId}
                  onChange={(e) => {
                    setSelectedTenantId(e.target.value);
                    // Clear customer selection when tenant changes
                    setCustomerQuery('');
                    setCustomerName('');
                    setCustomerSelected(false);
                    setCustomerSuggestions([]);
                    setForm(f => ({ ...f, customer_id: null }));
                    // Clear assignee selection when tenant changes
                    setAssigneeQuery('');
                    setAssigneeName('');
                    setAssigneeSelected(false);
                    setAssigneeSuggestions([]);
                    setForm(f => ({ ...f, assigned_to: null }));
                  }}
                  style={{ width: '100%', padding: '0.5rem', borderRadius: '4px', border: '1px solid #ced4da' }}
                >
                  <option value="">Root Tenant (Admin)</option>
                  {tenants.map(t => (
                    <option key={t.tenant_id} value={t.tenant_id}>
                      {t.name}
                    </option>
                  ))}
                </select>
              </div>
              <small style={{ color: '#6c757d', flex: '1 1 100%', marginTop: '0.25rem' }}>
                Creating ticket on behalf of: <strong>{selectedTenantId ? tenants.find(t => t.tenant_id === parseInt(selectedTenantId))?.name : 'Root Tenant (Admin)'}</strong>. Staff and customers will be searched within the selected tenant.
              </small>
            </div>
          </div>
        )}
 
        <div className={`ticket-form-grid ${!id ? 'create-mode' : ''}`}>
          <div className="ticket-main">
            {/* Description field with AI reword button */}
            <div className="form-section">
              <label htmlFor="description">Description</label>
              <div style={{ position: 'relative' }}>
                <textarea
                  id="description"
                  value={form.description}
                  onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
                  placeholder="Describe the issue or request..."
                  rows={5}
                  style={{ width: '100%', paddingRight: 40 }}
                />
                <AIRewordButton
                  value={form.description}
                  onReword={reworded => setForm(f => ({ ...f, description: reworded }))}
                  disabled={!form.description}
                  style={{ position: 'absolute', right: 8, top: 8 }}
                />
              </div>
            </div>
            {/* End description field */}
            {id && (
              <div className="form-section">
                <h3>Notes & Time Tracking</h3>
                <form onSubmit={handleAddNote} className="note-form">
 
                  <div style={{ position: 'relative' }}>
                    <textarea
                      value={newNote.content}
                      onChange={e => setNewNote({ ...newNote, content: e.target.value })}
                      placeholder="Add a note..."
                      rows={3}
                      style={{ width: '100%', paddingRight: 40 }}
                    />
                    <AIRewordButton
                      value={newNote.content}
                      onReword={reworded => setNewNote({ ...newNote, content: reworded })}
                      disabled={!newNote.content}
                      style={{ position: 'absolute', right: 8, top: 8 }}
                    />
                  </div>
 
                  <div className="note-form-options">
                    <label>
                      <input
                        type="checkbox"
                        checked={newNote.is_private}
                        onChange={e => setNewNote({ ...newNote, is_private: e.target.checked })}
                      />
                      Private Note
                    </label>
 
                    <label>
                      <input
                        type="checkbox"
                        checked={newNote.has_time}
                        onChange={e => setNewNote({ ...newNote, has_time: e.target.checked })}
                      />
                      Track Time
                    </label>
                  </div>
 
                  {newNote.has_time && (
                    <div className="time-tracking-fields">
                      <div className="timer-bar">
                        <button
                          type="button"
                          className={`btn ${timerRunning ? 'danger' : 'primary'}`}
                          onClick={timerRunning ? handleStopTimer : handleStartTimer}
                        >
                          <span className="material-symbols-outlined">{timerRunning ? 'stop_circle' : 'play_circle'}</span>
                          {timerRunning ? 'Stop Timer' : 'Start Timer'}
                        </button>
                        <div className="timer-display">
                          <span className="material-symbols-outlined">timer</span>
                          {Math.floor(elapsedSeconds / 3600).toString().padStart(2, '0')}
                          :{Math.floor((elapsedSeconds % 3600) / 60).toString().padStart(2, '0')}
                          :{(elapsedSeconds % 60).toString().padStart(2, '0')}
                        </div>
                      </div>
 
                      <div className="form-row">
                        <div className="form-field">
                          <label>Start Time</label>
                          <input
                            type="datetime-local"
                            value={newNote.start_time}
                            onChange={e => { setTimeTouched(true); setNewNote({ ...newNote, start_time: e.target.value }); }}
                            placeholder="YYYY-MM-DDTHH:mm"
                          />
                        </div>
                        <div className="form-field">
                          <label>End Time</label>
                          <input
                            type="datetime-local"
                            value={newNote.end_time}
                            onChange={e => { setTimeTouched(true); setNewNote({ ...newNote, end_time: e.target.value }); }}
                            placeholder="YYYY-MM-DDTHH:mm"
                          />
                        </div>
                        <div className="form-field">
                          <label>Duration (minutes)</label>
                          <input
                            type="number"
                            min="0"
                            value={newNote.duration_minutes || 0}
                            onChange={e => { setTimeTouched(true); setNewNote({ ...newNote, duration_minutes: parseInt(e.target.value || '0', 10) }); }}
                          />
                        </div>
                        <div className="form-field">
                          <label>
                            <input
                              type="checkbox"
                              checked={newNote.billable}
                              onChange={e => setNewNote({ ...newNote, billable: e.target.checked })}
                            />
                            Billable
                          </label>
                        </div>
                      </div>
                      <div className="hint">Provide start/end or just enter the duration. If only duration is set, we'll use now as the end time.</div>
                    </div>
                  )}
 
                  <div className="note-form-actions">
                    <button type="submit" className="btn primary">Add Note</button>
                  </div>
                </form>
 
                <div className="notes-list">
                  {[
                    ...(id && form.description ? [{ type: 'description', date: ticketCreatedAt ? new Date(ticketCreatedAt) : new Date(0), content: form.description }] : []),
                    ...notes.map(n => ({ ...n, type: n.is_ai ? 'ai' : 'note', date: new Date(n.created_at) })),
                    ...timeEntries.map(t => ({ ...t, type: 'time', date: new Date(t.start_time) }))
                  ]
                    .sort((a, b) => b.date - a.date)
                    .map(item => {
                      if (item.type === 'note') {
                        return (
                          <div key={`note-${item.note_id}`} className={`note ${item.is_private ? 'private' : ''}`}>
                            <div className="note-header">
                              <span>{item.author_name}</span>
                              <span className="subtle">
                                {item.date.toLocaleString()}
                                {item.is_private && ' (Private)'}
                              </span>
                            </div>
                            <div className="note-content">{item.content}</div>
                          </div>
                        );
                      } else if (item.type === 'ai') {
                        return (
                          <div key={`ai-note-${item.note_id}`} className="note ai-note" style={{ borderLeft: '4px solid #4b8cff', background: '#f4f8ff' }}>
                            <div className="note-header">
                              <span style={{ color: '#4b8cff', fontWeight: 600 }}>AI Assistant</span>
                              <span className="subtle">{item.date.toLocaleString()}</span>
                            </div>
                            <div className="note-content">{item.content}</div>
                          </div>
                        );
                      } else if (item.type === 'time') {
                        return (
                          <div key={`time-${item.entry_id}`} className="time-entry">
                            <div className="time-entry-header">
                              <span>{item.user_name} - Time Entry</span>
                              <span className={item.billable ? 'billable' : ''}>
                                {item.duration_minutes} minutes
                                {item.billable && ' (Billable)'}
                              </span>
                            </div>
                            <div className="note-content">{item.description}</div>
                            <div className="subtle">
                              {item.date.toLocaleString()} - {new Date(item.end_time).toLocaleString()}
                            </div>
                          </div>
                        );
                      } else if (item.type === 'description') {
                        return (
                          <div key="ticket-description" className="note">
                            <div className="note-header">
                              <span>Initial Description</span>
                              {item.date && (
                                <span className="subtle">{item.date.toLocaleString()}</span>
                              )}
                            </div>
                            <div
                              className="note-content"
                              dangerouslySetInnerHTML={{
                                __html: DOMPurify.sanitize(item.content, {
                                  ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'u', 'ul', 'ol', 'li', 'a', 'h1', 'h2', 'h3', 'h4', 'blockquote', 'code', 'pre'],
                                  ALLOWED_ATTR: ['href', 'target', 'class'],
                                  ALLOW_DATA_ATTR: false
                                })
                              }}
                            />
                          </div>
                        );
                      }
                      return null;
                    })}
                </div>
              </div>
            )}
          </div>
 
          <div className="ticket-side">
            <form onSubmit={handleSubmit}>
              <div className="form-section">
                <h3>Ticket Details</h3>
                {!id && (
                  <input
                    placeholder="Title"
                    value={form.title}
                    onChange={(e) => setForm({ ...form, title: e.target.value })}
                    required
                    className="full-width"
                  />
                )}
 
                <div className="form-row">
                  <div className="form-field">
                    <label>Status</label>
                    <select value={form.status} onChange={(e) => setForm({ ...form, status: e.target.value })}>
                      <option value="open">Open</option>
                      <option value="in_progress">In Progress</option>
                      <option value="pending">Pending</option>
                      <option value="resolved">Resolved</option>
                      <option value="closed">Closed</option>
                    </select>
                  </div>
                  <div className="form-field">
                    <label>Priority</label>
                    <select value={form.priority} onChange={(e) => setForm({ ...form, priority: e.target.value })}>
                      <option value="low">Low</option>
                      <option value="medium">Medium</option>
                      <option value="high">High</option>
                    </select>
                  </div>
                </div>
 
                <div className="form-field">
                  <label>Assigned To</label>
                  <div className="search-input">
                    <input
                      placeholder="Search staff by name"
                      value={assigneeQuery}
                      onChange={(e) => {
                        setAssigneeQuery(e.target.value);
                        setAssigneeName('');
                        setAssigneeSelected(false);
                      }}
                    />
                    {assigneeSuggestions.length > 0 && !assigneeSelected && (
                      <div className="suggestions-dropdown">
                        {assigneeSuggestions.map(s => (
                          <div
                            key={s.user_id}
                            className="suggestion-item"
                            onClick={() => {
                              setAssigneeName(s.name);
                              setAssigneeQuery(s.name);
                              setAssigneeSuggestions([]);
                              setAssigneeSelected(true);
                              setForm(f => ({ ...f, assigned_to: s.user_id }));
                            }}
                          >
                            {s.name} <span className="subtle">({s.email})</span>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                </div>
 
                <div className="form-row">
                  <div className="form-field">
                    <label>Customer *</label>
                    <div className="search-input">
                      <input
                        placeholder="Search and select a customer"
                        value={customerQuery}
                        onChange={(e) => {
                          setCustomerQuery(e.target.value);
                          setCustomerName('');
                          setCustomerSelected(false);
                          setForm(f => ({ ...f, customer_id: null }));
                        }}
                        style={!customerSelected && customerQuery ? { borderColor: '#f0ad4e' } : {}}
                      />
                      {customerSuggestions.length > 0 && !customerSelected && (
                        <div className="suggestions-dropdown">
                          {customerSuggestions.map(c => (
                            <div
                              key={c.customer_id}
                              className="suggestion-item"
                              onClick={() => {
                                setCustomerName(c.name);
                                setCustomerQuery(c.name);
                                setCustomerSuggestions([]);
                                setCustomerSelected(true);
                                setForm(f => ({ ...f, customer_id: c.customer_id }));
                              }}
                            >
                              {c.name} <span className="subtle">({c.email || 'No email'})</span>
                            </div>
                          ))}
                        </div>
                      )}
                      {!customerSelected && customerQuery && (
                        <small style={{ display: 'block', marginTop: '4px', color: '#f0ad4e' }}>
                          Please select a customer from the dropdown
                        </small>
                      )}
                    </div>
                  </div>
                </div>
 
                {!id && (
                  <>
                    <label>Description</label>
                    <div id="quill-editor-ticket" style={{ minHeight: 160, marginBottom: 12 }} />
                  </>
                )}
              </div>
 
              <div className="form-actions">
                <button type="submit" disabled={loading} className="btn primary">
                  {loading ? 'Saving...' : (
                    <>
                      <span className="material-symbols-outlined">save</span>
                      {id ? 'Save Changes' : 'Create Ticket'}
                    </>
                  )}
                </button>
                <button type="button" className="btn" onClick={handleNavigateBack}>
                  <span className="material-symbols-outlined">close</span> Cancel
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </MainLayout>
  );
}
 
export default TicketForm;