<?php
/**
* Admin page renderer — settings metabox + conversion UI.
*/
if ( ! defined( 'ABSPATH' ) ) exit;
class FTE_Admin_Page {
public static function render() {
$token = get_option( 'fte_figma_token', '' );
$has_token = ! empty( $token );
?>
<div class="wrap fte-wrap">
<h1><?php esc_html_e( 'Figma to Elementor', 'figma-to-elementor' ); ?></h1>
<p class="description">
<?php esc_html_e( 'Convert Figma designs into Elementor legacy Section/Column templates.', 'figma-to-elementor' ); ?>
</p>
<!-- TOKEN SETTINGS METABOX -->
<div class="fte-metabox">
<h2><?php esc_html_e( 'Figma API Token', 'figma-to-elementor' ); ?></h2>
<form method="post" action="options.php" id="fte-token-form">
<?php settings_fields( 'fte_settings_group' ); ?>
<table class="form-table" role="presentation">
<tr>
<th scope="row">
<label for="fte_figma_token"><?php esc_html_e( 'Personal Access Token', 'figma-to-elementor' ); ?></label>
</th>
<td>
<input
type="password"
id="fte_figma_token"
name="fte_figma_token"
value="<?php echo esc_attr( $token ); ?>"
class="regular-text"
placeholder="figd_..."
autocomplete="off"
/>
<button type="button" id="fte-toggle-token" class="button button-secondary">
<?php esc_html_e( 'Show', 'figma-to-elementor' ); ?>
</button>
<p class="description">
<?php
printf(
esc_html__( 'Generate a token at %s → Settings → Personal Access Tokens.', 'figma-to-elementor' ),
'<a href="https://www.figma.com" target="_blank" rel="noopener">figma.com</a>'
);
?>
</p>
</td>
</tr>
</table>
<p class="submit" style="display:flex;gap:8px;align-items:center;">
<?php submit_button( __( 'Save Token', 'figma-to-elementor' ), 'primary', 'submit', false ); ?>
<button type="button" id="fte-test-token" class="button button-secondary">
<?php esc_html_e( 'Test Connection', 'figma-to-elementor' ); ?>
</button>
<span id="fte-token-status"></span>
</p>
</form>
</div>
<?php if ( $has_token ) : ?>
<!-- CONVERTER PANEL -->
<div class="fte-metabox">
<h2><?php esc_html_e( 'Convert a Figma File', 'figma-to-elementor' ); ?></h2>
<table class="form-table" role="presentation">
<tr>
<th scope="row">
<label for="fte-file-key"><?php esc_html_e( 'Figma File Key', 'figma-to-elementor' ); ?></label>
</th>
<td>
<input type="text" id="fte-file-key" class="regular-text" placeholder="Paste Figma URL or file key" style="min-width:400px;" />
<button type="button" id="fte-fetch-pages" class="button button-secondary">
<?php esc_html_e( 'Fetch Pages', 'figma-to-elementor' ); ?>
</button>
<p class="description">
<?php esc_html_e( 'Paste any Figma URL (file, design, or prototype) — the file key and node ID will be extracted automatically.', 'figma-to-elementor' ); ?>
</p>
</td>
</tr>
<tr id="fte-page-row" style="display:none;">
<th scope="row">
<label for="fte-page-select"><?php esc_html_e( 'Page', 'figma-to-elementor' ); ?></label>
</th>
<td>
<select id="fte-page-select" class="regular-text">
<option value=""><?php esc_html_e( '— Select a page —', 'figma-to-elementor' ); ?></option>
</select>
</td>
</tr>
<tr id="fte-frame-row" style="display:none;">
<th scope="row">
<label for="fte-frame-select"><?php esc_html_e( 'Frame', 'figma-to-elementor' ); ?></label>
</th>
<td>
<select id="fte-frame-select" class="regular-text">
<option value=""><?php esc_html_e( '— Select a frame —', 'figma-to-elementor' ); ?></option>
</select>
</td>
</tr>
<tr id="fte-title-row" style="display:none;">
<th scope="row">
<label for="fte-template-title"><?php esc_html_e( 'Template Title', 'figma-to-elementor' ); ?></label>
</th>
<td>
<input type="text" id="fte-template-title" class="regular-text" value="Imported from Figma" />
</td>
</tr>
</table>
<div id="fte-convert-actions" style="display:none;">
<button type="button" id="fte-convert-btn" class="button button-primary button-hero">
<?php esc_html_e( 'Convert & Import', 'figma-to-elementor' ); ?>
</button>
</div>
<!-- Progress / Status -->
<div id="fte-status" style="display:none;">
<div class="fte-progress">
<div class="fte-progress-bar" id="fte-progress-bar"></div>
</div>
<p id="fte-status-text"></p>
</div>
<!-- Result -->
<div id="fte-result" style="display:none;" class="fte-result-box">
<h3><?php esc_html_e( 'Conversion Complete', 'figma-to-elementor' ); ?></h3>
<p id="fte-result-text"></p>
<p>
<a id="fte-edit-link" href="#" class="button button-primary" target="_blank">
<?php esc_html_e( 'Edit in Elementor', 'figma-to-elementor' ); ?>
</a>
<a href="<?php echo esc_url( admin_url( 'edit.php?post_type=elementor_library' ) ); ?>" class="button button-secondary">
<?php esc_html_e( 'View All Templates', 'figma-to-elementor' ); ?>
</a>
</p>
</div>
<!-- Error -->
<div id="fte-error" style="display:none;" class="notice notice-error">
<p id="fte-error-text"></p>
</div>
</div>
<?php else : ?>
<div class="notice notice-info">
<p><?php esc_html_e( 'Enter your Figma API token above to get started.', 'figma-to-elementor' ); ?></p>
</div>
<?php endif; ?>
<!-- DIAGNOSTICS PANEL (always visible) -->
<div class="fte-metabox" style="margin-top:30px; border-color:#dba617;">
<h2><?php esc_html_e( 'Troubleshooting', 'figma-to-elementor' ); ?></h2>
<p class="description">
<?php esc_html_e( 'If you are getting errors, run diagnostics to check your token, server connectivity, and file access.', 'figma-to-elementor' ); ?>
</p>
<p>
<button type="button" id="fte-diagnose-btn" class="button button-secondary">
<?php esc_html_e( 'Run Diagnostics', 'figma-to-elementor' ); ?>
</button>
</p>
<pre id="fte-diag-output" style="display:none; background:#f6f7f7; border:1px solid #dcdcde; padding:12px; max-height:400px; overflow:auto; font-size:12px; line-height:1.6;"></pre>
</div>
</div>
<?php
}
}