components/memos/MemoEditForm.jsx

import React, { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { useAuth } from '../../hooks/useAuth';

/**
 * Form component for editing an existing memo. Allows updating the complaint, department, and tagged role.
 * Props:
 *  - memo: existing memo object
 *  - onSuccess: () => void  // called when update successful
 *  - onCancel: () => void
 */
const MemoEditForm = ({ memo, onSuccess, onCancel }) => {
  const { apiService, hospital } = useAuth();
  const hospitalId = hospital?.id || localStorage.getItem('hospitalId');

  const [roles, setRoles] = useState([]);
  const [loading, setLoading] = useState(false);
  const info = memo.info || {};
  const [formData, setFormData] = useState({
    complaint: info.complaint || '',
    department: info.department || '',
    tagged_role_id: info.tagged_role_id || '',
  });

  useEffect(() => {
    const fetchRoles = async () => {
      try {
        const data = await apiService.getRoles(hospitalId);
        const filtered = (data || []).filter((r) => r.name?.toLowerCase() !== 'admin');
        setRoles(filtered);
      } catch (err) {
        console.error(err);
      }
    };
    fetchRoles();
  }, [apiService, hospitalId]);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!formData.complaint || !formData.department) {
      toast.error('Please fill all fields');
      return;
    }
    setLoading(true);
    try {
      const payload = {
        complaint: formData.complaint,
        department: formData.department,
        tagged_role_id: formData.tagged_role_id,
        tagged_role_name: roles.find((r) => r.id === parseInt(formData.tagged_role_id, 10))?.name,
      };
      await apiService.updateMemo(hospitalId, memo.memo, {
        payload,
        metadata: JSON.parse(localStorage.getItem('user')) || {},
      });
      toast.success('Memo updated');
      onSuccess();
    } catch (err) {
      console.error(err);
      toast.error('Failed to update memo');
      setLoading(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4 w-full max-w-md mx-auto">
      <div className=" rounded-lg  p-6 bg-white">
  <div>
    <label className="block text-base font-semibold text-gray-800 mb-2">Complaint</label>
    <input
      type="text"
      name="complaint"
      value={formData.complaint}
      onChange={handleChange}
      className="mt-1 block w-full px-3 py-2 border-2 border-gray-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      required
    />
  </div>

  <div>
    <label className="block text-base font-semibold text-gray-800 mb-2">Department</label>
    <input
      type="text"
      name="department"
      value={formData.department}
      onChange={handleChange}
      className="mt-1 block w-full px-3 py-2 border-2 border-gray-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
      required
    />
  </div>

  <div>
    <label className="block text-base font-semibold text-gray-800 mb-2">Tagged Role</label>
    <select
      name="tagged_role_id"
      value={formData.tagged_role_id}
      onChange={handleChange}
      className="mt-1 block w-full px-3 py-2 border-2 border-gray-400 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base font-medium"
    >
      <option value="">-- Select Role --</option>
      {roles.map((r) => (
        <option key={r.id} value={r.id} className="text-base font-medium">
          {r.name}
        </option>
      ))}
    </select>
  </div>

  <div className="flex justify-end space-x-2 pt-4">
    {!loading && (
      <button
        type="button"
        className="px-4 py-2 rounded border-2 border-gray-400 bg-gray-200 text-gray-800 text-base font-semibold hover:bg-gray-300"
        onClick={onCancel}
      >
        Cancel
      </button>
    )}
    <button
      type="submit"
      disabled={loading}
      className="px-4 py-2 rounded border-2 border-blue-700 bg-blue-600 text-white text-base font-semibold hover:bg-blue-700 disabled:opacity-60"
    >
      {loading ? 'Updating...' : 'Update'}
    </button>
  </div>
</div>
</form>
  );
};

export default MemoEditForm;