// =============================================================================
// admin.scss — Comment Mention settings page
// All styles scoped under .cmt-mntn to avoid wp-admin conflicts.
// =============================================================================

@use "variables" as *;
@use "sass:color";

#cmt-mntn-admin-page {
	margin-left: -18px;

	.cmt-mntn-wrap {
		font-family: $font-stack;
		font-size: $font-size-base;
		color: $wp-text;
	}

	// =============================================================================
	// PLUGIN HEADER
	// =============================================================================

	.cmt-mntn-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		padding: 0 $space-xl;
		background: $wp-white;
		border-bottom: 1px solid $wp-border-light;

		&__brand {
			display: flex;
			align-items: center;
			gap: $space-md;
		}

		&__icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			background: $wp-blue;
			border-radius: 50%;
			flex-shrink: 0;

			// @wordpress/icons renders SVGs — color them white
			svg {
				fill: $wp-white;
				width: 18px;
				height: 18px;
			}
		}

		&__title {
			// Override WP's h1 inside .wrap
			font-size: $font-size-lg;
			font-weight: 400;
			color: $wp-text;
			margin: 0;
			padding: 0;
			line-height: 1;
			border: none;
		}

		&__version {
			display: inline-block;
			margin-left: $space-sm;
			font-size: $font-size-xs;
			font-weight: 400;
			color: $wp-text-muted;
			vertical-align: middle;
		}

		&__links {
			display: flex;
			align-items: center;
			gap: $space-lg;
		}

		&__link {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			font-size: $font-size-base;
			color: $wp-text-subtle;
			text-decoration: none;
			transition: color $transition-fast;

			svg {
				width: 15px;
				height: 15px;
				flex-shrink: 0;
			}

			&:hover,
			&:focus {
				color: $wp-blue;
			}
		}
	}

	// =============================================================================
	// PAGE BODY
	// =============================================================================

	.cmt-mntn-body {
		display: grid;
		grid-template-columns: 1fr $sidebar-width;
		gap: $content-gap;
		padding: $space-xl;
		align-items: start;
	}

	// =============================================================================
	// MAIN SETTINGS CARD
	// =============================================================================

	.cmt-mntn-card {
		background: $wp-white;
		border: 1px solid $wp-border-light;
		border-radius: $border-radius;

		&__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $space-base $space-lg;
			border-bottom: 1px solid $wp-border-light;
			gap: $space-md;
		}

		&__title {
			font-size: $font-size-md;
			font-weight: 600;
			color: $wp-text;
			margin: 0;
		}

		&__actions {
			display: flex;
			align-items: center;
			gap: $space-md;
			flex-shrink: 0;
		}
	}

	// Saved / error inline notice next to the save button
	.cmt-mntn-save-notice {
		display: inline-flex;
		align-items: center;
		gap: $space-xs;
		font-size: $font-size-sm;
		opacity: 0;
		transform: translateY(3px);
		transition:
			opacity $transition-base,
			transform $transition-base;
		pointer-events: none;

		svg {
			width: 14px;
			height: 14px;
			flex-shrink: 0;
		}

		&--success {
			color: $wp-green;

			svg {
				fill: $wp-green;
			}
		}

		&--error {
			color: $wp-red;

			svg {
				fill: $wp-red;
			}
		}

		&.is-visible {
			opacity: 1;
			transform: translateY(0);
		}
	}

	// =============================================================================
	// SETTINGS SECTIONS
	// =============================================================================

	.cmt-mntn-section {
		padding: $space-lg;
		border-bottom: 1px solid $wp-border-faint;

		&:last-child {
			border-bottom: none;
		}

		&__heading {
			display: flex;
			align-items: center;
			gap: $space-sm;
			margin-bottom: $space-sm;

			svg {
				fill: $wp-blue; // give the icon some color
				width: 16px;
				height: 16px;
				flex-shrink: 0;
			}
		}

		&__title {
			font-size: $font-size-md; // 14px — readable heading size
			font-weight: 600;
			color: $wp-text; // #1d2327 — full contrast
			text-transform: none; // drop the uppercase
			letter-spacing: 0; // drop the tracking
			margin: 0;
		}

		&__description {
			font-size: $font-size-sm;
			color: $wp-text-subtle;
			line-height: 1.6;
			margin: 0 0 $space-base;
		}

		&__footer {
			margin-top: $space-base;
			padding-top: $space-base;
			border-top: 1px solid $wp-border-faint;
		}
	}

	// =============================================================================
	// SETTING ROW
	// =============================================================================

	.cmt-mntn-setting-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: $space-lg;
		padding: $space-md 0;

		& + & {
			border-top: 1px solid $wp-border-faint;
		}

		&:first-child {
			padding-top: 0;
		}

		&__info {
			flex: 1;
			min-width: 0;
		}

		&__label {
			font-size: $font-size-base;
			font-weight: 500;
			color: $wp-text;
			margin-bottom: 3px;
		}

		&__desc {
			font-size: $font-size-sm;
			color: $wp-text-subtle;
			line-height: 1.5;
		}

		&__control {
			flex-shrink: 0;
			margin-top: 2px;
		}
	}

	// Strip ToggleControl's own label/help when we use our own setting-row layout
	.cmt-mntn-toggle-only {
		.components-toggle-control {
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			gap: $space-md;
			margin-bottom: 0;
		}

		.components-toggle-control__label {
			font-size: $font-size-base;
			font-weight: 500;
			color: $wp-text;
			margin-bottom: 0;
		}

		.components-base-control__help {
			display: none;
		}
	}

	// =============================================================================
	// ROLE CHIPS
	// =============================================================================

	.cmt-mntn-role-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
		gap: 6px;
	}

	.cmt-mntn-role-chip {
		display: flex;
		align-items: center;
		gap: 7px;
		padding: $space-sm $space-md;
		border: 1px solid $wp-border;
		border-radius: $border-radius-sm;
		cursor: pointer;
		background: $wp-white;
		transition:
			border-color $transition-fast,
			background $transition-fast;
		user-select: none;

		input[type="checkbox"] {
			margin: 0;
			width: 14px;
			height: 14px;
			accent-color: $wp-blue;
			flex-shrink: 0;
			cursor: pointer;
		}

		&__label {
			font-size: $font-size-sm;
			color: $wp-text;
			line-height: 1;
		}

		&:hover {
			border-color: $wp-blue;
			background: $wp-blue-tint;
		}

		&.is-checked {
			border-color: $wp-blue;
			background: $wp-blue-tint;
		}
	}

	// =============================================================================
	// SHORTCODE PILLS (reference tags under fields)
	// =============================================================================

	.cmt-mntn-shortcodes {
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		margin-top: 6px;
	}

	.cmt-mntn-shortcode {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 2px $space-sm;
		background: #f6f7f7;
		border: 1px solid $wp-border-light;
		border-radius: $border-radius-sm;
		font-size: $font-size-xs;
		line-height: 1.5;

		code {
			font-family: Consolas, "Courier New", monospace;
			font-size: $font-size-xs;
			color: $wp-blue;
			background: none;
			padding: 0;
		}

		&__desc {
			color: $wp-text-subtle;
		}
	}

	// =============================================================================
	// RictTextEditor
	// =============================================================================

	// Collapsible field group (email fields shown/hidden based on toggle)
	.cmt-mntn-field-group {
		display: flex;
		flex-direction: column;
		gap: $space-md;
		margin-top: $space-base;
		padding-top: $space-base;
		border-top: 1px solid $wp-border-faint;

		.components-base-control {
			margin-bottom: 0;
		}
	}

	.cmt-mntn-rte {
		.mce-tinymce {
			width: 100% !important;
			background: $wp-white;
			border: 1px solid $wp-border !important;
			border-radius: $border-radius;
			box-shadow: none !important;
			overflow: hidden;
			transition:
				border-color $transition-fast,
				box-shadow $transition-fast;
		}

		.mce-tinymce:focus-within {
			border-color: $wp-blue;
			box-shadow: 0 0 0 1px rgba($wp-blue, 0.25);
		}

		/* Toolbar */
		.mce-toolbar-grp {
			background: $wp-blue-tint !important;
			border-bottom: 1px solid $wp-border-light !important;
			padding: $space-xs $space-sm;
		}

		.mce-toolbar {
			background: transparent !important;
		}

		/* Toolbar groups */
		.mce-btn-group {
			margin-right: $space-sm;

			&:not(:last-child) {
				padding-right: $space-sm;
				border-right: 1px solid $wp-border-light;
			}
		}

		/* Buttons */
		.mce-btn {
			background: transparent !important;
			border: none !important;
			box-shadow: none !important;

			button {
				padding: 5px;
				border-radius: $border-radius-sm;
				transition: background-color $transition-fast;
			}

			&:hover {
				background: $wp-border-faint !important;
			}

			&.mce-active,
			&.mce-active:hover {
				background: $wp-blue-tint !important;

				.mce-ico {
					color: $wp-blue;
				}
			}

			&.mce-disabled {
				opacity: 0.45;
			}
		}

		/* Icons */
		.mce-ico {
			color: $wp-text-subtle;
			transition: color $transition-fast;
		}

		.mce-btn:hover .mce-ico {
			color: $wp-text;
		}

		/* Editor */
		.mce-edit-area {
			border-top: none !important;
			background: $wp-white;

			iframe {
				background: $wp-white;
			}
		}
	}

	// =============================================================================
	// SIDEBAR
	// =============================================================================

	.cmt-mntn-sidebar {
		display: flex;
		flex-direction: column;
		gap: $space-base;
	}

	.cmt-mntn-sidebar-card {
		background: $wp-white;
		border: 1px solid $wp-border-light;
		border-radius: $border-radius;
		overflow: hidden;

		&__header {
			display: flex;
			align-items: center;
			gap: $space-sm;
			padding: 11px 14px;
			background: #f6f7f7;
			border-bottom: 1px solid $wp-border-light;
			font-size: $font-size-sm;
			font-weight: 600;
			color: $wp-text;

			svg {
				width: 15px;
				height: 15px;
				flex-shrink: 0;
			}
		}

		&__body {
			padding: 14px;
			display: flex;
			flex-direction: column;
			gap: $space-sm;
		}

		&__footer {
			padding: $space-sm 14px;
			border-top: 1px solid $wp-border-faint;
			font-size: $font-size-xs;
			color: $wp-text-muted;
			text-align: center;
		}
	}

	// Support card
	.cmt-mntn-support-desc {
		font-size: $font-size-sm;
		color: $wp-text-subtle;
		line-height: 1.6;
		margin: 0;
	}

	.cmt-mntn-support-link {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font-size: $font-size-base;
		color: $wp-blue;
		text-decoration: none;

		svg {
			width: 14px;
			height: 14px;
			flex-shrink: 0;
		}

		&:hover {
			text-decoration: underline;
		}
	}

	// Pro upsell card
	.cmt-mntn-pro-item {
		display: flex;
		align-items: flex-start;
		gap: $space-sm;
		padding: $space-sm 0;
		border-top: 1px solid $wp-border-faint;

		&:first-of-type {
			border-top: none;
			padding-top: 0;
		}

		&__icon {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 24px;
			height: 24px;
			background: $wp-blue-tint;
			border-radius: $border-radius-sm;
			flex-shrink: 0;
			margin-top: 1px;

			svg {
				width: 13px;
				height: 13px;
				fill: $wp-blue;
			}
		}

		&__name {
			font-size: $font-size-sm;
			font-weight: 500;
			color: $wp-text;
			line-height: 1.4;
		}

		&__desc {
			font-size: $font-size-xs;
			color: $wp-text-subtle;
			margin-top: 1px;
			line-height: 1.4;
		}
	}

	.cmt-mntn-pro-cta {
		display: block;
		text-align: center;
		background: $wp-blue;
		color: $wp-white;
		border-radius: $border-radius-sm;
		padding: $space-sm 14px;
		font-size: $font-size-base;
		font-weight: 600;
		text-decoration: none;
		margin-top: $space-sm;
		transition: background $transition-fast;

		&:hover,
		&:focus {
			background: color.adjust($wp-blue, $lightness: -10%);
			color: $wp-white;
		}
	}

	// =============================================================================
	// RESPONSIVE — WP's admin breakpoint is 782px
	// =============================================================================

	@media screen and (max-width: 782px) {
		.cmt-mntn-body {
			grid-template-columns: 1fr;
			padding: $space-base;
		}

		.cmt-mntn-header {
			padding: 0 $space-base;
			flex-wrap: wrap;
			height: auto;
			padding-top: $space-sm;
			padding-bottom: $space-sm;
			gap: $space-sm;

			&__links {
				gap: $space-md;
			}

			// Hide link labels on mobile, keep icons
			&__link span {
				display: none;
			}
		}

		.cmt-mntn-role-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	// =============================================================================
	// TAB NAVIGATION
	// =============================================================================

	// Override wp-components TabPanel tab styles
	.components-tab-panel__tabs {
		box-shadow:
			0 0 0 1px #ccd0d4,
			0 1px 1px 1px rgba(0, 0, 0, 0.04);
		padding-bottom: 0;
	}

	// =============================================================================
	// REDUCED MOTION
	// =============================================================================

	@media (prefers-reduced-motion: reduce) {
		.cmt-mntn-save-notice,
		.cmt-mntn-role-chip,
		.cmt-mntn-pro-cta,
		.cmt-mntn-textarea {
			transition: none;
		}
	}

	// =============================================================================
	// Loading Skeleton
	// =============================================================================

	@keyframes cmt-mntn-shimmer {
		0% {
			background-position: -600px 0;
		}
		100% {
			background-position: 600px 0;
		}
	}

	%skeleton-block {
		background: linear-gradient(
			90deg,
			#f0f0f1 25%,
			#e8e8e9 50%,
			#f0f0f1 75%
		);
		background-size: 1200px 100%;
		animation: cmt-mntn-shimmer 1.4s infinite linear;
		border-radius: $border-radius-sm;
	}

	.cmt-mntn-skeleton {
		// margin: -16px -20px 0;

		&__header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 60px;
			padding: 0 $space-xl;
			background: $wp-white;
			border-bottom: 1px solid $wp-border-light;
		}

		&__brand {
			display: flex;
			align-items: center;
			gap: $space-md;
		}

		&__circle {
			@extend %skeleton-block;
			width: 34px;
			height: 34px;
			border-radius: 50%;
			flex-shrink: 0;
		}

		&__tabs {
			display: flex;
			gap: 0;
			background: $wp-white;
			border-bottom: 1px solid $wp-border-light;
			padding: 0 $space-xl;
		}

		&__tab {
			@extend %skeleton-block;
			width: 70px;
			height: 12px;
			margin: 14px 16px;
			animation-delay: 0.1s;

			&--active {
				width: 60px;
				animation-delay: 0s;
			}
		}

		&__body {
			display: grid;
			grid-template-columns: 1fr $sidebar-width;
			gap: $content-gap;
			padding: $space-xl;
			align-items: start;
		}

		&__card {
			background: $wp-white;
			border: 1px solid $wp-border-light;
			border-radius: $border-radius;
			overflow: hidden;
		}

		&__card-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $space-base $space-lg;
			border-bottom: 1px solid $wp-border-light;
		}

		&__section {
			padding: $space-lg;
			border-bottom: 1px solid $wp-border-faint;

			&:last-child {
				border-bottom: none;
			}
		}

		&__sidebar {
			display: flex;
			flex-direction: column;
			gap: $space-base;
		}

		&__line {
			@extend %skeleton-block;
			height: 14px;

			// Stagger the shimmer slightly per element so they don't all
			// pulse in perfect sync — more natural looking.
			&:nth-child(2) {
				animation-delay: 0.1s;
			}
			&:nth-child(3) {
				animation-delay: 0.2s;
			}
			&:nth-child(4) {
				animation-delay: 0.3s;
			}
		}

		@media screen and (max-width: 782px) {
			&__body {
				grid-template-columns: 1fr;
				padding: $space-base;
			}

			&__header {
				padding: 0 $space-base;
			}

			&__tabs {
				padding: 0 $space-base;
			}

			&__sidebar {
				display: none;
			}
		}
	}
}