components/memos/MemoDetail.jsx

import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import toast from 'react-hot-toast';
import { useAuth } from '../../hooks/useAuth';
import Modal from '../ui/Modal';
import MemoEditForm from './MemoEditForm';
import MemoInfo from './MemoInfo';
import MemoTimeline from './MemoTimeline';
import WorkerStatus from './WorkerStatus';
// import MemoApprovals from './MemoApprovals'; // Assuming you might add approvals later
import BackButton from './BackButton';

/**
 * Renders the detail view for a specific memo.
 * Fetches and displays memo information, timeline, and worker status.
 * Allows memo creators to edit the memo.
 *
 * @component
 * @returns {JSX.Element} The MemoDetail component.
 */
const MemoDetail = () => {
  const { memoId } = useParams();
  const { apiService, hospital, user } = useAuth();
  const hospitalId = hospital?.id || localStorage.getItem('hospitalId');
  const [memo, setMemo] = useState(null);
  const [editOpen, setEditOpen] = useState(false);
  const [loading, setLoading] = useState(true);

  const fetchMemo = async () => {
    /**
 * Fetches the memo details from the API.
 * Updates the component state with the fetched memo data.
     */
    try {
      const data = await apiService.getMemo(hospitalId, memoId);
      console.log(data);
      setMemo(data);
    } catch (err) {
      console.error(err);
      toast.error('Failed to fetch memo');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchMemo();
  }, [apiService, hospitalId, memoId]);

  if (loading) return <div className="p-6">Loading...</div>;
  if (!memo) return <div className="p-6">Memo not found</div>;

  let info = memo.info || {};
  if (user.is_creator || user.is_approver || user.is_staff){
    info  = { ...info, attendee_otp: memo.attendee_otp, completion_otp: memo.completion_otp };
  }
  const hierarchy = memo.hierarchy || [];
  const workerStatus = memo.worker_status || [];

  return (
    <>
      {/* Page content — blurred when edit modal is open */}
      <div className={`p-6 space-y-4 transition-all duration-200 ${editOpen? '':''}`}>
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-900">Memo Detail</h1>
          <div className="space-x-2">
            {user.is_creator && (
              <button
                onClick={() => setEditOpen(true)}
                className="px-4 py-2 text-sm font-medium rounded bg-blue-600 text-white hover:bg-blue-700"
              >
                Edit
              </button>
            )}
            <BackButton />
          </div>
        </div>

      {/* Detailed info */}
      <MemoInfo info={info} data={hierarchy} memoId={memoId}/>

      <MemoTimeline memoId={memoId} data={hierarchy}/>

      <WorkerStatus memoId={memoId} data={workerStatus} onChange={fetchMemo}/>

      {/* Modal – memo edit */}
      <Modal isOpen={editOpen} onClose={() => setEditOpen(false)} title="Edit Memo" size="md">
        <MemoEditForm
          memo={memo}
          onSuccess={async () => {
            setEditOpen(false);
            try {
              const updated = await apiService.getMemo(hospitalId, memoId);
              setMemo(updated);
            } catch (e) {
              toast.error('Failed to refresh memo');
            }
          }}
          onCancel={() => setEditOpen(false)}
        />
      </Modal>
      </div>
    </>
  );
};

export default MemoDetail;