"use client";

import { MessageSquare, Send, Users, Bot } from "lucide-react";

export default function MessagesPage() {
  const conversations = [
    { name: "Lisa Park, RN", role: "Primary Nurse", lastMessage: "Patient vitals stable. BP 128/78.", time: "2h ago", unread: 1 },
    { name: "Dr. Rebecca Torres", role: "Collaborating", lastMessage: "Agree with GLP-1 initiation.", time: "Yesterday", unread: 0 },
    { name: "Sarah Adams, PharmD", role: "Pharmacist", lastMessage: "Metformin ER formulation available.", time: "3d ago", unread: 0 },
    { name: "Sarah Johnson", role: "Patient", lastMessage: "Thank you for the information!", time: "1d ago", unread: 0 },
    { name: "Robert Martinez", role: "Patient", lastMessage: "My blood pressure has been high.", time: "2d ago", unread: 2 },
  ];

  return (
    <div className="flex h-full">
      {/* Conversation List */}
      <div className="w-80 border-r border-slate-200 bg-white overflow-auto">
        <div className="p-4 border-b border-slate-100">
          <h2 className="text-lg font-bold text-slate-900 flex items-center gap-2">
            <MessageSquare size={18} className="text-clinical-600" />
            Messages
          </h2>
          <input
            placeholder="Search conversations..."
            className="w-full mt-3 px-3 py-2 bg-slate-50 border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-2 focus:ring-clinical-500"
          />
        </div>
        <div className="divide-y divide-slate-50">
          {conversations.map((conv, i) => (
            <button
              key={i}
              className={`w-full text-left px-4 py-3 hover:bg-slate-50 transition-colors ${i === 0 ? "bg-clinical-50" : ""}`}
            >
              <div className="flex items-start gap-3">
                <div className="w-9 h-9 rounded-full bg-clinical-100 text-clinical-600 flex items-center justify-center text-xs font-bold shrink-0">
                  {conv.name.split(" ").map((n) => n[0]).join("")}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between">
                    <p className="text-xs font-semibold text-slate-800 truncate">{conv.name}</p>
                    <span className="text-[10px] text-slate-400">{conv.time}</span>
                  </div>
                  <p className="text-[10px] text-slate-400">{conv.role}</p>
                  <p className="text-xs text-slate-500 mt-0.5 truncate">{conv.lastMessage}</p>
                </div>
                {conv.unread > 0 && (
                  <span className="w-5 h-5 bg-clinical-600 text-white rounded-full flex items-center justify-center text-[10px] font-bold shrink-0">
                    {conv.unread}
                  </span>
                )}
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Message View */}
      <div className="flex-1 flex flex-col">
        <div className="px-5 py-3 border-b border-slate-200 bg-white flex items-center gap-3">
          <div className="w-8 h-8 rounded-full bg-clinical-100 text-clinical-600 flex items-center justify-center text-xs font-bold">
            LP
          </div>
          <div>
            <p className="text-sm font-semibold text-slate-800">Lisa Park, RN</p>
            <p className="text-[10px] text-green-600">Online • Primary Nurse</p>
          </div>
        </div>

        <div className="flex-1 overflow-auto p-5 space-y-4 bg-slate-50">
          <div className="flex justify-start">
            <div className="max-w-md bg-white rounded-xl rounded-tl-none px-4 py-2.5 shadow-sm border border-slate-100">
              <p className="text-xs text-slate-700">Good morning Dr. Chen! Patient Sarah Johnson checked in for her 9:00 appointment. Vitals obtained: BP 128/78, HR 76, Temp 98.4, SpO2 98%.</p>
              <p className="text-[10px] text-slate-400 mt-1">8:45 AM</p>
            </div>
          </div>
          <div className="flex justify-end">
            <div className="max-w-md bg-clinical-600 text-white rounded-xl rounded-tr-none px-4 py-2.5">
              <p className="text-xs">Thank you Lisa. Please have her glucose checked before I see her. Also, can you pull up her latest A1c results?</p>
              <p className="text-[10px] text-clinical-200 mt-1">8:50 AM</p>
            </div>
          </div>
          <div className="flex justify-start">
            <div className="max-w-md bg-white rounded-xl rounded-tl-none px-4 py-2.5 shadow-sm border border-slate-100">
              <p className="text-xs text-slate-700">Will do! Point-of-care glucose: 218 mg/dL fasting. A1c from last week shows 10.2%. She&apos;s in Room 4.</p>
              <p className="text-[10px] text-slate-400 mt-1">9:02 AM</p>
            </div>
          </div>

          {/* AI Draft */}
          <div className="flex justify-start">
            <div className="max-w-md bg-clinical-50 border border-clinical-200 rounded-xl px-4 py-2.5">
              <div className="flex items-center gap-1 mb-1">
                <Bot size={10} className="text-clinical-600" />
                <span className="text-[10px] text-clinical-600 font-medium">AI Suggested Reply</span>
              </div>
              <p className="text-xs text-clinical-700">Thanks Lisa. The glucose and A1c confirm we need to adjust her regimen today. I&apos;ll discuss GLP-1 RA initiation with her.</p>
              <div className="flex items-center gap-2 mt-2">
                <button className="px-2 py-1 bg-clinical-600 text-white rounded text-[10px] font-medium">Send</button>
                <button className="px-2 py-1 bg-white text-slate-600 rounded text-[10px] font-medium border border-slate-200">Edit</button>
              </div>
            </div>
          </div>
        </div>

        <div className="p-4 border-t border-slate-200 bg-white">
          <div className="flex items-center gap-2">
            <input
              placeholder="Type a message..."
              className="flex-1 px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-clinical-500"
            />
            <button className="p-2.5 bg-clinical-600 text-white rounded-xl hover:bg-clinical-700 transition-colors">
              <Send size={16} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}