'use client';

import React, { useState } from 'react';

export default function InteractiveLapSection() {
  const [activeTab, setActiveTab] = useState<'lap7' | 'lap6' | 'delta'>('lap7');

  return (
    <section className="lap-section-wrapper">
      <div className="flagship-container">
        <div className="lap-grid">
          {/* Left Column: Sector Delta Details */}
          <div className="lap-left-col">
            <div className="font-label-caps text-green-accent pill-label bg-surface-container w-fit">
              SECTOR TELEMETRY BREAKDOWN
            </div>
            <h2 className="font-headline-xl text-ink m-0">
              Analyze lap deltas with surgical telemetry.
            </h2>
            <p className="font-body-md m-0">
              Compare throttle traces, brake initiation thresholds, and roll angles between your best lap and
              reference benchmarks. Instantly see where you left tenths on the tarmac.
            </p>

            {/* Lap Tab Controls */}
            <div className="lap-tabs">
              <button
                type="button"
                className={`lap-tab-btn ${activeTab === 'lap7' ? 'active' : ''}`}
                onClick={() => setActiveTab('lap7')}
              >
                Lap 7 (1:34.28)
              </button>
              <button
                type="button"
                className={`lap-tab-btn ${activeTab === 'lap6' ? 'active' : ''}`}
                onClick={() => setActiveTab('lap6')}
              >
                Lap 6 (1:34.70)
              </button>
              <button
                type="button"
                className={`lap-tab-btn ${activeTab === 'delta' ? 'active' : ''}`}
                onClick={() => setActiveTab('delta')}
              >
                Session Delta
              </button>
            </div>

            {/* Sector Performance List */}
            <div className="sector-list">
              <div className="sector-row">
                <div className="sector-info">
                  <span className="sector-dot bg-green-accent" />
                  <div>
                    <span className="font-headline-sm text-ink block">
                      Sector 1: Turn 1-4 Complex
                    </span>
                    <span className="font-body-sm">Brake marker +8m deeper</span>
                  </div>
                </div>
                <span className="font-code-mono text-green-accent font-semibold text-[17px]">
                  -0.21s
                </span>
              </div>

              <div className="sector-row">
                <div className="sector-info">
                  <span className="sector-dot bg-cyan-accent" />
                  <div>
                    <span className="font-headline-sm text-ink block">
                      Sector 2: Main Straightaway
                    </span>
                    <span className="font-body-sm">Top exit speed 162.4 MPH</span>
                  </div>
                </div>
                <span className="font-code-mono text-cyan-accent font-semibold text-[17px]">
                  -0.14s
                </span>
              </div>

              <div className="sector-row">
                <div className="sector-info">
                  <span className="sector-dot bg-blue-accent" />
                  <div>
                    <span className="font-headline-sm text-ink block">
                      Sector 3: The Carousel
                    </span>
                    <span className="font-body-sm">Consistent 52° lean sustained</span>
                  </div>
                </div>
                <span className="font-code-mono text-blue-accent font-semibold text-[17px]">
                  -0.07s
                </span>
              </div>
            </div>
          </div>

          {/* Right Column: Telemetry Graph & SVG Trace */}
          <div className="graph-card">
            <div className="graph-header">
              <div className="graph-header-left">
                <span className="font-headline-sm text-ink">
                  Laguna Seca Circuit
                </span>
                <span className="font-code-mono graph-badge text-dim-cyan bg-surface-highest">
                  DRY • 24°C
                </span>
              </div>
              <div className="font-code-mono text-green-accent flex items-center gap-6px">
                <span className="sector-dot-small bg-green-accent" />
                DELTA: {activeTab === 'lap7' ? '-0.42s' : activeTab === 'lap6' ? '+0.12s' : '-0.533s'}
              </div>
            </div>

            {/* Inline SVG Wave Graph */}
            <div className="graph-svg-container bg-surface-lowest">
              <div className="graph-svg-header font-code-mono text-xs">
                <span className="text-muted">SPEED (MPH) &amp; THROTTLE %</span>
                <span className="text-cyan-accent text-[11px] sm:text-xs">BLUE: SPEED | GREEN: THROTTLE</span>
              </div>

              <svg
                className="w-full h-[176px]"
                fill="none"
                viewBox="0 0 600 160"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Speed and throttle telemetry traces"
              >
                <defs>
                  <linearGradient id="speedGrad" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="0%" stopColor="#00f2fe" stopOpacity="0.35" />
                    <stop offset="100%" stopColor="#00f2fe" stopOpacity="0.0" />
                  </linearGradient>
                </defs>
                {/* Horizontal grid lines */}
                <line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="40" y2="40" />
                <line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="80" y2="80" />
                <line stroke="#3a494b" strokeDasharray="4 4" strokeOpacity="0.3" x1="0" x2="600" y1="120" y2="120" />

                {/* Speed Area and Line */}
                <path
                  d="M0,130 Q60,110 120,45 T240,90 T360,30 T480,80 T600,20 L600,160 L0,160 Z"
                  fill="url(#speedGrad)"
                />
                <path
                  d="M0,130 Q60,110 120,45 T240,90 T360,30 T480,80 T600,20"
                  stroke="#00f2fe"
                  strokeLinecap="round"
                  strokeWidth="3"
                />

                {/* Throttle Trace Line */}
                <path
                  d="M0,150 Q70,140 120,25 T240,110 T360,15 T480,105 T600,10"
                  stroke="#34ff8c"
                  strokeDasharray="3 3"
                  strokeWidth="2.5"
                />

                {/* Apex Marker */}
                <circle cx="360" cy="30" fill="#00f2fe" r="5" stroke="#ffffff" strokeWidth="2" />
              </svg>

              <div className="graph-svg-footer font-code-mono text-muted text-[11px]">
                <span className="truncate">T1 (Andretti)</span>
                <span className="shrink-0">T6</span>
                <span className="truncate">Corkscrew (Apex)</span>
                <span className="shrink-0">T11</span>
              </div>
            </div>

            {/* Bottom Mini Readouts */}
            <div className="bento-stats-grid-3 mt-3">
              <div className="bento-stat-box text-center bg-surface-container">
                <span className="font-label-caps text-muted block">
                  PEAK DECEL
                </span>
                <span className="font-headline-sm text-danger-accent block mt-2px">
                  -1.42 G
                </span>
              </div>
              <div className="bento-stat-box text-center bg-surface-container">
                <span className="font-label-caps text-muted block">
                  ROLL RATE
                </span>
                <span className="font-headline-sm text-cyan-accent block mt-2px">
                  64°/s
                </span>
              </div>
              <div className="bento-stat-box text-center bg-surface-container">
                <span className="font-label-caps text-muted block">
                  DISTANCE
                </span>
                <span className="font-headline-sm text-ink block mt-2px">
                  2.238 MI
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}