// import React, { useMemo, useState, useEffect } from 'react';
// import { Comment, NotizenTabProps } from '../types'




// const NotizenTab: React.FC<NotizenTabProps> = ({ adresses, adrId, csrfToken, currentUser }) => {

//   const comments = useMemo(() => {
//     const current = adresses.find((adr) => adr.id === adrId);
//     // console.log('Found current address:', current);
//     // console.log('Comments from address:', current?.comments);
//     return current?.comments || [];
//   }, [adresses, adrId]);

//   const [localComments, setLocalComments] = useState<Comment[]>(comments);

//   useEffect(() => {
//     setLocalComments(comments);
//   }, [comments]);

//   const [newComment, setNewComment] = useState<Comment>({
//     notiz_id: 0,
//     adressid: adrId ?? 0,
//     ntz_timestamp: '',
//     Mitarbeiter: '',
//     bearbeiter: currentUser,
//     beschreibung: '',
//     langtext: '',
//   });

//   const fetchComments = () => {
//     if (!adrId) return;
//     fetch(`/contact/getadr/${adrId}`, {
//       headers: {
//         'Accept': 'application/json',
//       },
//     })
//       .then(async (res) => {
//         const contentType = res.headers.get('content-type');
//         if (!contentType?.includes('application/json')) {
//           const text = await res.text();
//           console.error('⚠️ Unexpected response (not JSON):', text.slice(0, 300));
//           throw new Error('Not JSON');
//         }
//         return res.json();
//       })
//       .then((data) => {
//         // console.log('✅ Comments loaded:', data);
//         setLocalComments(data.comments ?? []);
//       })
//       .catch((err) => console.error('Fehler beim Laden der Notizen:', err));

//   };

//   const handleChange = (index: number, field: keyof Comment, value: string) => {
//     setLocalComments((prev) => {
//       const updated = [...prev];
//       updated[index] = { ...updated[index], [field]: value };
//       return updated;
//     });
//   };

//   const saveComment = (comment: Comment) => {
//     const formData = new FormData();
//     formData.append('Ntzid', comment.notiz_id.toString());
//     formData.append('id', adrId?.toString() || '');
//     formData.append('nz_datum', comment.ntz_timestamp);
//     formData.append('nz_mitarbeiter', comment.Mitarbeiter);
//     formData.append('nz_bemerkung', comment.beschreibung);
//     formData.append('nz_user', comment.bearbeiter);
//     formData.append('langtext', comment.langtext || '');
//     formData.append('_token', csrfToken);


//     // console.log('Saving comment:', comment);
//     // console.log('FormData being sent:');
//     // formData.forEach((value, key) => console.log(`${key}: ${value}`));


//     fetch('/contact/saveNtz', {
//       method: 'POST',
//       body: formData,
//       headers: {
//         'Accept': 'application/json',
//       },
//     })
//       .then(async (res) => {
//         if (!res.ok) throw new Error('Fehler beim Speichern');

//         const contentType = res.headers.get('content-type');
//         if (!contentType || !contentType.includes('application/json')) {
//           const text = await res.text(); // capture the HTML response
//           console.error('Expected JSON but got:', text.slice(0, 300));
//           throw new Error(' Server did not return JSON');
//         }

//         return res.json();
//       })
//       .then((data) => {
//         console.log('Saved:', data);
//         fetchComments();
//       })
//       .catch((err) => console.error(err));

//   };

//   const deleteComment = (comment: Comment) => {
//     if (!window.confirm('Löschen?')) return;
//     const formData = new FormData();
//     formData.append('Ntzid', comment.notiz_id.toString());
//     formData.append('delNtz', '1');
//     formData.append('_token', csrfToken);

//     fetch('/contact/saveNtz', {
//       method: 'POST',
//       body: formData,
//       headers: {
//         'Accept': 'application/json', 
//       },
//     })
//       .then((res) => {
//         if (!res.ok) throw new Error('Fehler beim Speichern');
//         return res.json();
//       })
//       .then((data) => {
//         // console.log('✅ Saved:');
//         fetchComments();
//       })

