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

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

$ptpian_plugin_data = get_plugin_data( plugin_dir_path(__FILE__) . 'ptpiano.php' );
$ptpian_plugin_version = $ptpian_plugin_data['Version'];

$ptpian_record_duration = get_option('ptpian_record_duration', 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($ptpian_record_duration); ?> seconds.</p>
		 <button id="closePopupBtn" class="play-icon-btn" title="Close">▶️ Play</button>
	  </div>
	</div>
	
	<!-- Settings Popup -->
    <div id="settingsPopup" class="popup-overlay">
        <div class="popup-content settings-popup">
            <div class="popup-header">
                <h3>⚙️ Piano Settings</h3>
                <button id="closeSettingsBtn" class="close-btn" title="Close">&times;</button>
            </div>            
            <div class="popup-body">                
                <div class="settings-section">                    
                    <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>
                        </div>
                        <div class="keys-checkbox">
                            <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>

                <!-- Reverb Settings -->
                <div class="settings-section">
                    <h4>Reverb Settings</h4>
                    <div class="reverb-box">
                        <div class="keys-checkbox">
                            <span class="ctl-label">Enable 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>
                        </div>
                        <div class="reverb-select">
                            <label for="ptpian_reverb_ir" class="ctl-label">Impulse Response:</label>
                             <select id="ptpian_reverb_ir" name="ptpian_reverb_ir">
                                <option value="hall" <?php selected(get_option('ptpian_reverb_ir', 'hall'), 'hall'); ?>>Hall</option>
                                <option value="room" <?php selected(get_option('ptpian_reverb_ir', 'hall'), 'room'); ?>>Room</option>
                                <option value="plate" <?php selected(get_option('ptpian_reverb_ir', 'hall'), 'plate'); ?>>Plate</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<!-- Song Settings Popup -->
    <div id="songPopup" class="popup-overlay">
		<div class="popup-content">
		
			<div class="popup-header">
                <h3>🎵 Select Song</h3>
                <button id="closeSongPopupBtn" class="close-btn" title="Close">&times;</button>
            </div>
			
			<select id="ptpian-song-select">
				<option value="">Select Song</option>
			</select>

			<p><strong>Song:</strong> <span id="ptpian-song-name">-</span></p>
			<p><strong>Scale:</strong> <span id="ptpian-scale-display">-</span></p>

			<button id="ptpian-load-song" disabled>🎓 Learn Mode</button>
			<button id="ptpian-autoplay-song" disabled>▶ Auto Play</button>

		</div>
	</div>

	<!-- Clear Confirm Popup -->
	<div id="clearConfirmPopup" class="popup-overlay">
		<div class="popup-content">
			<div class="popup-header">
				<h3>❌ Clear Recording</h3>
				<button id="closeClearPopupBtn" class="close-btn" title="Close">&times;</button>
			</div>
			<p style="color:#aaa; margin:15px 0; font-size:15px;">Are you sure you want to clear all recorded notes?</p>
			<div style="display:flex; gap:12px; justify-content:center; margin-top:20px;">
				<button id="confirmClearBtn" style="background:#e74c3c; color:#fff; border:none; padding:10px 24px; font-size:14px; border-radius:8px; cursor:pointer; font-weight:600; transition:background 0.3s;">Yes, Clear</button>
				<button id="cancelClearBtn" style="background:#555; color:#fff; border:none; padding:10px 24px; font-size:14px; border-radius:8px; cursor:pointer; font-weight:600; transition:background 0.3s;">Cancel</button>
			</div>
		</div>
	</div>

	<!-- Save Warning Popup -->
	<div id="saveWarningPopup" class="popup-overlay">
		<div class="popup-content">
			<div class="popup-header">
				<h3>💾 Save Recording</h3>
				<button id="closeSaveWarningPopupBtn" class="close-btn" title="Close">&times;</button>
			</div>
			<p style="color:#aaa; margin:15px 0; font-size:15px;">No notes recorded yet! Please play some keys first.</p>
			<div style="display:flex; gap:12px; justify-content:center; margin-top:20px;">
				<button id="closeSaveWarningBtn" style="background:#3a7afe; color:#fff; border:none; padding:10px 24px; font-size:14px; border-radius:8px; cursor:pointer; font-weight:600; transition:background 0.3s;">OK</button>
			</div>
		</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($ptpian_plugin_version); ?></span></h2>
						</div>
					  </div>
					  <div class="piano-speaker">
						<img src="<?php echo esc_url(PTPIAN_PLUGIN_URL . 'speaker.png'); ?>" width="150px" />
						<div class="speaker-glow-ring"></div>
					  </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">
							<button id="tempo-decrease" class="tempo-btn" title="Decrease Tempo">◀</button>
							<div class="tempo-display-box">
								<span id="tempo-display" class="tempo-value">120</span>
								<span class="tempo-label">BPM</span>
							</div>
							<button id="tempo-increase" class="tempo-btn" 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 class="speaker-glow-ring"></div>
						</div>
					</div>
				</div>				
			</header>
			<div class="control">
				<div class="chord-group">
					<div class="chord-label">Instrument</div>
					<div class="column chord-option">
						<select id="ptpianInstrumentSelect" name="ptpianInstrumentSelect">
							<optgroup label="── Piano & Keys ──">
								<option value="0" selected>Acoustic Grand Piano</option>
								<option value="1">Bright Acoustic Piano</option>
								<option value="2">Electric Grand Piano</option>
								<option value="4">Electric Piano 1</option>
								<option value="5">Electric Piano 2</option>
								<option value="6">Harpsichord</option>
								<option value="7">Clavinet</option>
							</optgroup>
							<optgroup label="── Organ ──">
								<option value="16">Drawbar Organ</option>
								<option value="17">Percussive Organ</option>
								<option value="18">Rock Organ</option>
								<option value="19">Church Organ</option>
							</optgroup>
							<optgroup label="── Guitar ──">
								<option value="24">Acoustic Guitar (Nylon)</option>
								<option value="25">Acoustic Guitar (Steel)</option>
								<option value="26">Electric Guitar (Jazz)</option>
								<option value="27">Electric Guitar (Clean)</option>
								<option value="30">Distortion Guitar</option>
							</optgroup>
							<optgroup label="── Bass ──">
								<option value="32">Acoustic Bass</option>
								<option value="33">Electric Bass (Finger)</option>
								<option value="38">Synth Bass</option>
							</optgroup>
							<optgroup label="── Strings ──">
								<option value="40">Violin</option>
								<option value="42">Cello</option>
								<option value="46">Orchestral Harp</option>
								<option value="48">String Ensemble</option>
							</optgroup>
							<optgroup label="── Brass & Wind ──">
								<option value="56">Trumpet</option>
								<option value="57">Trombone</option>
								<option value="60">French Horn</option>
								<option value="65">Alto Saxophone</option>
								<option value="71">Clarinet</option>
								<option value="73">Flute</option>
								<option value="75">Pan Flute</option>
							</optgroup>
							<optgroup label="── Synth ──">
								<option value="80">Synth Lead (Square)</option>
								<option value="81">Synth Lead (Sawtooth)</option>
								<option value="88">Synth Pad (New Age)</option>
								<option value="95">Synth Pad (Sweep)</option>
							</optgroup>
							<optgroup label="── Ethnic & World ──">
								<option value="104">Sitar</option>
								<option value="105">Banjo</option>
								<option value="108">Kalimba</option>
								<option value="111">Shanai</option>
							</optgroup>
						</select>
					</div>
				</div>

				<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>
						<select id="ptpianRaagSelect" name="ptpianRaagSelect">
							<option value="">Select Raag</option>
							<optgroup label="── Thaat (Parent Scales) ──">
								<option value="bilawal">Bilawal</option>
								<option value="kalyan">Kalyan / Yaman</option>
								<option value="khamaj">Khamaj</option>
								<option value="kafi">Kafi</option>
								<option value="asavari">Asavari</option>
								<option value="bhairavi">Bhairavi</option>
								<option value="bhairav">Bhairav</option>
								<option value="todi">Todi</option>
								<option value="marwa">Marwa</option>
								<option value="purvi">Purvi</option>
							</optgroup>
							<optgroup label="── Popular Raags ──">
								<option value="yaman">Yaman</option>
								<option value="bhupali">Bhupali</option>
								<option value="durga">Durga</option>
								<option value="malkauns">Malkauns</option>
								<option value="desh">Desh</option>
								<option value="bageshri">Bageshri</option>
								<option value="bihag">Bihag</option>
								<option value="hansdhwani">Hansdhwani</option>
								<option value="shivranjani">Shivranjani</option>
								<option value="charukeshi">Charukeshi</option>
							</optgroup>
						</select>
					</div>
				</div>

				<div class="chord-group">
					<div class="chord-label">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 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>				
			</div>			
		</div>


		<div class="progression"><span id="common-progression" class="ctl-label"></span></div>
			<!-- Piano moving scale -->
			<div class="ptpian-scale-wrapper">
				<div class="ptpian-scale-inner">
					<div id="ptpianScaleTrack" class="ptpian-scale-track"></div>
				</div>
			</div>
		

			<div class="columnboxpiano">
				<div class="left-column">
				  
					<?php						
						$ptpian_note_display = get_option('ptpian_note_display', 'letters');						
						
						$ptpian_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'
						);						
						
						$ptpian_indian_map = array(
							'C' => 'सा','C#'=>'रे♭','D'=>'रे','D#'=>'गा♭',
							'E'=>'गा','F'=>'मा','F#'=>'मा#','G'=>'प',
							'G#'=>'धा♭','A'=>'धा','A#'=>'नि♭','B'=>'नि'
						);

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

						$ptpian_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'),
						
						// Additional 12 keys (Third octave)
						array('note'=>'C','type'=>'white','key'=>'n'),
						array('note'=>'C#','type'=>'black','key'=>'9'),
						array('note'=>'D','type'=>'white','key'=>'m'),
						array('note'=>'D#','type'=>'black','key'=>'0'),
						array('note'=>'E','type'=>'white','key'=>','),
						array('note'=>'F','type'=>'white','key'=>'.'),
						array('note'=>'F#','type'=>'black','key'=>'-'),
						array('note'=>'G','type'=>'white','key'=>'/'),
						array('note'=>'G#','type'=>'black','key'=>'='),
						array('note'=>'A','type'=>'white','key'=>';'),
						array('note'=>'A#','type'=>'black','key'=>'['),
						array('note'=>'B','type'=>'white','key'=>'\''),

						// Additional 5 keys (Fourth octave - partial)
						array('note'=>'C','type'=>'white','key'=>']'),
						array('note'=>'C#','type'=>'black','key'=>'1'),
						array('note'=>'D','type'=>'white','key'=>'2'),
						array('note'=>'D#','type'=>'black','key'=>'3'),
						array('note'=>'E','type'=>'white','key'=>'8'),
					);

						?>

						<ul class="piano-keys">
						<?php foreach($ptpian_piano_keys as $ptpian_key): ?>
							<li class="key <?php echo esc_attr($ptpian_key['type']); ?>" data-key="<?php echo esc_attr($ptpian_key['key']); ?>" data-note="<?php echo esc_attr($ptpian_key['note']); ?>" tabindex="0">
								<span class="note-label"><?php echo esc_html(ptpian_note_label($ptpian_key['note'], $ptpian_note_display, $ptpian_solfege_map, $ptpian_indian_map)); ?></span>
								<!-- Keyboard key label (e.g., A, W, S) -->
								<span class="key-label">
									<?php echo esc_html(strtoupper($ptpian_key['key'])); ?>
								</span>
							</li>
						<?php endforeach; ?>
						</ul>
						
				</div>
				
				<div class="right-column">
				<!-- Display Options -->				
                 <input id="showchord" value="NOTE / CHORD" type="text" readonly class="showscalechord" />
				 <!-- Settings Button -->
					<button id="openSettingsBtn" class="settings-fab" title="Settings">
						<span>⚙️</span>
					</button>
					
					<button id="openSongSettingsBtn" class="settings-fab" title="SongLibrary">
						<span>🎵</span>
					</button>					
					
				  <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>
		</div>
    </div>
</div>