import { useEffect, useMemo, useState } from "react";
import { Bell, Check, ExternalLink, RefreshCw, Send, XCircle } from "lucide-react";
import {
  ActionBlockerHint,
  AdminIconButton,
  Button,
  ConfirmDialog,
  DismissibleAlert,
  DocumentationHelpLink,
  SegmentedControl,
  SelectionList,
  SelectionListItem,
  StatusBadge,
  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 =
  | "all"
  | "pending"
  | "queued"
  | "sending"
  | "accepted"
  | "paused"
  | "sent"
  | "failed"
  | "skipped"
  | "cancelled";

const statusFilters: StatusFilter[] = [
  "all",
  "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 [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 [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
    : !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
    : !canDispatch
      ? NOTIFICATIONS_I18N.dispatchPermissionRequired
      : undefined;

  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"): Promise<boolean> {
    if (!selected || !canWrite) return false;
    setBusy(true);
    setError("");
    try {
      const next = await updateNotification(settings, selected.id, { status });
      setNotifications((items) => items.map((item) => item.id === next.id ? next : item));
      notifyNotificationsChanged();
      return true;
    } catch (err) {
      setError(errorMessage(err));
      return false;
    } finally {
      setBusy(false);
    }
  }

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

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

  if (!canRead) {
    return (
      <main className="notifications-page">
        <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>
      </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>i18n:govoplan-notifications.notifications</strong>
              {unreadCount > 0 ? <span className="notifications-count">{unreadCount}</span> : null}
            </div>
            <AdminIconButton
              label="i18n:govoplan-notifications.refresh"
              icon={<RefreshCw size={16} aria-hidden="true" />}
              onClick={() => void load()}
              disabled={loading || busy}
              disabledReason={loading ? NOTIFICATIONS_I18N.loading : busy ? NOTIFICATIONS_I18N.actionActive : undefined}
            />
          </div>
          <SegmentedControl
            className="notifications-status-filter"
            options={statusFilters.map((status) => ({ id: status, label: statusLabel(status) }))}
            value={statusFilter}
            onChange={setStatusFilter}
            ariaLabel="i18n:govoplan-notifications.notification_status"
            width="fill"
          />
          <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 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>
        </aside>
        <section className="notifications-workspace">
          <div className="notifications-topbar">
            <div className="notifications-title-line">
              <Bell size={18} />
              <strong>{selected?.subject || selected?.event_kind || "i18n:govoplan-notifications.surface.center"}</strong>
            </div>
            <div className="notifications-actions">
              <DocumentationHelpLink reference={NOTIFICATIONS_DOCUMENTATION} />
              <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 variant="danger" onClick={() => setConfirmingAction("cancel")} disabled={Boolean(cancelDisabledReason)} disabledReason={cancelDisabledReason}>
                <XCircle size={16} /> i18n:govoplan-notifications.cancel_delivery
              </Button>
              <Button onClick={() => setConfirmingAction("dispatch")} disabled={Boolean(dispatchDisabledReason)} disabledReason={dispatchDisabledReason}>
                <Send size={16} /> i18n:govoplan-notifications.dispatch_pending
              </Button>
            </div>
          </div>

          {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} /> : (
            <div className="notifications-empty-state">
              <Bell size={22} />
              <h1>i18n:govoplan-notifications.notifications</h1>
              <p>i18n:govoplan-notifications.select_notification_help</p>
            </div>
          )}
        </section>
      </div>
      <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()}
      />
    </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">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">
        <div className="notifications-section-heading">
          <h2>i18n:govoplan-notifications.delivery_attempts</h2>
          <DocumentationHelpLink reference={NOTIFICATIONS_DELIVERY_DOCUMENTATION} />
        </div>
        {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"));
}