<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

if ( ! function_exists( 'get_plugin_data' ) ) {
    require_once ABSPATH . 'wp-admin/includes/plugin.php';
}

$plugin_data = get_plugin_data( plugin_dir_path(__FILE__) . 'ptpiano.php' );
$plugin_version = $plugin_data['Version'];

$record_duration = get_option('ptpian_record_duration', 30); // fallback to 30
?>
<div class="ptpiano-wrapper">    
    <!-- Loader only for this section -->
    <div class="ptpiano-loader">
      <div class="spinner"></div>
      <p>Please wait, PTPiano loading...</p>
    </div>
	 <!-- Record Poppop only for this section -->
	<div id="recordLimitPopup" class="popup-overlay">
	  <div class="popup-content">
		<h3>⏰ Time Limit Reached</h3>
		<p>Max recording length <?php echo esc_html($record_duration); ?> seconds.</p>
		 <button id="closePopupBtn" class="play-icon-btn" title="Close">▶️ Play</button>
	  </div>
	</div>

    <div class="ptpiano-content" style="display:none;">
        <!-- your existing plugin content -->
		<div class="content-wrapper">
			<header>				
				<div class="columnbox">
					<div class="col col-left">
					  <div class="piano-header">						
						<div class="piano-title">
						  <h2>PT PIANO <span class="version"><?php echo esc_html($plugin_version); ?></span></h2>
						</div>
					  </div>
					  <div class="piano-speaker">
						<img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'speaker.png'); ?>" width="150px" />
					  </div>
					</div>

					<div class="col col-center">
					  <div class="equalizer-notes-row">
						<div class="equalizer-wrapper">
						  <canvas id="equalizer" width="220" height="100"></canvas>
						</div>

						<div class="note-display-wrapper">
						  <div class="note-display" id="played-notes">
							<!-- Played notes will be added here -->
						  </div>
						</div>
					  </div>
					  <div class="vol-notes-row">						  
						  <div class="volume-slider">
							<span class="volume-icon">🔊</span>
							<input type="range" id="volumeControl" min="0" max="1" value="0.5" step="any">
							<span id="volumeRValue">50</span>
						  </div>
						  <div class="button-box">						
								
								<button id="recordBtn" type="button" title="Record" class="dotted-btn">
								  <div class="button-content">
									<div class="indicator"></div>
									<span class="btn-label">Record</span>
								  </div>
								</button>
								
								<button id="playBtn" type="button" class="dotted-btn">
									<div class="button-content">
										<div class="indicatorp"></div>
										<span class="btn-label">Play</span>
									</div>
								</button>										
								<button id="clearBtn" type="button" title="Clear" class="dotted-btn">
									<div class="button-content">
										<span class="btn-label">❌ Clear</span>
									</div>
								</button>
								<button id="mididownloadBtn" type="button" title="Download MIDI" class="dotted-btn">
									<div class="button-content">
										<span class="btn-label">💾 Save</span>
									</div>
								</button>
						  </div>
						  <div class="tempo-control">
								<span>Tempo</span>
								<!-- Left Triangle (Decrease) -->
								<button id="tempo-decrease" class="triangle-button triangle-left" title="Decrease Tempo"></button>

								<!-- Tempo Display -->
								<div id="tempo-display" class="tempo-display">0</div>

								<!-- Right Triangle (Increase) -->
								<button id="tempo-increase" class="triangle-button triangle-right" title="Increase Tempo"></button>
						</div>
					  </div>
					</div>

					<div class="col col-right">
						<div class="piano-header">
							<div id="midi-status" style="font-family: monospace;">
							  🎹 <span>No Device</span>							 
							</div>
							 <button id="enable-piano-btn" style="padding:5px 10px; font-size:12px;">Off</button>
						</div>
						<div class="piano-speaker">
							<img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'speaker.png'); ?>" width="150px" />
						</div>
					</div>
				</div>				
			</header>
			<div class="control">				
				<div class="chord-group">
				<div class="chord-label">Scale</div>
				 <div class="column chord-option">
					<select id="majorscale" name="majorscale">
						<option value="">Major Scale</option>
						<option value="C">C Major Scale</option>
						<option value="C#">C# Major Scale</option>
						<option value="D">D Major Scale</option>
						<option value="D#">D# Major Scale</option>
						<option value="E">E Major Scale</option>
						<option value="F">F Major Scale</option>
						<option value="F#">F# Major Scale</option>
						<option value="G">G Major Scale</option>
						<option value="G#">G# Major Scale</option>
						<option value="A">A Major Scale</option>
						<option value="A#">A# Major Scale</option>
						<option value="B">B Major Scale</option>
					</select>
					<select id="minorscale" name="minorscale">
						<option value="">Minor Scale</option>
						<option value="A">A Minor Scale</option>
						<option value="A#">A# Minor Scale</option>
						<option value="B">B Minor Scale</option>
						<option value="C">C Minor Scale</option>
						<option value="C#">C# Minor Scale</option>
						<option value="D">D Minor Scale</option>
						<option value="D#">D# Minor Scale</option>
						<option value="E">E Minor Scale</option>
						<option value="F">F Minor Scale</option>
						<option value="F#">F# Minor Scale</option>
						<option value="G">G Minor Scale</option>
						<option value="G#">G# Minor Scale</option>
					</select>
				</div>
				</div>
				<div class="chord-group">
				<div class="chord-label">Triads - Chords</div>
				<div class="column chord-option">
					<select id="majorchord" name="majorchord" class="<?php echo esc_attr($major_hidden_class); ?>">
						<option value="">Major</option>
						<option value="C">C Chords</option>
						<option value="C#">C♯ Chords</option>
						<option value="D">D Chords</option>
						<option value="D#">D♯ Chords</option>
						<option value="E">E Chords</option>
						<option value="F">F Chords</option>
						<option value="F#">F♯ Chords</option>
						<option value="G">G Chords</option>
						<option value="G#">G♯ Chords</option>
						<option value="A">A Chords</option>
						<option value="A#">A♯ Chords</option>
						<option value="B">B Chords</option>
					</select>

					<select id="minorchord" name="minorchord" class="<?php echo esc_attr($minor_hidden_class); ?>">
						<option value="">Minor</option>
						<option value="C">C Chords</option>
						<option value="C#">C♯ Chords</option>
						<option value="D">D Chords</option>
						<option value="D#">D♯ Chords</option>
						<option value="E">E Chords</option>
						<option value="F">F Chords</option>
						<option value="F#">F♯ Chords</option>
						<option value="G">G Chords</option>
						<option value="G#">G♯ Chords</option>
						<option value="A">A Chords</option>
						<option value="A#">A♯ Chords</option>
						<option value="B">B Chords</option>
					</select>

					<select id="diminishedchord" name="diminishedchord" class="<?php echo esc_attr($dim_hidden_class); ?>">
						<option value="">Diminished</option>
						<option value="C">C DIM</option>
						<option value="C#">C# DIM</option>
						<option value="D">D DIM</option>
						<option value="D#">D# DIM</option>
						<option value="E">E DIM</option>
						<option value="F">F DIM</option>
						<option value="F#">F# DIM</option>
						<option value="G">G DIM</option>
						<option value="G#">G# DIM</option>
						<option value="A">A DIM</option>
						<option value="A#">A# DIM</option>
						<option value="B">B DIM</option>
					</select>

					</select>
					<select id="augmentedchord" name="augmentedchord" class="<?php echo esc_attr($agu_hidden_class); ?>">
						<option value="">Augmented</option>
						<option value="C">C Augmented</option>
						<option value="C#">C# Augmented</option>
						<option value="D">D Augmented</option>
						<option value="D#">D# Augmented</option>
						<option value="E">E Augmented</option>
						<option value="F">F Augmented</option>
						<option value="F#">F# Augmented</option>
						<option value="G">G Augmented</option>
						<option value="G#">G# Augmented</option>
						<option value="A">A Augmented</option>
						<option value="A#">A# Augmented</option>
						<option value="B">B Augmented</option>
					</select>
				</div>
					<span id="common-progression" class="ctl-label"></span>
				</div>
			</div>

			<div class="columnboxpiano">
				<div class="left-column">
				  
					<?php
						$note_display = get_option('ptpian_note_display', 'letters');

						$solfege_map = array(
							'C'  => 'Do', 'C#' => 'Do#', 'D'  => 'Re', 'D#' => 'Re#',
							'E'  => 'Mi', 'F'  => 'Fa',  'F#' => 'Fa#','G'  => 'So',
							'G#' => 'So#','A'  => 'La',  'A#' => 'La#','B'  => 'Ti'
						);

						$indian_map = array(
							'C' => 'सा','C#'=>'रे♭','D'=>'रे','D#'=>'गा♭',
							'E'=>'गा','F'=>'मा','F#'=>'मा#','G'=>'प',
							'G#'=>'धा♭','A'=>'धा','A#'=>'नि♭','B'=>'नि'
						);

						function ptpian_note_label($note, $display, $solfege_map, $indian_map = array()) {
							if ($display === 'solfege' && isset($solfege_map[$note])) return $solfege_map[$note];
							if ($display === 'indian' && isset($indian_map[$note])) return $indian_map[$note];
							return $note;
						}

						$piano_keys = array(
						// First octave
						array('note'=>'C','type'=>'white','key'=>'a'),
						array('note'=>'C#','type'=>'black','key'=>'w'),
						array('note'=>'D','type'=>'white','key'=>'s'),
						array('note'=>'D#','type'=>'black','key'=>'e'),
						array('note'=>'E','type'=>'white','key'=>'d'),
						array('note'=>'F','type'=>'white','key'=>'f'),
						array('note'=>'F#','type'=>'black','key'=>'t'),
						array('note'=>'G','type'=>'white','key'=>'g'),
						array('note'=>'G#','type'=>'black','key'=>'y'),
						array('note'=>'A','type'=>'white','key'=>'h'),
						array('note'=>'A#','type'=>'black','key'=>'u'),
						array('note'=>'B','type'=>'white','key'=>'j'),

						// Second octave
						array('note'=>'C','type'=>'white','key'=>'k'),
						array('note'=>'C#','type'=>'black','key'=>'o'),
						array('note'=>'D','type'=>'white','key'=>'l'),
						array('note'=>'D#','type'=>'black','key'=>'p'),
						array('note'=>'E','type'=>'white','key'=>'z'),
						array('note'=>'F','type'=>'white','key'=>'x'),
						array('note'=>'F#','type'=>'black','key'=>'4'),
						array('note'=>'G','type'=>'white','key'=>'c'),
						array('note'=>'G#','type'=>'black','key'=>'5'),
						array('note'=>'A','type'=>'white','key'=>'v'),
						array('note'=>'A#','type'=>'black','key'=>'6'),
						array('note'=>'B','type'=>'white','key'=>'b'),
						/*array('note'=>'C','type'=>'white','key'=>'n'),*/
						/*array('note'=>'C#','type'=>'black','key'=>'m'),*/
					);

						?>

						<ul class="piano-keys">
						<?php foreach($piano_keys as $key): ?>
							<li class="key <?php echo esc_attr($key['type']); ?>" data-key="<?php echo esc_attr($key['key']); ?>" data-note="<?php echo esc_attr($key['note']); ?>" tabindex="0">
								<span class="note-label"><?php echo esc_html(ptpian_note_label($key['note'], $note_display, $solfege_map, $indian_map)); ?></span>
								<!-- Keyboard key label (e.g., A, W, S) -->
								<span class="key-label">
									<?php echo esc_html(strtoupper($key['key'])); ?>
								</span>
							</li>
						<?php endforeach; ?>
						</ul>
						
				</div>
				
				<div class="right-column">
				
				  <div class="left-panel">
				  <div class="pedal-wrapper">
					<div class="pedal-top-cover"></div> <!-- Top box cover -->
					<button id="paddleBtn" class="pedal-button" title="Hold Sustain Pedal"></button>					
				  </div>
				</div>
				
				<div class="right-panel">
					<?php if ($res_chordtxt): ?>
						<input id="showchord" value="NOTE / CHORD" type="text" readonly class="showscalechord" />
					<?php endif; ?>
				
					<div class="toggle-box">					
						<div class="keys-checkbox">
							<span class="ctl-label">Notes</span>
							<label class="switch">
								<input type="checkbox" id="show-notes-toggle" checked>
								<span class="slider round"></span>
							</label>
							<span class="ctl-label">Keys</span>
							<label class="switch">
								<input type="checkbox" id="show-keys-toggle" checked>
								<span class="slider round"></span>
							</label>
						</div>
					</div>
					<div class="reverb-box">	
						<div class="keys-checkbox">
							<span class="ctl-label">Reverb</span>
							<label for="ptpian_reverb_enable" class="switch">
								<input type="checkbox" id="ptpian_reverb_enable" name="ptpian_reverb_enable" value="1" <?php checked(get_option('ptpian_reverb_enable'), 1); ?> />
								<span class="slider round"></span>
							</label>												
							<label for="ptpian_reverb_ir" class="ctl-label">IR:</label>
							<select id="ptpian_reverb_ir" name="ptpian_reverb_ir">
								<option value="hall">Hall</option>
								<option value="room">Room</option>
								<option value="plate">Plate</option>
							</select>
						</div>
					</div>
				  </div>
				</div>
			</div>
		</div>
    </div>
</div>