"use client";

import { useState, useEffect } from "react";
import Link from "next/link";
import { MessageSquare } from "lucide-react";
import ProtectedRoute from "@/components/ProtectedRoute";
import { conversationApi } from "@/lib/api";
import PageHero from "@/components/customer/PageHero";

export default function MessagesPage() {
  const [conversations, setConversations] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    conversationApi.list().then((r) => {
      setConversations(r.conversations || []);
    }).catch(() => setConversations([])).finally(() => setLoading(false));
  }, []);

  return (
    <ProtectedRoute>
      <div className="space-y-6">
        <PageHero
          title="Messages"
          description="Chat with sellers about products, ask questions, and get support. Start a conversation from any product page by clicking &quot;Message Seller&quot;."
          illustration="messages"
          guide="Tip: Click a conversation on the left to open it. Use the chat FAB on the page to quickly access messages."
        />

        {loading ? (
          <div className="space-y-3">
            {[1, 2, 3].map((i) => (
              <div key={i} className="h-20 bg-gray-100 rounded-xl animate-pulse" />
            ))}
          </div>
        ) : conversations.length === 0 ? (
          <div className="flex flex-col lg:flex-row items-center gap-6 p-8 rounded-2xl bg-gray-50 border border-gray-200/60 text-center lg:text-left">
            <div className="flex-shrink-0 w-32 h-32 rounded-2xl bg-cyan-100 flex items-center justify-center">
              <MessageSquare className="w-16 h-16 text-cyan-400" />
            </div>
            <div>
              <h2 className="font-semibold text-gray-900">No conversations yet</h2>
              <p className="text-sm text-gray-600 mt-1">Start a conversation by messaging a seller from any product page. Click &quot;Message Seller&quot; to ask questions or negotiate.</p>
              <Link href="/shop" className="inline-block mt-4 px-4 py-2 bg-[#1790d7] text-white rounded-xl text-sm font-medium hover:bg-[#1277b8] transition-colors">
                Browse Products
              </Link>
            </div>
          </div>
        ) : (
          <div className="space-y-3">
            {conversations.map((c) => (
              <Link
                key={c.id}
                href={`/customer/messages/${c.id}`}
                className="flex items-center justify-between gap-4 p-4 rounded-xl border border-gray-200/80 bg-white hover:border-[#1790d7]/30 hover:shadow-md transition-all"
              >
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-gray-900">{c.other_user?.name}</p>
                  {c.product && <p className="text-sm text-gray-500">Re: {c.product.name}</p>}
                  {c.last_message && <p className="text-sm text-gray-600 truncate mt-1">{c.last_message.body}</p>}
                </div>
                {c.unread_count > 0 && (
                  <span className="px-2.5 py-1 bg-red-500 text-white text-xs font-medium rounded-full shrink-0">{c.unread_count}</span>
                )}
              </Link>
            ))}
          </div>
        )}
      </div>
    </ProtectedRoute>
  );
}