'use client';

import React, { useState, useEffect } from 'react';
import { apiRequest } from '@/lib/api';
import { toast } from '@/context/ToastContext';
import ConfirmDeleteModal from '@/components/admin/ConfirmDeleteModal';
import {
  Mail,
  Search,
  Filter,
  CheckCircle,
  Clock,
  Trash2,
  RefreshCw,
  Eye,
  X,
  MessageSquare,
  User,
  Calendar,
  Send,
  CheckCheck,
  Archive,
  Inbox,
  AlertCircle,
} from 'lucide-react';

interface ContactSubmission {
  _id: string;
  name: string;
  email: string;
  subject: string;
  message: string;
  userId?: {
    _id: string;
    name?: string;
    email?: string;
    phoneNumber?: string;
  } | string | null;
  status: 'unread' | 'read' | 'replied' | 'archived';
  adminNotes?: string;
  createdAt: string;
  updatedAt: string;
}

export default function AdminContactsPage() {
  const [contacts, setContacts] = useState<ContactSubmission[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [statusFilter, setStatusFilter] = useState<string>('all');
  const [selectedContact, setSelectedContact] = useState<ContactSubmission | null>(null);
  const [stats, setStats] = useState({
    totalAll: 0,
    unread: 0,
    read: 0,
    replied: 0,
  });
  const [updatingId, setUpdatingId] = useState<string | null>(null);
  const [deletingContact, setDeletingContact] = useState<ContactSubmission | null>(null);
  const [deleteLoading, setDeleteLoading] = useState(false);

  const fetchContacts = async () => {
    setLoading(true);
    const queryParams = new URLSearchParams();
    if (statusFilter !== 'all') queryParams.append('status', statusFilter);
    if (searchTerm.trim()) queryParams.append('search', searchTerm.trim());

    const res = await apiRequest(`/admin/contacts?${queryParams.toString()}`);
    if (res.success && res.contacts) {
      setContacts(res.contacts);
      if (res.stats) {
        setStats(res.stats);
      }
    } else {
      toast.error(res.error || 'Failed to fetch contact submissions');
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchContacts();
  }, [statusFilter]);

  const handleSearchSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    fetchContacts();
  };

  const handleUpdateStatus = async (id: string, newStatus: 'unread' | 'read' | 'replied' | 'archived') => {
    setUpdatingId(id);
    const res = await apiRequest(`/admin/contacts/${id}`, {
      method: 'PATCH',
      body: JSON.stringify({ status: newStatus }),
    });

    setUpdatingId(null);

    if (res.success && res.contact) {
      toast.success(`Status updated to "${newStatus}"`);
      setContacts((prev) =>
        prev.map((c) => (c._id === id ? { ...c, status: newStatus } : c))
      );
      if (selectedContact && selectedContact._id === id) {
        setSelectedContact({ ...selectedContact, status: newStatus });
      }
    } else {
      toast.error(res.error || 'Failed to update status');
    }
  };

  const handleConfirmDeleteContact = async () => {
    if (!deletingContact) return;

    setDeleteLoading(true);
    const res = await apiRequest(`/admin/contacts/${deletingContact._id}`, {
      method: 'DELETE',
    });
    setDeleteLoading(false);

    if (res.success) {
      toast.success('Contact submission deleted successfully');
      setContacts((prev) => prev.filter((c) => c._id !== deletingContact._id));
      if (selectedContact && selectedContact._id === deletingContact._id) {
        setSelectedContact(null);
      }
      setDeletingContact(null);
    } else {
      toast.error(res.error || 'Failed to delete submission');
    }
  };

  const openDetailModal = (contact: ContactSubmission) => {
    setSelectedContact(contact);
    // Automatically mark as read if unread
    if (contact.status === 'unread') {
      handleUpdateStatus(contact._id, 'read');
    }
  };

  return (
    <div className="space-y-8 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
          <h1 className="text-3xl font-extrabold text-gray-900 tracking-tight flex items-center gap-3">
            {/* <Mail className="w-8 h-8 text-[#FECE00]" /> */}
            <span>Contact Us Submissions & Inquiries</span>
          </h1>
          {/* <p className="text-sm text-gray-500 mt-1 font-medium">
            Manage, review, and respond to incoming user contact form messages in real time.
          </p> */}
        </div>
        <button
          onClick={fetchContacts}
          className="px-4 py-2.5 rounded-xl bg-white hover:bg-gray-100 text-gray-700 font-bold text-sm border border-gray-200 shadow-xs transition flex items-center gap-2 self-start md:self-auto cursor-pointer"
        >
          <RefreshCw className={`w-4 h-4 text-gray-500 ${loading ? 'animate-spin' : ''}`} />
          <span>Refresh Messages</span>
        </button>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-4 gap-5">
        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Total Submissions</p>
            <p className="text-2xl font-black text-gray-900 mt-1">{loading ? '...' : stats.totalAll}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-blue-50 text-blue-600 border border-blue-200 flex items-center justify-center">
            <Inbox className="w-5 h-5" />
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Unread Messages</p>
            <p className="text-2xl font-black text-amber-600 mt-1">{loading ? '...' : stats.unread}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-amber-50 text-amber-600 border border-amber-200 flex items-center justify-center">
            <AlertCircle className="w-5 h-5" />
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Read Messages</p>
            <p className="text-2xl font-black text-emerald-600 mt-1">{loading ? '...' : stats.read}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-200 flex items-center justify-center">
            <CheckCircle className="w-5 h-5" />
          </div>
        </div>

        <div className="p-5 rounded-2xl bg-white border border-gray-200 shadow-xs flex items-center justify-between">
          <div>
            <p className="text-xs font-bold uppercase text-gray-500">Replied Messages</p>
            <p className="text-2xl font-black text-indigo-600 mt-1">{loading ? '...' : stats.replied}</p>
          </div>
          <div className="w-10 h-10 rounded-xl bg-indigo-50 text-indigo-600 border border-indigo-200 flex items-center justify-center">
            <CheckCheck className="w-5 h-5" />
          </div>
        </div>
      </div>

      {/* Filter and Search Bar */}
      <div className="bg-white rounded-2xl border border-gray-200 shadow-xs overflow-hidden">
        <form onSubmit={handleSearchSubmit} className="p-4 border-b border-gray-200 bg-gray-50/50 flex flex-col md:flex-row items-center justify-between gap-4">
          <div className="relative w-full md:w-96">
            <Search className="w-4 h-4 text-gray-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
            <input
              type="text"
              placeholder="Search by name, email, subject, or message..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full pl-10 pr-4 py-2.5 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white"
            />
          </div>

          <div className="flex flex-wrap items-center gap-3 w-full md:w-auto justify-end">
            <div className="flex items-center gap-2">
              <Filter className="w-4 h-4 text-gray-500" />
              <span className="text-xs font-bold text-gray-600">Status:</span>
              <select
                value={statusFilter}
                onChange={(e) => setStatusFilter(e.target.value)}
                className="px-3 py-2 rounded-xl border border-gray-300 text-xs font-semibold focus:border-[#FECE00] outline-none bg-white text-gray-800 cursor-pointer"
              >
                <option value="all">All Statuses</option>
                <option value="unread">Unread</option>
                <option value="read">Read</option>
                <option value="replied">Replied</option>
                <option value="archived">Archived</option>
              </select>
            </div>
          </div>
        </form>

        {/* Submissions Table */}
        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm text-gray-700">
            <thead className="bg-gray-50 text-xs uppercase font-bold text-gray-500 border-b border-gray-200">
              <tr>
                <th className="px-6 py-4">Sender</th>
                <th className="px-6 py-4">Subject</th>
                <th className="px-6 py-4">Message Snippet</th>
                <th className="px-6 py-4">User Type</th>
                <th className="px-6 py-4">Status</th>
                <th className="px-6 py-4">Submitted At</th>
                <th className="px-6 py-4 text-right">Actions</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {loading ? (
                <tr>
                  <td colSpan={7} className="px-6 py-10 text-center text-gray-500 text-xs font-semibold">
                    <div className="flex flex-col items-center gap-2">
                      <div className="w-6 h-6 border-2 border-[#FECE00] border-t-transparent rounded-full animate-spin" />
                      <span>Loading contact submissions...</span>
                    </div>
                  </td>
                </tr>
              ) : contacts.length === 0 ? (
                <tr>
                  <td colSpan={7} className="px-6 py-10 text-center text-gray-500 text-xs">
                    No contact submissions match the criteria.
                  </td>
                </tr>
              ) : (
                contacts.map((contact) => {
                  const isUnread = contact.status === 'unread';
                  return (
                    <tr
                      key={contact._id}
                      className={`hover:bg-amber-50/30 transition ${isUnread ? 'bg-amber-50/20 font-medium' : ''}`}
                    >
                      {/* Sender */}
                      <td className="px-6 py-4">
                        <div>
                          <p className={`text-xs ${isUnread ? 'font-black text-gray-900' : 'font-bold text-gray-800'}`}>
                            {contact.name}
                          </p>
                          <a
                            href={`mailto:${contact.email}`}
                            className="text-[11px] text-blue-600 hover:underline block font-medium"
                          >
                            {contact.email}
                          </a>
                        </div>
                      </td>

                      {/* Subject */}
                      <td className="px-6 py-4 font-semibold text-gray-900">
                        <span className="line-clamp-1 max-w-[180px]">{contact.subject}</span>
                      </td>

                      {/* Message Snippet */}
                      <td className="px-6 py-4 text-xs text-gray-600">
                        <span className="line-clamp-2 max-w-xs">{contact.message}</span>
                      </td>

                      {/* User Type */}
                      <td className="px-6 py-4">
                        {contact.userId ? (
                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-extrabold bg-emerald-100 text-emerald-800 border border-emerald-200">
                            <User className="w-3 h-3 text-emerald-700" />
                            <span>Student</span>
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-gray-100 text-gray-600 border border-gray-200">
                            <span>Guest</span>
                          </span>
                        )}
                      </td>

                      {/* Status */}
                      <td className="px-6 py-4">
                        <span
                          className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-extrabold border capitalize ${contact.status === 'unread'
                            ? 'bg-amber-100 text-amber-900 border-amber-300 animate-pulse'
                            : contact.status === 'read'
                              ? 'bg-emerald-50 text-emerald-700 border-emerald-200'
                              : contact.status === 'replied'
                                ? 'bg-indigo-50 text-indigo-700 border-indigo-200'
                                : 'bg-gray-100 text-gray-600 border-gray-300'
                            }`}
                        >
                          {contact.status === 'unread' && <AlertCircle className="w-3.5 h-3.5 text-amber-700" />}
                          {contact.status === 'read' && <CheckCircle className="w-3.5 h-3.5 text-emerald-600" />}
                          {contact.status === 'replied' && <CheckCheck className="w-3.5 h-3.5 text-indigo-600" />}
                          {contact.status === 'archived' && <Archive className="w-3.5 h-3.5 text-gray-500" />}
                          <span>{contact.status}</span>
                        </span>
                      </td>

                      {/* Date */}
                      <td className="px-6 py-4 text-xs text-gray-500 font-medium whitespace-nowrap">
                        <div className="flex items-center gap-1">
                          <Calendar className="w-3.5 h-3.5 text-gray-400" />
                          <span>{new Date(contact.createdAt).toLocaleDateString()}</span>
                          <span className="text-[10px] text-gray-400">
                            {new Date(contact.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                          </span>
                        </div>
                      </td>

                      {/* Actions */}
                      <td className="px-6 py-4 text-right whitespace-nowrap">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => openDetailModal(contact)}
                            className="px-3 py-1.5 rounded-xl bg-gray-100 hover:bg-[#FECE00] text-gray-800 hover:text-black font-extrabold text-xs transition flex items-center gap-1 cursor-pointer border border-gray-200"
                            title="View full message details"
                          >
                            <Eye className="w-3.5 h-3.5" />
                            <span>View</span>
                          </button>

                          <button
                            onClick={() => setDeletingContact(contact)}
                            className="p-1.5 rounded-xl text-red-500 hover:bg-red-50 hover:text-red-700 transition cursor-pointer border border-transparent hover:border-red-200"
                            title="Delete submission"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </td>
                    </tr>
                  );
                })
              )}
            </tbody>
          </table>
        </div>
      </div>

      {/* Detail & Reply Modal */}
      {selectedContact && (
        <div className="fixed inset-0 z-50 bg-black/60 backdrop-blur-xs flex items-center justify-center p-4 animate-fadeIn !m-0">
          <div className="bg-white max-w-2xl w-full rounded-3xl shadow-2xl border border-gray-100 p-6 sm:p-8 space-y-6 max-h-[90vh] overflow-y-auto relative">
            {/* Modal Header */}
            <div className="flex items-center justify-between border-b border-gray-200 pb-4">
              <div className="flex items-center gap-3">
                <div className="w-10 h-10 rounded-2xl bg-[#FECE00] text-black font-black flex items-center justify-center text-lg">
                  <Mail className="w-5 h-5" />
                </div>
                <div>
                  <h3 className="text-xl font-extrabold text-gray-900 tracking-tight">
                    Message Inquiry Details
                  </h3>
                  <p className="text-xs text-gray-500 font-medium">
                    Received on {new Date(selectedContact.createdAt).toLocaleString()}
                  </p>
                </div>
              </div>

              <button
                onClick={() => setSelectedContact(null)}
                className="p-2 rounded-full text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition cursor-pointer"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Sender Meta Box */}
            <div className="p-4 rounded-2xl bg-amber-50/50 border border-amber-200/80 space-y-3 text-xs">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <span className="font-bold text-gray-500 uppercase text-[10px] block">Sender Name</span>
                  <span className="font-black text-gray-900 text-sm">{selectedContact.name}</span>
                </div>

                <div>
                  <span className="font-bold text-gray-500 uppercase text-[10px] block">Email Address</span>
                  <a
                    href={`mailto:${selectedContact.email}`}
                    className="font-bold text-blue-600 hover:underline text-sm"
                  >
                    {selectedContact.email}
                  </a>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2 border-t border-amber-200/50">
                <div>
                  <span className="font-bold text-gray-500 uppercase text-[10px] block">Subject</span>
                  <span className="font-extrabold text-gray-900">{selectedContact.subject}</span>
                </div>

                <div>
                  <span className="font-bold text-gray-500 uppercase text-[10px] block">Account Status</span>
                  {selectedContact.userId ? (
                    <span className="font-bold text-emerald-700">Authenticated Student</span>
                  ) : (
                    <span className="font-semibold text-gray-600">Guest Visitor</span>
                  )}
                </div>
              </div>
            </div>

            {/* Message Body */}
            <div className="space-y-2">
              <label className="block text-xs font-black uppercase tracking-wider text-gray-700">
                Full Message
              </label>
              <div className="p-5 rounded-2xl bg-gray-50 border border-gray-200 text-xs sm:text-sm font-medium text-gray-900 leading-relaxed whitespace-pre-wrap">
                {selectedContact.message}
              </div>
            </div>

            {/* Status Management Actions */}
            <div className="space-y-3 pt-2 border-t border-gray-200">
              <label className="block text-xs font-black uppercase tracking-wider text-gray-700">
                Update Status & Actions
              </label>
              <div className="flex flex-wrap items-center gap-2">
                <button
                  onClick={() => handleUpdateStatus(selectedContact._id, 'read')}
                  disabled={selectedContact.status === 'read'}
                  className="px-4 py-2 rounded-xl bg-emerald-100 hover:bg-emerald-200 text-emerald-900 font-extrabold text-xs transition border border-emerald-300 disabled:opacity-50 cursor-pointer flex items-center gap-1.5"
                >
                  <CheckCircle className="w-3.5 h-3.5 text-emerald-700" />
                  <span>Mark as Read</span>
                </button>

                <button
                  onClick={() => handleUpdateStatus(selectedContact._id, 'replied')}
                  disabled={selectedContact.status === 'replied'}
                  className="px-4 py-2 rounded-xl bg-indigo-100 hover:bg-indigo-200 text-indigo-900 font-extrabold text-xs transition border border-indigo-300 disabled:opacity-50 cursor-pointer flex items-center gap-1.5"
                >
                  <CheckCheck className="w-3.5 h-3.5 text-indigo-700" />
                  <span>Mark as Replied</span>
                </button>

                <button
                  onClick={() => handleUpdateStatus(selectedContact._id, 'archived')}
                  disabled={selectedContact.status === 'archived'}
                  className="px-4 py-2 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-800 font-extrabold text-xs transition border border-gray-300 disabled:opacity-50 cursor-pointer flex items-center gap-1.5"
                >
                  <Archive className="w-3.5 h-3.5 text-gray-600" />
                  <span>Archive</span>
                </button>

                <a
                  href={`mailto:${selectedContact.email}?subject=Re: ${encodeURIComponent(selectedContact.subject)}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="px-4 py-2 rounded-xl bg-[#FECE00] hover:bg-black text-black hover:text-[#FECE00] font-extrabold text-xs transition shadow-xs cursor-pointer flex items-center gap-1.5 ml-auto"
                >
                  <Send className="w-3.5 h-3.5" />
                  <span>Reply via Email</span>
                </a>
              </div>
            </div>

            {/* Modal Close Footer */}
            <div className="pt-3">
              <button
                onClick={() => setSelectedContact(null)}
                className="w-full py-3 rounded-2xl bg-gray-900 hover:bg-black text-white font-extrabold text-xs transition cursor-pointer"
              >
                Close Window
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Delete Contact Confirmation Modal */}
      <ConfirmDeleteModal
        isOpen={!!deletingContact}
        onClose={() => setDeletingContact(null)}
        onConfirm={handleConfirmDeleteContact}
        loading={deleteLoading}
        title="Delete Contact Submission"
        description={`Are you sure you want to delete submission from "${deletingContact?.name || deletingContact?.email}"? This action cannot be undone.`}
      />
    </div>
  );
}