client/src/pages/Feedback.tsx

import React, { useEffect, useState } from 'react';
import { api } from '../services/api';

const Feedback: React.FC = () => {
  const [message, setMessage] = useState('');
  const [status, setStatus] = useState<string>('');
  const [sending, setSending] = useState(false);
  const [isAdmin, setIsAdmin] = useState(false);
  const [messages, setMessages] = useState<Array<{ _id: string; userName?: string; userEmail?: string; content: string; createdAt?: string; read?: boolean }>>([]);

  useEffect(() => {
    const u = localStorage.getItem('user');
    try { const parsed = u ? JSON.parse(u) : null; setIsAdmin(parsed?.role === 'admin'); } catch {}
  }, []);

  const send = async () => {
    if (!message.trim()) return;
    try {
      setSending(true); setStatus('');
      const token = localStorage.getItem('token') || 'visitor_anon';
      const user = localStorage.getItem('user') || '';
      const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
      const resp = await fetch(`${base}/api/messages`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
          'user-info': user,
          'user-role': (JSON.parse(user||'{}')?.role || 'visitor')
        },
        body: JSON.stringify({ content: message })
      });
      if (!resp.ok) throw new Error('Failed');
      setMessage('');
      setStatus('Sent');
    } catch (e) {
      setStatus('Failed to send');
    } finally {
      setSending(false);
    }
  };

  useEffect(() => {
    let timer: any;
    const load = async () => {
      try {
        if (!isAdmin) return;
        const token = localStorage.getItem('token') || '';
        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
        const resp = await fetch(`${base}/api/messages`, { headers: { 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' } });
        if (resp.ok) {
          const data = await resp.json();
          setMessages(Array.isArray(data?.messages) ? data.messages : []);
        }
      } catch {}
    };
    load();
    if (isAdmin) timer = setInterval(load, 60000);
    return () => { if (timer) clearInterval(timer); };
  }, [isAdmin]);

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-2xl font-semibold text-gray-900 mb-4">Feedback & Suggestions</h1>
        <p className="text-sm text-gray-600 mb-4">Share feature requests or issues.</p>
        <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-3">
          <textarea
            className="w-full border border-gray-300 rounded-md px-3 py-2 min-h-[160px]"
            placeholder="Your message..."
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
          <div className="flex justify-end">
            <button disabled={sending} onClick={send} className="px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:bg-gray-400">{sending ? 'Sending…' : 'Send'}</button>
          </div>
          {status && <div className="text-xs text-gray-600">{status}</div>}
        </div>
        {isAdmin && (
          <div className="mt-6 bg-white rounded-lg border border-gray-200 p-4">
            <div className="flex items-center justify-between mb-3">
              <div className="text-sm font-medium text-gray-900">Inbox</div>
              <div className="text-xs text-gray-600">{messages.length} messages</div>
            </div>
            {messages.length === 0 ? (
              <div className="text-sm text-gray-500">No messages yet.</div>
            ) : (
              <ul className="divide-y divide-gray-100">
                {messages.map((m) => (
                  <li key={m._id} className="py-3 flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="text-gray-900 text-sm break-words whitespace-pre-wrap">{m.content}</div>
                      <div className="text-xs text-gray-500 mt-1">{m.userName} {m.userEmail ? `· ${m.userEmail}` : ''} {m.createdAt ? `· ${new Date(m.createdAt).toLocaleString()}` : ''}</div>
                    </div>
                    <div className="flex items-center gap-2">
                      {!m.read && (
                        <button
                          className="text-xs px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200"
                          onClick={async () => {
                            try {
                              const token = localStorage.getItem('token') || '';
                              const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
                              const resp = await fetch(`${base}/api/messages/${m._id}/read`, { method: 'PATCH', headers: { 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' } });
                              if (resp.ok) {
                                setMessages((prev) => prev.map(x => x._id === m._id ? { ...x, read: true } : x));
                              }
                            } catch {}
                          }}
                        >Mark read</button>
                      )}
                      <button
                        className="text-xs px-2 py-1 rounded-md bg-rose-50 hover:bg-rose-100 text-rose-700"
                        onClick={async () => {
                          try {
                            const token = localStorage.getItem('token') || '';
                            const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
                            const resp = await fetch(`${base}/api/messages/${m._id}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' } });
                            if (resp.ok) {
                              setMessages((prev) => prev.filter(x => x._id !== m._id));
                            }
                          } catch {}
                        }}
                      >Delete</button>
                    </div>
                  </li>
                ))}
              </ul>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

export default Feedback;