"use client";

import { useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { Icon } from "@/components/ui/Icon";
import { confirmDialog, alertDialog } from "@/components/ui/Dialog";
import { deleteMessageAction, setMessageReadAction } from "@/lib/forms/actions";
import type { MessageDTO } from "@/lib/forms/queries";

function fmt(dt: string): string {
  const d = new Date(dt.replace(" ", "T"));
  if (Number.isNaN(d.getTime())) return dt;
  return d.toLocaleString("de-DE", {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

export function MessagesPanel({
  messages,
  canManage,
}: {
  messages: MessageDTO[];
  canManage: boolean;
}) {
  const router = useRouter();
  const [query, setQuery] = useState("");
  const [onlyUnread, setOnlyUnread] = useState(false);
  const [open, setOpen] = useState<number | null>(null);
  const [busy, setBusy] = useState<number | null>(null);

  const shown = useMemo(() => {
    const q = query.trim().toLowerCase();
    return messages.filter((m) => {
      if (onlyUnread && m.isRead) return false;
      if (!q) return true;
      return (
        m.name.toLowerCase().includes(q) ||
        m.email.toLowerCase().includes(q) ||
        m.subject.toLowerCase().includes(q) ||
        m.message.toLowerCase().includes(q)
      );
    });
  }, [messages, query, onlyUnread]);

  const run = async (id: number, fn: () => Promise<{ error?: string }>) => {
    setBusy(id);
    const res = await fn();
    setBusy(null);
    if (res.error) await alertDialog({ title: "Fehler", message: res.error, danger: true });
    else router.refresh();
  };

  // Beim Aufklappen gilt die Nachricht als gelesen.
  const toggle = (m: MessageDTO) => {
    const next = open === m.id ? null : m.id;
    setOpen(next);
    if (next !== null && !m.isRead && canManage) {
      void run(m.id, () => setMessageReadAction(m.id, true));
    }
  };

  const remove = async (m: MessageDTO) => {
    const ok = await confirmDialog({
      title: `Nachricht von „${m.name}“ löschen?`,
      message: "Die Nachricht wird endgültig aus der gemeinsamen Datenbank entfernt.",
      confirmLabel: "Löschen",
      danger: true,
    });
    if (!ok) return;
    await run(m.id, () => deleteMessageAction(m.id));
  };

  return (
    <>
      <div className="mb-4 flex flex-wrap items-center gap-2">
        <div className="relative min-w-[200px] flex-1">
          <input
            className="input"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Name, E-Mail, Betreff oder Text …"
            style={{ paddingLeft: 38 }}
          />
          <span className="text-muted pointer-events-none absolute left-3 top-1/2 -translate-y-1/2">
            <Icon name="search" size={16} />
          </span>
        </div>
        <button className="pill" data-active={onlyUnread} onClick={() => setOnlyUnread((v) => !v)}>
          <Icon name="bell" size={14} /> Nur ungelesen
        </button>
      </div>

      {shown.length === 0 ? (
        <div className="ui-empty">
          <span className="ui-empty-mark">
            <Icon name={query || onlyUnread ? "search" : "chat"} size={26} />
          </span>
          <p className="ui-empty-title">
            {messages.length === 0 ? "Keine Kontaktnachrichten" : "Keine Treffer"}
          </p>
          <p className="ui-empty-text">
            {messages.length === 0
              ? "Nachrichten aus dem Kontaktformular der Website landen hier."
              : "Passe Suche oder Filter an."}
          </p>
        </div>
      ) : (
        <div className="rc-list">
          {shown.map((m) => {
            const expanded = open === m.id;
            return (
              <article key={m.id} className="rc-item" data-unread={!m.isRead}>
                <button className="rc-head" onClick={() => toggle(m)} aria-expanded={expanded}>
                  {!m.isRead ? <span className="rc-dot" /> : <span style={{ width: 8 }} />}
                  <span className="min-w-0 flex-1">
                    <span className="rc-title block truncate">{m.subject || "Ohne Betreff"}</span>
                    <span className="rc-sub block truncate">
                      {m.name} · {m.email} · {fmt(m.createdAt)}
                    </span>
                  </span>
                  <Icon
                    name="chevron"
                    size={15}
                    className="text-muted shrink-0"
                    style={{ transform: expanded ? "rotate(90deg)" : "none" }}
                  />
                </button>

                {expanded ? (
                  <div className="rc-body">
                    <div className="rc-answer">
                      <span className="rc-answer-label">Nachricht</span>
                      <span className="rc-answer-value">{m.message || "—"}</span>
                    </div>

                    {canManage ? (
                      <div className="rc-actions">
                        <a className="btn btn-ghost btn-sm" href={`mailto:${m.email}`}>
                          <Icon name="mail" size={14} /> Antworten
                        </a>
                        <button
                          className="btn btn-ghost btn-sm"
                          disabled={busy === m.id}
                          onClick={() => void run(m.id, () => setMessageReadAction(m.id, !m.isRead))}
                        >
                          <Icon name={m.isRead ? "bell" : "check"} size={14} />
                          {m.isRead ? "Als ungelesen" : "Als gelesen"}
                        </button>
                        <span className="flex-1" />
                        <button
                          className="btn btn-ghost btn-sm"
                          disabled={busy === m.id}
                          onClick={() => void remove(m)}
                          title="Löschen"
                        >
                          <Icon name="trash" size={14} />
                        </button>
                      </div>
                    ) : null}
                  </div>
                ) : null}
              </article>
            );
          })}
        </div>
      )}
    </>
  );
}