import { useEffect, useMemo, useState } from "react";
import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
import { AdminIconButton, Button, DismissibleAlert, SegmentedControl, SelectionList, SelectionListItem, StatusBadge, hasScope, type ApiSettings, type AuthInfo } from "@govoplan/core-webui";
import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
import { safeNotificationActionUrl } from "../../security/actionUrl";

type StatusFilter =
  | "all"
  | "pending"
  | "queued"
  | "sending"
  | "accepted"
  | "paused"
  | "sent"
  | "failed"
  | "skipped"
  | "cancelled";

const statusFilters: StatusFilter[] = [
  "all",
  "pending",
  "queued",
  "sending",
  "accepted",
  "paused",
  "sent",
  "failed",
  "skipped",
  "cancelled"
];

export default function NotificationCenterPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
  const [notifications, setNotifications] = useState<NotificationMessage[]>([]);
  const [selectedId, setSelectedId] = useState("");
  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");

  const canRead = hasScope(auth, "notifications:notification:read");
  const canWrite = hasScope(auth, "notifications:notification:write");
  const canDispatch = hasScope(auth, "notifications:delivery:dispatch");
  const selected = useMemo(() => notifications.find((item) => item.id === selectedId) || notifications[0] || null, [notifications, selectedId]);
  const unreadCount = notifications.filter((item) => !item.read_at && !["cancelled", "skipped"].includes(item.status)).length;

  useEffect(() => {
    if (!canRead) {
      setLoading(false);
      return;
    }
    void load();
  }, [canRead, settings.apiBaseUrl, settings.apiKey, settings.accessToken, statusFilter]);

  async function load() {
    setLoading(true);
    setError("");
    try {
      const response = await listNotifications(settings, {
        status: statusFilter === "all" ? undefined : statusFilter,
        limit: 200
      });
      setNotifications(response.notifications);
      setSelectedId((current) => current && response.notifications.some((item) => item.id === current) ? current : response.notifications[0]?.id ?? "");
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setLoading(false);
    }
  }

  async function markSelected(status: "read" | "acknowledged" | "cancelled") {
    if (!selected || !canWrite) return;
    setBusy(true);
    setError("");
    try {
      const next = await updateNotification(settings, selected.id, { status });
      setNotifications((items) => items.map((item) => item.id === next.id ? next : item));
      notifyNotificationsChanged();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusy(false);
    }
  }

  async function runDelivery() {
    if (!canDispatch) return;
    setBusy(true);
    setError("");
    try {
      await deliverPendingNotifications(settings, 50);
      await load();
      notifyNotificationsChanged();
    } catch (err) {
      setError(errorMessage(err));
    } finally {
      setBusy(false);
    }
  }

  if (!canRead) {
    return (
      <main className="notifications-page">
        <div className="notifications-empty-state">
          <Bell size={22} />
          <h1>Notifications</h1>
          <p>You do not have permission to read notifications in this tenant.</p>
        </div>
      </main>
    );
  }

  return (
    <main className="notifications-page">
      <div className="notifications-shell">
        <aside className="notifications-sidebar">
          <div className="notifications-sidebar-bar">
            <div className="notifications-title">
              <Bell size={17} />
              <strong>Notifications</strong>
              {unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
            </div>
            <AdminIconButton label="Refresh" icon={<RefreshCw size={16} aria-hidden="true" />} onClick={() => void load()} disabled={loading || busy} />
          </div>
          <SegmentedControl
            className="notifications-status-filter"
            options={statusFilters.map((status) => ({ id: status, label: status }))}
            value={statusFilter}
            onChange={setStatusFilter}
            ariaLabel="Notification status"
            width="fill"
          />
          <div className="notifications-list">
            {loading ? <div className="notifications-note">Loading notifications</div> : null}
            {!loading && notifications.length === 0 ? <div className="notifications-note">No notifications in this view.</div> : null}
            {notifications.length > 0 ? (
              <SelectionList label="Notifications" className="notifications-selection-list">
                {notifications.map((notification) => (
                  <SelectionListItem
                    key={notification.id}
                    selected={selected?.id === notification.id}
                    className={`notifications-list-item ${notification.read_at ? "is-read" : ""}`}
                    onClick={() => setSelectedId(notification.id)}
                  >
                    <span className="notifications-list-heading">
                      <strong>{notification.subject || notification.event_kind}</strong>
                      <small>{formatStatus(notification.status)}</small>
                    </span>
                    <span className="notifications-list-meta">
                      <span>{notification.source_module}</span>
                      <span>{formatDate(notification.created_at)}</span>
                    </span>
                  </SelectionListItem>
                ))}
              </SelectionList>
            ) : null}
          </div>
        </aside>
        <section className="notifications-workspace">
          <div className="notifications-topbar">
            <div className="notifications-title-line">
              <Bell size={18} />
              <strong>{selected?.subject || selected?.event_kind || "Notification center"}</strong>
            </div>
            <div className="notifications-actions">
              <Button onClick={() => void markSelected("read")} disabled={!selected || busy || !canWrite}>
                <Check size={16} /> Mark read
              </Button>
              <Button onClick={() => void markSelected("acknowledged")} disabled={!selected || busy || !canWrite}>
                <Check size={16} /> Acknowledge
              </Button>
              <Button onClick={() => void markSelected("cancelled")} disabled={!selected || busy || !canWrite}>
                <XCircle size={16} /> Cancel
              </Button>
              {canDispatch ? (
                <Button onClick={() => void runDelivery()} disabled={busy}>
                  <Send size={16} /> Dispatch pending
                </Button>
              ) : null}
            </div>
          </div>

          {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}

          {selected ? <NotificationDetails notification={selected} /> : (
            <div className="notifications-empty-state">
              <Bell size={22} />
              <h1>Notifications</h1>
              <p>Select a notification to inspect delivery state, source context, and content.</p>
            </div>
          )}
        </section>
      </div>
    </main>
  );
}

