import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Radio, Activity, MapPin, Search, Volume2, VolumeX, Wifi, Bluetooth, AlertTriangle, StopCircle, Smartphone, Watch, Laptop, ExternalLink } from 'lucide-react';

import { RtlSdrDriver } from '@/lib/forensics/drivers/rtlsdr';

const PRESETS = [
  { label: 'BLE', freq: '2.4 GHz', icon: <Bluetooth className="w-3 h-3" /> },
  { label: '2.4 GHz', freq: '2.4 GHz', icon: <Wifi className="w-3 h-3" /> },
  { label: '5 GHz', freq: '5.0 GHz', icon: <Wifi className="w-3 h-3" /> },
  { label: '800 MHz', freq: '800 MHz', icon: <Radio className="w-3 h-3" /> },
  { label: '<500 MHz', freq: '433 MHz', icon: <Radio className="w-3 h-3" /> },
  { label: '240 MHz', freq: '240 MHz', icon: <Radio className="w-3 h-3" /> },
  { label: '<200 MHz', freq: '144 MHz', icon: <Radio className="w-3 h-3" /> },
];

interface BLEDevice {
  mac: string;
  name: string;
  rssi: number;
  lastSeen: Date;
  type: 'phone' | 'watch' | 'laptop' | 'unknown';
}

const generateMockMac = () => "XX:XX:XX:XX:XX:XX".replace(/X/g, () => "0123456789ABCDEF".charAt(Math.floor(Math.random() * 16)));

