"use client";

import { useEffect, useState, useCallback } from "react";
import { api } from "@/app/adminx/admin-api";
import { Card, Button, Badge, SectionTitle } from "@/app/adminx/ui";
import { formatDateTime } from "@/lib/utils";

interface Message {
  id: number;
  name: string;
  email: string;
  subject: string;
  message: string;
  ip: string;
  read: boolean;
  createdAt: string;
}

export function MessagesSection() {
  const [items, setItems] = useState<Message[]>([]);
  const [open, setOpen] = useState<number | null>(null);

  const load = useCallback(async () => {
    const data = await api.get("messages");
    setItems(data.messages);
  }, []);

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

  async function markRead(m: Message, read: boolean) {
    await api.put(`messages?id=${m.id}`, { read });
    await load();
  }

  async function remove(m: Message) {
    if (!confirm("Delete this message?")) return;
    await api.del(`messages?id=${m.id}`);
    await load();
  }

  return (
    <div>
      <SectionTitle title="Contact Messages" />
      {items.length === 0 ? (
        <Card className="p-10 text-center text-sm text-slate-500">No messages yet.</Card>
      ) : (
        <div className="space-y-3">
          {items.map((m) => (
            <Card key={m.id} className="overflow-hidden">
              <button
                className="flex w-full items-center gap-3 px-4 py-3 text-left hover:bg-slate-50"
                onClick={() => {
                  setOpen(open === m.id ? null : m.id);
                  if (!m.read) markRead(m, true);
                }}
              >
                <div className={`h-2 w-2 shrink-0 rounded-full ${m.read ? "bg-slate-200" : "bg-indigo-500"}`} />
                <div className="min-w-0 flex-1">
                  <div className="flex items-center gap-2">
                    <span className="font-medium text-slate-900">{m.name}</span>
                    <span className="text-xs text-slate-400">{m.email}</span>
                    {!m.read && <Badge color="indigo">new</Badge>}
                  </div>
                  <p className="truncate text-sm text-slate-500">{m.subject || m.message}</p>
                </div>
                <span className="hidden shrink-0 text-xs text-slate-400 sm:block">{formatDateTime(m.createdAt)}</span>
              </button>
              {open === m.id && (
                <div className="border-t border-slate-100 px-4 py-4">
                  {m.subject && <p className="mb-2 font-medium text-slate-800">{m.subject}</p>}
                  <p className="whitespace-pre-wrap text-sm leading-relaxed text-slate-600">{m.message}</p>
                  <div className="mt-4 flex justify-between">
                    <a href={`mailto:${m.email}`} className="text-sm font-medium text-indigo-600 hover:underline">
                      Reply to {m.email}
                    </a>
                    <Button variant="ghost" className="text-red-600 hover:bg-red-50" onClick={() => remove(m)}>
                      Delete
                    </Button>
                  </div>
                </div>
              )}
            </Card>
          ))}
        </div>
      )}
    </div>
  );
}