"use client";

import { useState, useEffect } from "react";

interface ContactMessage {
  id: string;
  name: string;
  email: string;
  subject: string;
  message: string;
  status: string;
  createdAt: string;
}

export default function AdminContactMessagesPage() {
  const [messages, setMessages] = useState<ContactMessage[]>([]);
  const [loading, setLoading] = useState(true);
  const [selectedMessage, setSelectedMessage] = useState<ContactMessage | null>(null);

  useEffect(() => {
    fetchMessages();
  }, []);

  const fetchMessages = async () => {
    try {
      const response = await fetch("/api/admin/contact-messages");
      if (response.ok) {
        const data = await response.json();
        setMessages(data.messages || []);
      }
    } catch (error) {
      console.error("Failed to fetch messages:", error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <main className="max-w-7xl mx-auto px-6 py-16">
      <div className="mb-8">
        <h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
          Contact Messages
        </h1>
        <p className="text-lg text-gray-600 dark:text-gray-400">
          Review and respond to customer inquiries
        </p>
      </div>

      {loading ? (
        <div className="text-center py-12">
          <div className="inline-block w-8 h-8 border-4 border-primary border-r-transparent rounded-full animate-spin"></div>
          <p className="mt-4 text-gray-600 dark:text-gray-400">Loading messages...</p>
        </div>
      ) : messages.length === 0 ? (
        <div className="card p-12 text-center">
          <div className="text-6xl mb-4">📧</div>
          <p className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
            No messages yet
          </p>
          <p className="text-gray-600 dark:text-gray-400">
            Customer inquiries will appear here
          </p>
        </div>
      ) : (
        <div className="grid gap-6">
          {messages.map((message) => (
            <div key={message.id} className="card p-6 hover:shadow-elevation-2 transition-all">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <h3 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
                    {message.subject}
                  </h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400">
                    From: {message.name} ({message.email})
                  </p>
                  <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
                    {new Date(message.createdAt).toLocaleString()}
                  </p>
                </div>
                <span
                  className={`px-3 py-1 rounded-full text-xs font-semibold ${
                    message.status === "NEW"
                      ? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
                      : message.status === "READ"
                      ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200"
                      : "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200"
                  }`}
                >
                  {message.status}
                </span>
              </div>
              <div className="bg-gray-50 dark:bg-slate-800 rounded-lg p-4 mb-4">
                <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
                  {message.message}
                </p>
              </div>
              <div className="flex gap-2">
                <a
                  href={`mailto:${message.email}?subject=Re: ${message.subject}`}
                  className="btn-primary text-sm"
                >
                  📧 Reply via Email
                </a>
              </div>
            </div>
          ))}
        </div>
      )}
    </main>
  );
}