"use client";

import { useEffect, useState, useCallback } from "react";
import AdminLayout from "@/components/admin/AdminLayout";
import {
  MessageIcon,
  TrashIcon,
  CheckIcon,
  SearchIcon,
  XIcon,
  MailIcon,
  ExternalLinkIcon,
} from "@/components/Icons";

interface Message {
  id: number;
  name: string;
  email: string;
  phone: string | null;
  subject: string | null;
  message: string;
  read: boolean | null;
  starred: boolean | null;
  replied: boolean | null;
  createdAt: string;
}

export default function MessagesPage() {
  const [messagesList, setMessagesList] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [filter, setFilter] = useState<"all" | "unread" | "starred">("all");
  const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);

  const fetchMessages = useCallback(async () => {
    try {
      const res = await fetch("/api/admin/messages");
      if (res.ok) {
        const data = await res.json();
        setMessagesList(data.messages);
      }
    } catch (e) {
      console.error(e);
    } finally {
      setLoading(false);
    }
  }, []);

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

  const handleMarkRead = async (id: number) => {
    try {
      await fetch(`/api/admin/messages/${id}`, { method: "PUT" });
      setMessagesList(
        messagesList.map((m) => (m.id === id ? { ...m, read: true } : m))
      );
      if (selectedMessage?.id === id) {
        setSelectedMessage({ ...selectedMessage, read: true });
      }
    } catch (e) {
      console.error(e);
    }
  };

  const handleToggleStar = async (id: number) => {
    const msg = messagesList.find((m) => m.id === id);
    if (!msg) return;
    
    try {
      await fetch(`/api/admin/messages/${id}/star`, { method: "PUT" });
      setMessagesList(
        messagesList.map((m) =>
          m.id === id ? { ...m, starred: !m.starred } : m
        )
      );
    } catch (e) {
      console.error(e);
    }
  };

  const handleDelete = async (id: number) => {
    if (!confirm("Delete this message?")) return;
    
    try {
      await fetch(`/api/admin/messages/${id}`, { method: "DELETE" });
      setMessagesList(messagesList.filter((m) => m.id !== id));
      if (selectedMessage?.id === id) {
        setSelectedMessage(null);
      }
    } catch (e) {
      console.error(e);
    }
  };

  const openMessage = (msg: Message) => {
    setSelectedMessage(msg);
    if (!msg.read) {
      handleMarkRead(msg.id);
    }
  };

  const filtered = messagesList.filter((m) => {
    const matchesSearch =
      !searchQuery ||
      m.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      m.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      m.subject?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      m.message.toLowerCase().includes(searchQuery.toLowerCase());

    const matchesFilter =
      filter === "all" ||
      (filter === "unread" && !m.read) ||
      (filter === "starred" && m.starred);

    return matchesSearch && matchesFilter;
  });

  const unreadCount = messagesList.filter((m) => !m.read).length;
  const starredCount = messagesList.filter((m) => m.starred).length;

  return (
    <AdminLayout>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div>
            <h1 className="text-2xl font-bold text-text-primary">Messages</h1>
            <p className="text-text-muted mt-1">
              {unreadCount > 0 ? `${unreadCount} unread messages` : "All messages read"}
            </p>
          </div>
        </div>

        <div className="grid lg:grid-cols-3 gap-6">
          {/* Messages list */}
          <div className="lg:col-span-1 glass rounded-xl overflow-hidden flex flex-col h-[calc(100vh-220px)]">
            {/* Search and filters */}
            <div className="p-4 border-b border-border space-y-3">
              <div className="relative">
                <SearchIcon
                  size={16}
                  className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted"
                />
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search messages..."
                  className="w-full pl-10 pr-4 py-2 bg-surface border border-border rounded-lg text-sm"
                />
              </div>

              <div className="flex gap-1">
                {[
                  { key: "all", label: "All", count: messagesList.length },
                  { key: "unread", label: "Unread", count: unreadCount },
                  { key: "starred", label: "Starred", count: starredCount },
                ].map((f) => (
                  <button
                    key={f.key}
                    onClick={() => setFilter(f.key as typeof filter)}
                    className={`flex-1 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                      filter === f.key
                        ? "bg-primary text-white"
                        : "bg-surface text-text-muted hover:text-text-primary"
                    }`}
                  >
                    {f.label} ({f.count})
                  </button>
                ))}
              </div>
            </div>

            {/* List */}
            <div className="flex-1 overflow-y-auto">
              {loading ? (
                <div className="p-8 text-center">
                  <div className="animate-spin w-6 h-6 border-2 border-primary border-t-transparent rounded-full mx-auto" />
                </div>
              ) : filtered.length === 0 ? (
                <div className="p-8 text-center">
                  <MessageIcon size={40} className="text-text-muted mx-auto mb-3" />
                  <p className="text-text-muted">No messages found</p>
                </div>
              ) : (
                <div className="divide-y divide-border">
                  {filtered.map((msg) => (
                    <div
                      key={msg.id}
                      onClick={() => openMessage(msg)}
                      className={`p-4 cursor-pointer transition-colors ${
                        selectedMessage?.id === msg.id
                          ? "bg-primary/10 border-l-2 border-l-primary"
                          : "hover:bg-surface-hover"
                      } ${!msg.read ? "bg-surface-elevated" : ""}`}
                    >
                      <div className="flex items-start gap-3">
                        <div className="relative shrink-0">
                          <div
                            className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold ${
                              !msg.read
                                ? "bg-gradient-to-br from-primary to-accent"
                                : "bg-text-muted"
                            }`}
                          >
                            {msg.name.charAt(0).toUpperCase()}
                          </div>
                          {!msg.read && (
                            <span className="absolute -top-0.5 -right-0.5 w-3 h-3 bg-primary rounded-full border-2 border-surface-elevated" />
                          )}
                        </div>
                        <div className="flex-1 min-w-0">
                          <div className="flex items-center justify-between gap-2">
                            <p
                              className={`text-sm truncate ${
                                !msg.read
                                  ? "font-semibold text-text-primary"
                                  : "text-text-secondary"
                              }`}
                            >
                              {msg.name}
                            </p>
                            <div className="flex items-center gap-1 shrink-0">
                              {msg.starred && (
                                <span className="text-amber-400">⭐</span>
                              )}
                              <span className="text-[10px] text-text-muted">
                                {new Date(msg.createdAt).toLocaleDateString()}
                              </span>
                            </div>
                          </div>
                          <p
                            className={`text-xs truncate ${
                              !msg.read
                                ? "font-medium text-text-secondary"
                                : "text-text-muted"
                            }`}
                          >
                            {msg.subject || "No subject"}
                          </p>
                          <p className="text-xs text-text-muted truncate mt-0.5">
                            {msg.message}
                          </p>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>

          {/* Message detail */}
          <div className="lg:col-span-2 glass rounded-xl overflow-hidden flex flex-col h-[calc(100vh-220px)]">
            {selectedMessage ? (
              <>
                {/* Header */}
                <div className="p-6 border-b border-border">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex items-start gap-4">
                      <div className="w-14 h-14 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white text-xl font-bold shrink-0">
                        {selectedMessage.name.charAt(0).toUpperCase()}
                      </div>
                      <div>
                        <h2 className="text-lg font-bold text-text-primary">
                          {selectedMessage.name}
                        </h2>
                        <div className="flex items-center gap-2 mt-1">
                          <a
                            href={`mailto:${selectedMessage.email}`}
                            className="text-sm text-primary-light hover:text-accent flex items-center gap-1"
                          >
                            <MailIcon size={12} />
                            {selectedMessage.email}
                          </a>
                          {selectedMessage.phone && (
                            <span className="text-sm text-text-muted">
                              | {selectedMessage.phone}
                            </span>
                          )}
                        </div>
                        <p className="text-xs text-text-muted mt-1">
                          {new Date(selectedMessage.createdAt).toLocaleString()}
                        </p>
                      </div>
                    </div>
                    <div className="flex items-center gap-1">
                      <button
                        onClick={() => handleToggleStar(selectedMessage.id)}
                        className={`p-2 rounded-lg transition-colors ${
                          selectedMessage.starred
                            ? "text-amber-400 bg-amber-500/10"
                            : "text-text-muted hover:text-text-primary hover:bg-white/5"
                        }`}
                        title="Star"
                      >
                        {selectedMessage.starred ? "⭐" : "☆"}
                      </button>
                      <a
                        href={`mailto:${selectedMessage.email}?subject=Re: ${selectedMessage.subject || ""}`}
                        className="p-2 text-text-muted hover:text-primary-light rounded-lg hover:bg-white/5 transition-colors"
                        title="Reply"
                      >
                        <ExternalLinkIcon size={16} />
                      </a>
                      <button
                        onClick={() => handleDelete(selectedMessage.id)}
                        className="p-2 text-text-muted hover:text-danger rounded-lg hover:bg-danger/10 transition-colors"
                        title="Delete"
                      >
                        <TrashIcon size={16} />
                      </button>
                      <button
                        onClick={() => setSelectedMessage(null)}
                        className="p-2 text-text-muted hover:text-text-primary rounded-lg hover:bg-white/5 transition-colors lg:hidden"
                      >
                        <XIcon size={16} />
                      </button>
                    </div>
                  </div>

                  {selectedMessage.subject && (
                    <div className="mt-4 pt-4 border-t border-border">
                      <h3 className="text-xl font-semibold text-text-primary">
                        {selectedMessage.subject}
                      </h3>
                    </div>
                  )}
                </div>

                {/* Body */}
                <div className="flex-1 overflow-y-auto p-6">
                  <div className="prose prose-invert max-w-none">
                    <p className="text-text-secondary leading-relaxed whitespace-pre-wrap">
                      {selectedMessage.message}
                    </p>
                  </div>
                </div>

                {/* Actions */}
                <div className="p-4 border-t border-border flex items-center gap-3">
                  <a
                    href={`mailto:${selectedMessage.email}?subject=Re: ${selectedMessage.subject || ""}`}
                    className="flex-1 py-2.5 bg-gradient-to-r from-primary to-primary-light text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-primary/25 transition-all text-center text-sm"
                  >
                    Reply via Email
                  </a>
                  <a
                    href={`https://wa.me/${selectedMessage.phone?.replace(/\D/g, "") || ""}`}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="py-2.5 px-6 bg-green-500 text-white font-semibold rounded-xl hover:bg-green-600 transition-colors text-sm"
                  >
                    💬 WhatsApp
                  </a>
                </div>
              </>
            ) : (
              <div className="flex-1 flex items-center justify-center">
                <div className="text-center">
                  <MessageIcon size={48} className="text-text-muted mx-auto mb-4" />
                  <p className="text-text-muted text-lg">Select a message to read</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </AdminLayout>
  );
}