function NotificationDetails({ notification }: { notification: NotificationMessage }) {
  const actionUrl = safeNotificationActionUrl(notification.action_url);
  return (
    <div className="notifications-detail">
      <section className="notifications-message">
        <div className="notifications-message-meta">
          <StatusBadge status={notification.status} label={formatStatus(notification.status)} />
          <span>{notification.channel}</span>
          <span>{formatDate(notification.created_at)}</span>
        </div>
        <h1>{notification.subject || notification.event_kind}</h1>
        {notification.body_text ? <p>{notification.body_text}</p> : <p className="muted">No message body was provided.</p>}
        {actionUrl ? (
          <a className="notifications-action-link" href={actionUrl}>
            <ExternalLink size={16} /> Open related item
          </a>
        ) : null}
      </section>

      <section className="notifications-properties">
        <h2>Source and delivery</h2>
        <dl>
          <div><dt>Source</dt><dd>{notification.source_module} / {notification.source_resource_type}</dd></div>
          <div><dt>Resource</dt><dd>{notification.source_resource_id || "None"}</dd></div>
          <div><dt>Recipient</dt><dd>{notification.recipient_label || notification.recipient || notification.recipient_id || "None"}</dd></div>
          <div><dt>Priority</dt><dd>{notification.priority}</dd></div>
          <div><dt>Queued</dt><dd>{formatDate(notification.queued_at)}</dd></div>
          <div><dt>Sent</dt><dd>{formatDate(notification.sent_at)}</dd></div>
          <div><dt>Read</dt><dd>{formatDate(notification.read_at)}</dd></div>
          <div><dt>Attempts</dt><dd>{notification.attempt_count}</dd></div>
        </dl>
        {notification.last_error ? <p className="notifications-error">{notification.last_error}</p> : null}
      </section>

      <section className="notifications-attempts">
        <h2>Delivery attempts</h2>
        {notification.attempts.length === 0 ? <p className="muted">No delivery attempt has been recorded yet.</p> : null}
        {notification.attempts.map((attempt) => (
          <div className="notifications-attempt" key={attempt.id}>
            <strong>{attempt.provider || attempt.channel}</strong>
            <span>{formatStatus(attempt.status)}</span>
            <small>{formatDate(attempt.started_at)} - {formatDate(attempt.finished_at)}</small>
            {attempt.error ? <p>{attempt.error}</p> : null}
          </div>
        ))}
      </section>
    </div>
  );
}

function formatStatus(value: string): string {
  return value.replace(/_/g, " ");
}

function formatDate(value?: string | null): string {
  if (!value) return "Not set";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return value;
  return new Intl.DateTimeFormat(undefined, {
    dateStyle: "medium",
    timeStyle: "short"
  }).format(date);
}

function errorMessage(error: unknown): string {
  return error instanceof Error ? error.message : "Request failed";
}

function notifyNotificationsChanged(): void {
  window.dispatchEvent(new CustomEvent("govoplan:notifications-changed"));
}