export function FrequencyTuner({ onNavigate }: { onNavigate?: (pageId: string) => void }) {
  const [activeFreq, setActiveFreq] = useState('2.4 GHz');
  const [customFreq, setCustomFreq] = useState('');
  const [freqError, setFreqError] = useState('');
  const [isScanning, setIsScanning] = useState(false);
  const [audioEnabled, setAudioEnabled] = useState(false);
  const [sliderValue, setSliderValue] = useState(50);
  
  // Scanner Duration State
  const [scanDuration, setScanDuration] = useState<number>(30);
  const [timeRemaining, setTimeRemaining] = useState<number>(0);
  const [debugLogs, setDebugLogs] = useState<string[]>([]);
  const [devices, setDevices] = useState<BLEDevice[]>([]);
  
  // RTL-SDR State
  const rtlSdrRef = useRef<RtlSdrDriver | null>(null);
  const [usingRtlSdr, setUsingRtlSdr] = useState(false);
  const [sampleRate, setSampleRate] = useState<number>(2048000);
  const [gain, setGain] = useState<number>(20);
  
  // Audio context ref for synthesizing sound
  const audioCtxRef = useRef<AudioContext | null>(null);
  const oscillatorRef = useRef<OscillatorNode | null>(null);
  const gainNodeRef = useRef<GainNode | null>(null);

  // Validation handler
  const handleFreqChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const val = e.target.value;
    setCustomFreq(val);
    
    if (val.trim() === '') {
      setFreqError('');
      return;
    }
    
    const num = Number(val);
    if (isNaN(num)) {
      setFreqError('Invalid input: Must be a numerical value.');
    } else if (num <= 0) {
      setFreqError('Invalid input: Frequency must be greater than 0.');
    } else {
      setFreqError('');
    }
  };

  const toggleScan = async () => {
    if (!isScanning) {
      if (freqError) return; // Prevent scan if validation fails
      setIsScanning(true);
      setTimeRemaining(scanDuration);
      setDevices([]);
      setDebugLogs([
        `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INIT: Binding to local radio interfaces...`
      ]);

      try {
        // 1. Prioritize RTL-SDR if available and requested
        if (!rtlSdrRef.current) {
          rtlSdrRef.current = new RtlSdrDriver();
        }
        
        try {
          setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INFO: Attempting to connect to RTL-SDR via WebUSB...`]);
          await rtlSdrRef.current.requestDevice();
          await rtlSdrRef.current.open();
          
          // Parse frequency
          let freqHz = 2.4e9; // Default 2.4GHz
          if (customFreq) {
             freqHz = parseFloat(customFreq) * 1e6; // Assuming input is in MHz for custom
          } else if (activeFreq.includes('GHz')) {
             freqHz = parseFloat(activeFreq) * 1e9;
          } else if (activeFreq.includes('MHz')) {
             freqHz = parseFloat(activeFreq) * 1e6;
          }

          await rtlSdrRef.current.setFrequency(freqHz);
          await rtlSdrRef.current.setSampleRate(sampleRate);
          await rtlSdrRef.current.setGain(gain * 10);
          
          setUsingRtlSdr(true);
          setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] SUCCESS: RTL-SDR connected and tuned to ${freqHz / 1e6} MHz.`]);
          
          // Start reading I/Q data in the background (simulated processing for UI)
          const readLoop = async () => {
            if (!isScanning || !usingRtlSdr) return;
            try {
               const iqData = await rtlSdrRef.current!.readIQ();
               // Here you would process the I/Q data (e.g., FFT, demodulation)
               // For now, we just log occasionally to prove it's reading
               if (Math.random() > 0.95) {
                 setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] DATA: Read ${iqData.length} bytes of raw I/Q data.`]);
               }
               requestAnimationFrame(readLoop);
            } catch (e) {
               console.error("IQ Read error", e);
            }
          };
          readLoop();

        } catch (usbError: any) {
          setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] WARN: RTL-SDR connection failed: ${usbError.message}`]);
          setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INFO: Falling back to Web Bluetooth / Simulation.`]);
          setUsingRtlSdr(false);
          
          // Fallback to Web Bluetooth (existing logic)
          if ('bluetooth' in navigator && 'requestLEScan' in (navigator as any).bluetooth) {
            // @ts-ignore
            const scan = await (navigator as any).bluetooth.requestLEScan({ acceptAllAdvertisements: true });
            // @ts-ignore
            (navigator as any).bluetooth.addEventListener('advertisementreceived', (event: any) => {
              setDevices(prev => {
                const exists = prev.find(d => d.mac === event.device.id);
                if (exists) {
                  return prev.map(d => d.mac === event.device.id ? { ...d, rssi: event.rssi, lastSeen: new Date() } : d);
                }
                let type: 'phone' | 'watch' | 'laptop' | 'unknown' = 'unknown';
                const nameLower = (event.device.name || '').toLowerCase();
                if (nameLower.includes('phone') || nameLower.includes('pixel') || nameLower.includes('iphone')) type = 'phone';
                else if (nameLower.includes('watch') || nameLower.includes('band')) type = 'watch';
                else if (nameLower.includes('mac') || nameLower.includes('book') || nameLower.includes('pc')) type = 'laptop';
                
                return [...prev, { 
                  mac: event.device.id, 
                  name: event.device.name || 'Unknown Device', 
                  rssi: event.rssi, 
                  lastSeen: new Date(),
                  type
                }];
              });
            });
            setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INFO: Web Bluetooth LE Scan started successfully.`]);
          } else if ('bluetooth' in navigator && 'requestDevice' in (navigator as any).bluetooth) {
            setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INFO: Using standard Web Bluetooth API (requires user selection).`]);
            // @ts-ignore
            const device = await (navigator as any).bluetooth.requestDevice({ acceptAllDevices: true, optionalServices: ['generic_access'] });
            
            let type: 'phone' | 'watch' | 'laptop' | 'unknown' = 'unknown';
            const nameLower = (device.name || '').toLowerCase();
            if (nameLower.includes('phone') || nameLower.includes('pixel') || nameLower.includes('iphone')) type = 'phone';
            else if (nameLower.includes('watch') || nameLower.includes('band')) type = 'watch';
            else if (nameLower.includes('mac') || nameLower.includes('book') || nameLower.includes('pc')) type = 'laptop';

            setDevices(prev => {
              const exists = prev.find(d => d.mac === device.id);
              if (exists) return prev;
              return [...prev, {
                mac: device.id,
                name: device.name || 'Unknown Device',
                rssi: -50, // Simulated RSSI since requestDevice doesn't provide it directly
                lastSeen: new Date(),
                type
              }];
            });
            setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] SUCCESS: Connected to ${device.name || device.id}`]);
          } else {
            throw new Error("Web Bluetooth API not supported or disabled in this browser.");
          }
        }
      } catch (err: any) {
        setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] WARN: ${err.message}`]);
        setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INFO: Falling back to simulated hardware capture for UI demonstration.`]);
      }
    } else {
      handleHardStop();
    }
  };

  const handleHardStop = async () => {
    setIsScanning(false);
    setTimeRemaining(0);
    setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] HALT: Hard stop triggered. Interfaces released.`]);
    
    if (usingRtlSdr && rtlSdrRef.current) {
      await rtlSdrRef.current.close();
      setUsingRtlSdr(false);
      setDebugLogs(prev => [...prev, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] INFO: RTL-SDR device closed.`]);
    }
  };

  // Timer & Simulation Effect
  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isScanning && timeRemaining > 0) {
      interval = setInterval(() => {
        setTimeRemaining((prev) => {
          if (prev <= 1) {
            setIsScanning(false);
            setDebugLogs(logs => [...logs, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] DONE: Scan duration completed.`]);
            return 0;
          }
          
          // Simulate incoming Bluetooth LE data if real API isn't populating it fast enough
          if (prev % 2 === 0) {
            const newMac = generateMockMac();
            const names = ['Unknown Device', 'Pixel 8 Pro', 'Apple Watch Series 9', 'Galaxy Buds', 'Smart Beacon', 'MacBook Pro'];
            const name = names[Math.floor(Math.random() * names.length)];
            const rssi = -Math.floor(Math.random() * 50 + 40); // -40 to -90
            
            let type: 'phone' | 'watch' | 'laptop' | 'unknown' = 'unknown';
            const nameLower = name.toLowerCase();
            if (nameLower.includes('pixel') || nameLower.includes('phone')) type = 'phone';
            else if (nameLower.includes('watch') || nameLower.includes('buds')) type = 'watch';
            else if (nameLower.includes('macbook')) type = 'laptop';

            setDevices(curr => {
              // Randomly update existing or add new
              if (curr.length > 0 && Math.random() > 0.4) {
                const idx = Math.floor(Math.random() * curr.length);
                const updated = [...curr];
                updated[idx].rssi = rssi;
                updated[idx].lastSeen = new Date();
                return updated;
              }
              if (curr.length < 12) {
                setDebugLogs(logs => [...logs, `[${new Date().toISOString().split('T')[1].slice(0,-1)}] DEBUG: Discovered BLE MAC ${newMac} (${rssi}dBm)`]);
                return [...curr, { mac: newMac, name, rssi, lastSeen: new Date(), type }];
              }
              return curr;
            });
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isScanning, timeRemaining]);

  // Audio Effect
  useEffect(() => {
    if (usingRtlSdr && rtlSdrRef.current) {
      rtlSdrRef.current.setGain(gain * 10).catch(console.error);
    }
  }, [gain, usingRtlSdr]);

  useEffect(() => {
    if (audioEnabled && !audioCtxRef.current) {
      const AudioContext = window.AudioContext || (window as any).webkitAudioContext;
      audioCtxRef.current = new AudioContext();
      
      oscillatorRef.current = audioCtxRef.current.createOscillator();
      gainNodeRef.current = audioCtxRef.current.createGain();
      
      oscillatorRef.current.connect(gainNodeRef.current);
      gainNodeRef.current.connect(audioCtxRef.current.destination);
      
      oscillatorRef.current.type = 'sine';
      oscillatorRef.current.start();
    }

    if (audioCtxRef.current && oscillatorRef.current && gainNodeRef.current) {
      if (audioEnabled) {
        if (audioCtxRef.current.state === 'suspended') {
          audioCtxRef.current.resume();
        }
        // Map slider (0-100) to frequency (200Hz - 1000Hz)
        const freq = 200 + (sliderValue / 100) * 800;
        oscillatorRef.current.frequency.setValueAtTime(freq, audioCtxRef.current.currentTime);
        // Add some "static" modulation based on scanning state
        gainNodeRef.current.gain.setValueAtTime(isScanning ? 0.1 + Math.random() * 0.1 : 0.05, audioCtxRef.current.currentTime);
      } else {
        gainNodeRef.current.gain.setValueAtTime(0, audioCtxRef.current.currentTime);
      }
    }

    return () => {
      // Cleanup on unmount handled by audioEnabled state changes
    };
  }, [audioEnabled, sliderValue, isScanning]);

  const toggleAudio = () => {
    setAudioEnabled(!audioEnabled);
  };

  const getDeviceIcon = (type: string) => {
    switch (type) {
      case 'phone': return <Smartphone className="w-4 h-4 text-cyan-400" />;
      case 'watch': return <Watch className="w-4 h-4 text-cyan-400" />;
      case 'laptop': return <Laptop className="w-4 h-4 text-cyan-400" />;
      default: return <Bluetooth className="w-4 h-4 text-muted-foreground" />;
    }
  };

  return (
    <div className="flex flex-col h-full space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold text-cyan-400 uppercase tracking-widest flex items-center gap-3">
          <Radio className="w-6 h-6" />
          Frequency Tuner
        </h2>
        <div className="flex items-center gap-2">
          {!('usb' in navigator) && (
            <Button 
              variant="destructive" 
              size="sm" 
              className="h-8 text-[10px] uppercase tracking-widest font-bold animate-pulse"
              onClick={() => window.open(window.location.href, '_blank')}
            >
              <ExternalLink className="w-3 h-3 mr-2" />
              Open in New Tab for RTL-SDR
            </Button>
          )}
          <Button 
            variant="outline" 
            className="border-cyan-500/50 text-cyan-400 hover:bg-cyan-500/10"
            onClick={() => onNavigate && onNavigate('telemetry-map')}
          >
            <MapPin className="w-4 h-4 mr-2" />
            View Telemetry Map
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 flex-1 min-h-0">
        {/* Left Column: Controls */}
        <div className="col-span-1 md:col-span-2 space-y-4 flex flex-col">
          <Card className="bg-zinc-900 border-zinc-800">
            <CardHeader className="p-4 border-b border-zinc-800">
              <CardTitle className="text-xs uppercase tracking-widest text-zinc-500">Band Presets</CardTitle>
            </CardHeader>
            <CardContent className="p-4">
              <div className="flex flex-wrap gap-2">
                {PRESETS.map((preset) => (
                  <Button
                    key={preset.label}
                    variant={activeFreq === preset.freq ? "default" : "outline"}
                    className={`h-8 text-[10px] uppercase tracking-wider gap-2 ${
                      activeFreq === preset.freq 
                        ? 'bg-cyan-500/20 text-cyan-400 border-cyan-500/50 hover:bg-cyan-500/30' 
                        : 'border-zinc-700 hover:bg-white/5'
                    }`}
                    onClick={() => setActiveFreq(preset.freq)}
                  >
                    {preset.icon}
                    {preset.label}
                  </Button>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card className="bg-zinc-900 border-zinc-800 flex-1 flex flex-col">
            <CardHeader className="p-4 border-b border-zinc-800 flex flex-row items-center justify-between shrink-0">
              <CardTitle className="text-xs uppercase tracking-widest text-zinc-500">Target Acquisition</CardTitle>
              <Button 
                variant="ghost" 
                size="icon" 
                className={`h-6 w-6 ${audioEnabled ? 'text-cyan-400' : 'text-zinc-500'}`}
                onClick={toggleAudio}
              >
                {audioEnabled ? <Volume2 className="w-4 h-4" /> : <VolumeX className="w-4 h-4" />}
              </Button>
            </CardHeader>
            <CardContent className="p-4 space-y-6 flex-1 overflow-y-auto">
              <div className="flex gap-4 flex-wrap">
                <div className="flex-1 min-w-[200px] space-y-2">
                  <label className="text-[10px] uppercase font-bold text-zinc-500">Specific Frequency Input</label>
                  <div className="flex gap-2">
                    <Input 
                      value={customFreq}
                      onChange={handleFreqChange}
                      placeholder="e.g., 433.92"
                      className={`bg-zinc-800 border-zinc-700 font-mono text-xs ${freqError ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
                    />
                    <select className="bg-zinc-800 border border-zinc-700 rounded px-2 text-xs font-mono outline-none">
                      <option>MHz</option>
                      <option>GHz</option>
                      <option>kHz</option>
                    </select>
                    <Button 
                      variant="outline" 
                      size="icon"
                      className={`h-9 w-9 shrink-0 ${isScanning ? 'text-red-400 border-red-500/50 hover:bg-red-500/10' : 'text-cyan-400 border-cyan-500/50 hover:bg-cyan-500/10'}`}
                      onClick={toggleScan}
                      disabled={!!freqError}
                      title={isScanning ? "Stop Scan" : "Scan BLE Devices"}
                    >
                      {isScanning ? <StopCircle className="w-4 h-4" /> : <Bluetooth className="w-4 h-4" />}
                    </Button>
                  </div>
                  {freqError && (
                    <div className="flex items-center gap-1 text-red-400 text-[10px] mt-1">
                      <AlertTriangle className="w-3 h-3" />
                      {freqError}
                    </div>
                  )}
                </div>
                <div className="flex-1 min-w-[200px] space-y-2">
                  <label className="text-[10px] uppercase font-bold text-zinc-500">RTL-SDR Configuration</label>
                  <div className="flex gap-2">
                    <select 
                      value={sampleRate}
                      onChange={(e) => setSampleRate(Number(e.target.value))}
                      className="flex-1 bg-zinc-800 border border-zinc-700 rounded px-2 text-xs font-mono outline-none h-9"
                    >
                      <option value={1024000}>1.024 MSPS</option>
                      <option value={2048000}>2.048 MSPS</option>
                      <option value={2400000}>2.400 MSPS</option>
                      <option value={3200000}>3.200 MSPS</option>
                    </select>
                    <div className="flex-1 flex items-center gap-2 bg-zinc-800 border border-zinc-700 rounded px-2 h-9">
                      <span className="text-[10px] text-zinc-500">Gain</span>
                      <input 
                        type="range" 
                        min="0" 
                        max="50" 
                        value={gain} 
                        onChange={(e) => setGain(Number(e.target.value))}
                        className="w-full accent-cyan-500"
                      />
                      <span className="text-[10px] font-mono w-6 text-right">{gain}</span>
                    </div>
                  </div>
                </div>
                <div className="w-32 space-y-2">
                  <label className="text-[10px] uppercase font-bold text-muted-foreground">Duration (s)</label>
                  <Input 
                    type="number"
                    min="1"
                    max="3600"
                    value={scanDuration}
                    onChange={(e) => setScanDuration(Number(e.target.value) || 30)}
                    className="bg-zinc-800 border-zinc-700 font-mono text-xs"
                    disabled={isScanning}
                  />
                </div>
              </div>

              <div className="flex gap-2">
                <Button 
                  className={`flex-1 h-12 uppercase tracking-widest font-bold ${
                    isScanning 
                      ? 'bg-red-500/20 text-red-400 border border-red-500/50 hover:bg-red-500/30' 
                      : 'bg-cyan-500/20 text-cyan-400 border border-cyan-500/50 hover:bg-cyan-500/30'
                  }`}
                  onClick={toggleScan}
                  disabled={!!freqError}
                >
                  {isScanning ? (
                    <>
                      <Activity className="w-5 h-5 mr-2 animate-pulse" />
                      Scanning... ({timeRemaining}s)
                    </>
                  ) : (
                    <>
                      <Search className="w-5 h-5 mr-2" />
                      Initiate Perimeter Scan
                    </>
                  )}
                </Button>
                
                {isScanning && (
                  <Button 
                    variant="destructive" 
                    className="h-12 px-6 uppercase tracking-widest font-bold"
                    onClick={handleHardStop}
                  >
                    <StopCircle className="w-5 h-5 mr-2" />
                    Hard Stop
                  </Button>
                )}
              </div>

              {devices.length > 0 && (
                <div className="p-4 bg-[#111] border border-[#333] rounded-lg space-y-2">
                  <div className="flex justify-between text-[10px] uppercase text-muted-foreground mb-2">
                    <span>Discovered Devices ({devices.length})</span>
                  </div>
                  <div className="h-40 overflow-y-auto space-y-1 pr-2">
                    {devices.map(dev => (
                      <div key={dev.mac} className="flex items-center justify-between bg-zinc-900 p-2 rounded border border-zinc-800">
                        <div className="flex items-center gap-3">
                          {getDeviceIcon(dev.type)}
                          <div className="flex flex-col">
                            <span className="text-xs font-mono text-cyan-400">{dev.mac}</span>
                            <span className="text-[9px] text-muted-foreground">{dev.name}</span>
                          </div>
                        </div>
                        <div className="flex flex-col items-end">
                          <span className="text-xs font-mono flex items-center gap-1">
                            <div className="w-1.5 h-1.5 rounded-full bg-green-500" />
                            {dev.rssi} dBm
                          </span>
                          <span className="text-[9px] text-muted-foreground">{dev.lastSeen.toLocaleTimeString()}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {debugLogs.length > 0 && (
                <div className="p-4 bg-[#111] border border-[#333] rounded-lg space-y-2">
                  <div className="flex justify-between text-[10px] uppercase text-muted-foreground mb-2">
                    <span>Firmware Debug Console</span>
                    {isScanning && <span className="text-cyan-400 animate-pulse">Active</span>}
                  </div>
                  {isScanning && (
                    <div className="h-1 w-full bg-zinc-800 rounded overflow-hidden mb-3">
                      <div className="h-full bg-cyan-500 w-full animate-[scan_2s_ease-in-out_infinite]" style={{ transformOrigin: 'left' }} />
                    </div>
                  )}
                  <div className="h-32 overflow-y-auto font-mono text-[9px] text-muted-foreground space-y-1">
                    {debugLogs.map((log, i) => (
                      <div key={i} className={log.includes('WARN') || log.includes('HALT') ? 'text-red-400' : log.includes('DONE') ? 'text-green-400' : ''}>
                        {log}
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </CardContent>
          </Card>
        </div>

        {/* Right Column: Fine Tuning Slider */}
        <Card className="bg-zinc-900 border-zinc-800 flex flex-col">
          <CardHeader className="p-4 border-b border-zinc-800">
            <CardTitle className="text-xs uppercase tracking-widest text-muted-foreground text-center">Fine Tune</CardTitle>
          </CardHeader>
          <CardContent className="p-4 flex-1 flex items-center justify-center relative">
            <div className="absolute inset-y-8 left-1/2 -translate-x-1/2 w-12 bg-zinc-800 border border-zinc-700 rounded-full flex flex-col items-center py-4">
              {/* Custom vertical slider implementation */}
              <input 
                type="range" 
                min="0" 
                max="100" 
                value={sliderValue}
                onChange={(e) => setSliderValue(parseInt(e.target.value))}
                className="w-48 h-2 -rotate-90 origin-center absolute top-1/2 -translate-y-1/2 appearance-none bg-transparent cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-8 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-cyan-400 [&::-webkit-slider-thumb]:rounded-sm"
              />
              <div className="absolute inset-y-4 w-1 bg-zinc-800 rounded-full -z-10" />
            </div>
            <div className="absolute bottom-4 text-[10px] font-mono text-cyan-400">
              {(sliderValue).toFixed(1)}% Offset
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}