'use client';

import { useState, useEffect } from 'react';

export default function DoctorMessages({ selectedPatient }) {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');

  // Simulate fetching patient-specific messages
  useEffect(() => {
    if (selectedPatient) {
      // Dummy messages per patient for now
      const dummyMessages = {
        p1: [
          {
            sender: 'Dr. Amina Mburu',
            text: 'Your lab results are ready.',
            timestamp: 'May 5, 2025 - 10:15 AM',
            isDoctor: true,
          },
          {
            sender: 'Patient John Doe',
            text: 'Thank you, Doctor.',
            timestamp: 'May 5, 2025 - 10:30 AM',
            isDoctor: false,
          },
        ],
        p2: [
          {
            sender: 'Dr. Amina Mburu',
            text: 'Your prescription is ready.',
            timestamp: 'May 3, 2025 - 2:10 PM',
            isDoctor: true,
          },
        ],
        p3: [
          {
            sender: 'Dr. Amina Mburu',
            text: 'Im not Available Today.',
            timestamp: 'May 3, 2025 - 2:20 PM',
            isDoctor: true,
          },
        ],
        p4: [
          {
            sender: 'Dr. Amina Mburu',
            text: 'Your lab results are ready.',
            timestamp: 'May 5, 2025 - 10:15 AM',
            isDoctor: true,
          },
          {
            sender: 'Patient Grace Otieno',
            text: 'Thank you, Doctor.',
            timestamp: 'May 5, 2025 - 10:30 AM',
            isDoctor: false,
          },
        ],
      };
      setMessages(dummyMessages[selectedPatient.id] || []);
    }
  }, [selectedPatient]);

  const handleAddMessage = () => {
    if (newMessage.trim()) {
      const newMsg = {
        sender: 'Dr. Amina Mburu',
        text: newMessage,
        timestamp: new Date().toLocaleString(),
        isDoctor: true,
      };
      setMessages([...messages, newMsg]);
      setNewMessage('');
    }
  };

  return (
    <div className="bg-white shadow rounded-xl p-4">
      <h2 className="text-xl font-semibold mb-4">
        Messaging with {selectedPatient.name}
      </h2>

      <div className="space-y-3">
        {messages.length === 0 ? (
          <p className="text-gray-500">No messages yet for this patient.</p>
        ) : (
          messages.map((message, index) => (
            <div
              key={index}
              className={`p-3 rounded bg-${
                message.isDoctor ? 'blue' : 'green'
              }-100`}
            >
              <p
                className={`font-medium ${
                  message.isDoctor ? 'text-blue-600' : 'text-green-600'
                }`}
              >
                {message.sender}
              </p>
              <p className="text-sm text-gray-700">{message.text}</p>
              <p className="text-xs text-gray-400 mt-1">{message.timestamp}</p>
            </div>
          ))
        )}
      </div>

      <div className="mt-4">
        <textarea
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          className="border rounded p-2 w-full"
          rows="3"
          placeholder="Type your response..."
        ></textarea>
        <button
          className="bg-blue-500 text-white px-4 py-2 rounded mt-2"
          onClick={handleAddMessage}
        >
          Send Message
        </button>
      </div>
    </div>
  );
}
