<?php
/**
 * Admin connections page view.
 *
 * @package    100Prints
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$conn_service = new Hundred_Prints_Connection_Service();
$is_connected = $conn_service->is_connected();
$workspace_info = $conn_service->get_workspace_info();
?>

<div class="wrap hundredp-wrap">
	<?php
	// Load shared page header
	$args = [ 'title' => 'Connections' ];
	require HUNDRED_PRINTS_PATH . 'admin/partials/header.php';
	?>

	<div class="hundredp-connections-wrap">
		<?php if ( ! $is_connected ) : ?>
			<!-- Disconnected Connection Form Card -->
			<section class="hundredp-panel">
				<div style="text-align: center; margin-bottom: 24px;">
					<i class="ph-bold ph-link" style="font-size: 40px; color: var(--hundredp-accent); display: inline-block; margin-bottom: 12px;"></i>
					<h2 style="font-size:18px; font-weight:600; margin:0 0 8px 0;">Connect Your 100PrintsWithMe Account</h2>
					<p style="color:var(--hundredp-muted); font-size:13px; margin:0;">Access your cloud templates, sync updates, and view analytics from one place.</p>
				</div>
				
				<form id="hundredp-connect-form">
					<div class="hundredp-form-group">
						<label for="hundredp-api-key">API Secret Key</label>
						<input type="password" id="hundredp-api-key" placeholder="Enter key (starts with pk_live_)" required autocomplete="off" />
						<div class="hundredp-form-desc">
							Find your key in <a href="https://100printswith.me/" target="_blank">100printswith.me</a> &rarr; Settings &rarr; API Keys.
						</div>
					</div>
					
					<button type="submit" class="hundredp-btn hundredp-btn-primary hundredp-btn-full" style="height: 38px;">
						Connect Account
					</button>
				</form>
			</section>
		<?php else : ?>
			<!-- Connected Status Details Card -->
			<section class="hundredp-panel">
				<div style="display:flex; align-items:center; gap:10px; margin-bottom: 20px;">
					<i class="ph-bold ph-check-circle" style="font-size: 24px; color: var(--hundredp-success);"></i>
					<h2 style="font-size:16px; font-weight:600; margin:0;">Account Connected</h2>
					<span class="hundredp-badge hundredp-badge-success" style="margin-left:auto;">
						<?php echo esc_html( strtoupper( $workspace_info['plan_tier'] ) ); ?>
					</span>
				</div>
				
				<table class="hundredp-status-table" style="margin-bottom: 24px;">
					<tr>
						<td><strong>Workspace</strong></td>
						<td><?php echo esc_html( $workspace_info['workspace_name'] ); ?></td>
					</tr>
					<tr>
						<td><strong>Email</strong></td>
						<td><?php echo esc_html( $workspace_info['email'] ); ?></td>
					</tr>
					<tr>
						<td><strong>Templates Synced</strong></td>
						<td><?php echo esc_html( $workspace_info['template_count'] ); ?> templates</td>
					</tr>
					<tr>
						<td><strong>API Usage</strong></td>
						<td><?php echo esc_html( $workspace_info['api_quota_used'] ); ?> / <?php echo esc_html( $workspace_info['api_quota_limit'] ); ?> requests</td>
					</tr>
				</table>
				
				<div style="display:flex; flex-direction:column; gap:12px;">
					<button type="button" class="hundredp-btn hundredp-btn-primary hundredp-btn-full hundredp-btn-sync">
						<i class="ph-bold ph-arrows-clockwise"></i> Sync Cloud Templates
					</button>
					
					<div style="margin-top: 16px; padding-top: 16px; border-top:1px solid var(--hundredp-border);">
						<h3 style="font-size:13px; font-weight:600; color:var(--hundredp-danger); margin:0 0 10px 0;">Danger Zone</h3>
						<button type="button" class="hundredp-btn hundredp-btn-danger hundredp-btn-full hundredp-btn-disconnect">
							Disconnect Account
						</button>
					</div>
				</div>
			</section>
		<?php endif; ?>
	</div>
</div>
