<?php
/**
 * Admin — Theme Builder (Header / Footer / Single Post).
 *
 * @package AuraBuilder
 */

declare(strict_types=1);

namespace AuraBuilder\Admin;

use AuraBuilder\Theme\ThemeBuilder;

final class ThemeBuilderPage {

	public function hooks(): void {
		add_action( 'admin_menu', array( $this, 'menu' ), 25 );
	}

	public function menu(): void {
		add_submenu_page(
			'aura-builder-pages',
			'Theme Builder',
			'Theme Builder',
			'edit_pages',
			'aura-builder-theme',
			array( $this, 'render' )
		);
	}

	public function render(): void {
		if ( ! \AuraBuilder\Support\Capabilities::can_edit_theme_parts() ) {
			wp_die(
				esc_html__( 'Sem permissão para editar o Theme Builder. É necessário poder editar páginas ou opções do tema.', 'auranet-page-theme-builder' ),
				esc_html__( 'Sem permissão', 'auranet-page-theme-builder' ),
				array( 'response' => 403 )
			);
		}
		$parts      = ThemeBuilder::get_all();
		$header_url = admin_url( 'admin.php?page=aura-builder&mode=header' );
		$footer_url = admin_url( 'admin.php?page=aura-builder&mode=footer' );
		$single_url = admin_url( 'admin.php?page=aura-builder&mode=single' );
		$menus_url  = admin_url( 'nav-menus.php' );
		$logo       = defined( 'AURA_BUILDER_LOGO_64_URL' ) ? AURA_BUILDER_LOGO_64_URL : '';
		$single     = $parts['single'] ?? array();
		$single_on  = ! empty( $single['enabled'] );
		?>
		<div class="wrap">
			<h1 style="display:flex;align-items:center;gap:10px">
				<?php if ( $logo ) : ?>
					<img src="<?php echo esc_url( $logo ); ?>" alt="" width="28" height="28" style="width:28px;height:28px;object-fit:contain;border-radius:6px"/>
				<?php else : ?>
					<span class="dashicons dashicons-schedule" style="font-size:28px;width:28px;height:28px;margin-right:6px"></span>
				<?php endif; ?>
				Theme Builder
			</h1>
			<p style="color:#646970;max-width:70ch">
				Monte o <strong>header</strong>, o <strong>footer</strong> e o layout de <strong>posts (Single)</strong> com o editor visual.
				O Single substitui o conteúdo nos posts do site (título, texto, imagem… vêm do post).
			</p>

			<?php if ( ! $single_on ) : ?>
				<div style="margin:16px 0;padding:14px 16px;background:#fffbeb;border:1px solid #f59e0b;border-radius:10px;max-width:960px">
					<strong style="color:#92400e">Single Post ainda inativo</strong>
					<p style="margin:6px 0 12px;color:#78350f">
						Clique em <strong>Criar / Editar Single Post</strong>, ajuste o layout (já vem com título, data, imagem e conteúdo)
						e <strong>Salve</strong> no topo do editor — o modelo será ativado automaticamente.
					</p>
					<a class="button button-primary button-hero" href="<?php echo esc_url( $single_url ); ?>">
						Criar modelo Single Post
					</a>
				</div>
			<?php endif; ?>

			<div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;max-width:1100px;margin-top:16px">
				<?php $this->card( 'Header', $parts['header'] ?? array(), $header_url, 'Editar Header' ); ?>
				<?php $this->card( 'Footer', $parts['footer'] ?? array(), $footer_url, 'Editar Footer' ); ?>
				<?php
				$this->card(
					'Single Post',
					$single,
					$single_url,
					$single_on ? 'Editar Single Post' : 'Criar Single Post',
					true
				);
				?>
			</div>

			<div style="margin-top:24px;padding:16px 18px;background:#fff;border:1px solid #c3c4c7;border-radius:8px;max-width:960px">
				<h2 style="margin:0 0 8px;font-size:15px">Como funciona o Single Post</h2>
				<ol style="margin:0;padding-left:1.2em;color:#50575e;line-height:1.6">
					<li>Abra <strong>Criar Single Post</strong> (não crie uma página avulsa).</li>
					<li>Use widgets da aba <strong>Dinâmicos</strong> (título do post, conteúdo, imagem…).</li>
					<li>Clique em <strong>Salvar</strong> — o modelo é ativado e vale para todos os posts.</li>
					<li>Abra um post no site para ver o layout. Posts com layout próprio no Builder têm prioridade.</li>
				</ol>
				<p style="margin:12px 0 0">
					<a class="button button-primary" href="<?php echo esc_url( $single_url ); ?>">Abrir editor Single Post</a>
				</p>
			</div>

			<div style="margin-top:16px;padding:16px 18px;background:#fff;border:1px solid #c3c4c7;border-radius:8px;max-width:960px">
				<h2 style="margin:0 0 8px;font-size:15px">Menus do WordPress</h2>
				<p style="margin:0 0 12px;color:#646970">
					Gerencie os itens em <strong>Aparência → Menus</strong>. No header, use o widget
					<strong>Menu de navegação</strong>.
				</p>
				<a class="button" href="<?php echo esc_url( $menus_url ); ?>">Abrir Menus</a>
			</div>
		</div>
		<?php
	}

	/**
	 * @param array<string, mixed> $part
	 */
	private function card( string $title, array $part, string $edit_url, string $btn_label, bool $highlight = false ): void {
		$on      = ! empty( $part['enabled'] );
		$display = (string) ( $part['display'] ?? 'all' );
		$labels  = array(
			'all'      => 'Todas as páginas',
			'home'     => 'Só Home',
			'singular' => 'Posts e páginas',
			'none'     => 'Desligado',
		);
		$disp_lab = $labels[ $display ] ?? $display;
		$border   = $highlight ? '2px solid #7c3aed' : '1px solid #c3c4c7';
		$bg       = $highlight ? '#f5f3ff' : '#fff';
		?>
		<div style="background:<?php echo esc_attr( $bg ); ?>;border:<?php echo esc_attr( $border ); ?>;border-radius:10px;padding:20px;box-shadow:0 1px 1px rgba(0,0,0,.04)">
			<h2 style="margin:0 0 8px;font-size:16px"><?php echo esc_html( $title ); ?></h2>
			<p style="margin:0 0 12px">
				Status:
				<?php if ( $on ) : ?>
					<span style="color:#059669;font-weight:700">Ativo</span>
				<?php else : ?>
					<span style="color:#94a3b8">Inativo</span>
				<?php endif; ?>
				<br/>
				Exibir: <strong><?php echo esc_html( $disp_lab ); ?></strong>
				<?php if ( ! empty( $part['sticky'] ) && $part['sticky'] === '1' && $title === 'Header' ) : ?>
					· Sticky
				<?php endif; ?>
			</p>
			<a class="button <?php echo $highlight ? 'button-primary' : ''; ?>" href="<?php echo esc_url( $edit_url ); ?>">
				<?php echo esc_html( $btn_label ); ?>
			</a>
		</div>
		<?php
	}
}
