import { useEffect, useMemo, useRef, useState } from "react";
import { Bell, Check, ExternalLink, Send, XCircle } from "lucide-react";
import {
  ActionBlockerHint,
  ActionToolbar,
  Button,
  ConfirmDialog,
  CountBadge,
  DismissibleAlert,
  DocumentationHelpLink,
  MultiSelectFilter,
  SelectionList,
  SelectionListItem,
  StatePanel,
  StatusBadge,
  WorkspaceActionBar,
  WorkspaceFrame,
  WorkspaceLayout,
  hasScope,
  i18nMessage,
  type ApiSettings,
  type AuthInfo
} from "@govoplan/core-webui";
import { deliverPendingNotifications, listNotifications, updateNotification, type NotificationMessage } from "../../api/notifications";
import { safeNotificationActionUrl } from "../../security/actionUrl";
import {
  NOTIFICATIONS_BLOCKER_LABELS,
  NOTIFICATIONS_DELIVERY_DOCUMENTATION,
  NOTIFICATIONS_DOCUMENTATION,
  NOTIFICATIONS_I18N
} from "./interfacePatterns";

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

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

const cancellableStatuses = new Set(["pending", "queued", "paused", "failed"]);

export default function NotificationCenterPage({ settings, auth }: { settings: ApiSettings; auth: AuthInfo }) {
  const scopeKey = JSON.stringify([settings.apiBaseUrl, settings.apiKey, settings.accessToken, auth.tenant.id, auth.user.id, auth.scopes]);
  const currentScope = useRef(scopeKey);
  const scopeGeneration = useRef(0);
  if (currentScope.current !== scopeKey) {
    currentScope.current = scopeKey;
    scopeGeneration.current += 1;
  }
  const generation = scopeGeneration.current;
  const isCurrentScope = () => currentScope.current === scopeKey && scopeGeneration.current === generation;
  const operationScope = useRef<string | null>(null);
  const [loadedScope, setLoadedScope] = useState(scopeKey);
  const [loadedNotifications, setNotifications] = useState<NotificationMessage[]>([]);
  const notifications = loadedScope === scopeKey ? loadedNotifications : [];
  const [selectedId, setSelectedId] = useState("");
  const [statusFilter, setStatusFilter] = useState<string[] | null>(null);
  const loadRequest = useRef<AbortController | null>(null);
  const [loading, setLoading] = useState(true);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  const [confirmingAction, setConfirmingAction] = useState<"cancel" | "dispatch" | null>(null);

  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;
  const commonSelectionReason = busy
    ? NOTIFICATIONS_I18N.actionActive
    : loading
      ? "i18n:govoplan-notifications.loading_notifications"
      : !selected
        ? NOTIFICATIONS_I18N.selectionRequired
        : !canWrite
          ? NOTIFICATIONS_I18N.writePermissionRequired
          : undefined;
  const markReadDisabledReason = commonSelectionReason ?? (selected?.read_at ? NOTIFICATIONS_I18N.alreadyRead : undefined);
  const acknowledgeDisabledReason = commonSelectionReason ?? (selected?.acknowledged_at ? NOTIFICATIONS_I18N.alreadyAcknowledged : undefined);
  const cancelDisabledReason = commonSelectionReason ?? (selected && !cancellableStatuses.has(selected.status) ? NOTIFICATIONS_I18N.notCancellable : undefined);
  const dispatchDisabledReason = busy
    ? NOTIFICATIONS_I18N.actionActive
    : loading
      ? "i18n:govoplan-notifications.loading_notifications"
      : !canDispatch
        ? NOTIFICATIONS_I18N.dispatchPermissionRequired
        : undefined;

  useEffect(() => {
    operationScope.current = null;
    setBusy(false);
    setConfirmingAction(null);
  }, [scopeKey]);

  useEffect(() => {
    if (!canRead) {
      loadRequest.current?.abort();
      setNotifications([]);
      setSelectedId("");
      setLoading(false);
      return;
    }
    void load();
    return () => loadRequest.current?.abort();
  }, [canRead, scopeKey, statusFilter]);

  async function load() {
    if (!isCurrentScope() || !canRead) return;
    loadRequest.current?.abort();
    const request = new AbortController();
    loadRequest.current = request;
    setLoading(true);
    setError("");
    try {
      const response = await listNotifications(settings, {
        status: statusFilter ?? undefined,
        limit: 200
      }, request.signal);
      if (request.signal.aborted || !isCurrentScope()) return;
      setLoadedScope(scopeKey);
      setNotifications(response.notifications);
      setSelectedId((current) => current && response.notifications.some((item) => item.id === current) ? current : response.notifications[0]?.id ?? "");
    } catch (err) {
      if (!request.signal.aborted && isCurrentScope()) setError(errorMessage(err));
    } finally {
      if (!request.signal.aborted && isCurrentScope()) setLoading(false);
    }
  }

  async function markSelected(status: "read" | "acknowledged" | "cancelled"): Promise<boolean> {
    if (!selected || !canWrite || loading || operationScope.current === scopeKey) return false;
    operationScope.current = scopeKey;
    loadRequest.current?.abort();
    setBusy(true);
    setError("");
    try {
      const next = await updateNotification(settings, selected.id, { status });
      if (!isCurrentScope()) return false;
      setNotifications((items) => items.map((item) => item.id === next.id ? next : item)
        .filter((item) => statusFilter === null || statusFilter.includes(item.status)));
      notifyNotificationsChanged();
      return true;
    } catch (err) {
      if (isCurrentScope()) setError(errorMessage(err));
      return false;
    } finally {
      if (isCurrentScope()) {
        operationScope.current = null;
        setBusy(false);
      }
    }
  }

  async function runDelivery(): Promise<boolean> {
    if (!canDispatch || loading || operationScope.current === scopeKey) return false;
    operationScope.current = scopeKey;
    loadRequest.current?.abort();
    setBusy(true);
    setError("");
    try {
      await deliverPendingNotifications(settings, 50);
      if (!isCurrentScope()) return false;
      await load();
      if (!isCurrentScope()) return false;
      notifyNotificationsChanged();
      return true;
    } catch (err) {
      if (isCurrentScope()) setError(errorMessage(err));
      return false;
    } finally {
      if (isCurrentScope()) {
        operationScope.current = null;
        setBusy(false);
      }
    }
  }

  async function confirmAction() {
    const succeeded = confirmingAction === "cancel"
      ? await markSelected("cancelled")
      : confirmingAction === "dispatch"
        ? await runDelivery()
        : false;
    if (succeeded) setConfirmingAction(null);
  }

  if (!canRead) {
    return (
      <WorkspaceFrame as="main" height="viewport" surface="plain" className="notifications-page" label="Notification center">
        <div className="notifications-permission-state">
          <ActionBlockerHint
            tone="warning"
            reason={{
              summary: "i18n:govoplan-notifications.read_blocked_summary",
              details: NOTIFICATIONS_I18N.readPermissionRequired,
              requiredAction: "i18n:govoplan-notifications.permission_action",
              actor: "i18n:govoplan-notifications.permission_actor",
              target: "i18n:govoplan-notifications.permission_target"
            }}
            labels={NOTIFICATIONS_BLOCKER_LABELS}
            documentation={NOTIFICATIONS_DOCUMENTATION}
          />
        </div>
      </WorkspaceFrame>
    );
  }

  return (
    <WorkspaceFrame as="main" height="viewport" surface="plain" className="notifications-page" label="Notification center">
      <WorkspaceLayout
        variant="split"
        primarySize="default"
        primaryScrollable={false}
        contentScrollable={false}
        surface="contained"
        primaryClassName="notifications-sidebar"
        contentClassName="notifications-workspace"
        primaryLabel="i18n:govoplan-notifications.notifications"
        contentLabel="i18n:govoplan-notifications.surface.center"
        interfaceId="notifications.center.workspace"
        helpContextId="notifications.page.center"
        helpModuleId="notifications"
        primary={<>
          <WorkspaceActionBar
            scope="collection-pane"
            variant="collection"
            refreshable
            reloadAction={{ onReload: () => void load(), loading: loading || busy, label: "i18n:govoplan-notifications.refresh" }}
            className="notifications-sidebar-bar"
            contextActions={<div className="notifications-title">
              <Bell size={17} />
              <strong>i18n:govoplan-notifications.notifications</strong>
              {unreadCount > 0 ? <CountBadge>{unreadCount}</CountBadge> : null}
            </div>}
          />
          <MultiSelectFilter
            className="notifications-status-filter"
            options={statusFilters.map((status) => ({ value: status, label: statusLabel(status) }))}
            value={statusFilter}
            onChange={setStatusFilter}
            label="i18n:govoplan-notifications.notification_status"
            disabled={busy}
          />
          <div className="notifications-list">
            {loading ? <div className="notifications-note">i18n:govoplan-notifications.loading_notifications</div> : null}
            {!loading && notifications.length === 0 ? <div className="notifications-note">i18n:govoplan-notifications.no_notifications</div> : null}
            {notifications.length > 0 ? (
              <SelectionList variant="navigation" label="i18n:govoplan-notifications.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>
        </>}
      >
          <WorkspaceActionBar
            scope="detail-pane"
            variant="detail"
            className="notifications-topbar"
            contextActions={<div className="notifications-title-line">
              <Bell size={18} />
              <strong>{selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.surface.center"}</strong>
            </div>}
            helpAction={<DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />}
            primaryActions={<div className="notifications-actions">
              <Button onClick={() => void markSelected("read")} disabled={Boolean(markReadDisabledReason)} disabledReason={markReadDisabledReason}>
                <Check size={16} /> i18n:govoplan-notifications.mark_read
              </Button>
              <Button onClick={() => void markSelected("acknowledged")} disabled={Boolean(acknowledgeDisabledReason)} disabledReason={acknowledgeDisabledReason}>
                <Check size={16} /> i18n:govoplan-notifications.acknowledge
              </Button>
              <Button onClick={() => setConfirmingAction("dispatch")} disabled={Boolean(dispatchDisabledReason)} disabledReason={dispatchDisabledReason}>
                <Send size={16} /> i18n:govoplan-notifications.dispatch_pending
              </Button>
            </div>}
            destructiveActions={<Button variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
              <XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
            </Button>}
          />

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

          {selected && !canWrite ? (
            <ActionBlockerHint
              tone="info"
              reason={{
                summary: "i18n:govoplan-notifications.actions_read_only_summary",
                details: NOTIFICATIONS_I18N.writePermissionRequired,
                requiredAction: "i18n:govoplan-notifications.permission_action",
                actor: "i18n:govoplan-notifications.permission_actor",
                target: "i18n:govoplan-notifications.permission_target"
              }}
              labels={NOTIFICATIONS_BLOCKER_LABELS}
              documentation={NOTIFICATIONS_DOCUMENTATION}
            />
          ) : null}

          {selected ? <NotificationDetails notification={selected} /> : (
            <StatePanel size="fill" icon={<Bell size={22} />} title="i18n:govoplan-notifications.notifications" description="i18n:govoplan-notifications.select_notification_help" />
          )}
      </WorkspaceLayout>
      <ConfirmDialog
        open={confirmingAction === "cancel"}
        title="i18n:govoplan-notifications.cancel_delivery_title"
        message={i18nMessage("i18n:govoplan-notifications.cancel_delivery_message", { value0: selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.selected_notification" })}
        confirmLabel="i18n:govoplan-notifications.cancel_delivery"
        tone="danger"
        busy={busy}
        onCancel={() => setConfirmingAction(null)}
        onConfirm={() => void confirmAction()}
      />
      <ConfirmDialog
        open={confirmingAction === "dispatch"}
        title="i18n:govoplan-notifications.dispatch_pending_title"
        message="i18n:govoplan-notifications.dispatch_pending_message"
        confirmLabel="i18n:govoplan-notifications.dispatch_pending"
        busy={busy}
        onCancel={() => setConfirmingAction(null)}
        onConfirm={() => void confirmAction()}
      />
    </WorkspaceFrame>
  );
}

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">i18n:govoplan-notifications.no_message_body</p>}
        {actionUrl ? (
          <a className="notifications-action-link" href={actionUrl}>
            <ExternalLink size={16} /> i18n:govoplan-notifications.open_related_item
          </a>
        ) : null}
      </section>

      <section className="notifications-properties">
        <h2>i18n:govoplan-notifications.source_and_delivery</h2>
        <dl>
          <div><dt>i18n:govoplan-notifications.source</dt><dd>{notification.source_module} / {notification.source_resource_type}</dd></div>
          <div><dt>i18n:govoplan-notifications.resource</dt><dd>{notification.source_resource_id || "i18n:govoplan-notifications.none"}</dd></div>
          <div><dt>i18n:govoplan-notifications.recipient</dt><dd>{notification.recipient_label || notification.recipient || notification.recipient_id || "i18n:govoplan-notifications.none"}</dd></div>
          <div><dt>i18n:govoplan-notifications.priority</dt><dd>{notification.priority}</dd></div>
          <div><dt>i18n:govoplan-notifications.queued</dt><dd>{formatDate(notification.queued_at)}</dd></div>
          <div><dt>i18n:govoplan-notifications.sent</dt><dd>{formatDate(notification.sent_at)}</dd></div>
          <div><dt>i18n:govoplan-notifications.read</dt><dd>{formatDate(notification.read_at)}</dd></div>
          <div><dt>i18n:govoplan-notifications.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">
        <ActionToolbar surface="section-header" className="notifications-section-heading">
          <h2>i18n:govoplan-notifications.delivery_attempts</h2>
          <DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
        </ActionToolbar>
        {notification.attempts.length === 0 ? <p className="muted">i18n:govoplan-notifications.no_delivery_attempt</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 statusLabel(value);
}

function statusLabel(value: string): string {
  return `i18n:govoplan-notifications.status.${value.replace(/[^a-z0-9]+/gi, "_").toLowerCase()}`;
}

function formatDate(value?: string | null): string {
  if (!value) return "i18n:govoplan-notifications.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 : "i18n:govoplan-notifications.request_failed";
}

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