//       .catch((err) => console.error(err));
//   };


//   // console.log('🧾 Comments used in render:', comments);

//   return (
//     <div style={{ maxHeight: '400px', padding: '5px', borderTop: '1px solid #ccc' }} id="tabs-4">
     
//       <table className="table table-sm">

//  {/* Table headers */}

//         <thead>
//           <tr>
//             <th>Datum</th>
//             <th>Mitarbeiter</th>
//             <th>Bemerkung</th>
//             <th>User</th>
//             <th>Langtext</th>
//             <th>Save</th>
//             <th>Del</th>

//              {/* Row for new notizen */}

//           </tr>
//         </thead>
//         <tbody>
//           <tr>
//             {/* <td><input className="form-control" size={15} value={newComment.ntz_timestamp} onChange={(e) => setNewComment({ ...newComment, ntz_timestamp: e.target.value })} /></td> */}
//             <td><input  className="form-control" size={15} value={new Date().toLocaleString('de-DE')} // show today's date
//                   disabled
//                 /></td>
//             <td><input className="form-control" size={12} value={newComment.Mitarbeiter} onChange={(e) => setNewComment({ ...newComment, Mitarbeiter: e.target.value })} /></td>
//             <td><input className="form-control" size={70} value={newComment.beschreibung} onChange={(e) => setNewComment({ ...newComment, beschreibung: e.target.value })} /></td>
//             <td><input
//               className="form-control"
//               size={4}
//               value={currentUser}
//               disabled
//             /></td>

//             <td colSpan={1}><textarea className="form-control" rows={1} value={newComment.langtext} onChange={(e) => setNewComment({ ...newComment, langtext: e.target.value })} /></td>
//             <td colSpan={2}>
//               <button onClick={() => {
//                 saveComment(newComment);
//                 setNewComment({
//                   notiz_id: 0,
//                   adressid: adrId ?? 0,
//                   ntz_timestamp: '',
//                   Mitarbeiter: '',
//                   bearbeiter: '',
//                   beschreibung: '',
//                   langtext: '',
//                 });
//               }}>Neu</button>
//             </td>
//           </tr>

//           {/* Loaded Notizen Data */}

//           {localComments.map((comment, index) => (
//             <React.Fragment key={comment.notiz_id}>
//               <tr>
//             <td><input  className="form-control" size={15}   value={new Date(comment.ntz_timestamp).toLocaleString('de-DE')} disabled /></td>
//                 <td><input className="form-control" size={12} value={comment.Mitarbeiter} onChange={(e) => handleChange(index, 'Mitarbeiter', e.target.value)} /></td>
//                 <td><input className="form-control" size={70} value={comment.beschreibung} onChange={(e) => handleChange(index, 'beschreibung', e.target.value)} /></td>
//                 <td><input
//                   className="form-control"
//                   size={4}
//                   value={comment.bearbeiter}
//                   disabled
//                 /></td>

//                 {comment.langtext?.length === 0 ? (
//                   <td colSpan={1}>
//                     <textarea
//                       className="form-control"
//                       rows={1}
//                       value={comment.langtext}
//                       onChange={(e) => handleChange(index, 'langtext', e.target.value)}
//                     />
//                   </td>
//                 ) : (
//                   <td></td>
//                 )}
//                 <td><button onClick={() => saveComment(comment)}>Save</button></td>
//                 <td><button onClick={() => deleteComment(comment)}>Del</button></td>
//               </tr>
//               {comment.langtext?.length > 0 && (
//                 <tr>
//                   <td colSpan={5}>
//                     <textarea
//                       className="form-control"
//                       rows={1}
//                       cols={114}
//                       value={comment.langtext}
//                       onChange={(e) => handleChange(index, 'langtext', e.target.value)}
//                     />
//                   </td>
//                 </tr>
//               )}

//             </React.Fragment>
//           ))}

//         </tbody>
//       </table>
//     </div>
//   );
// };

// export default NotizenTab;