"use client"

import { useState } from "react"
import Link from "next/link"
import { ChevronLeft, RotateCcw } from "lucide-react"
import { BottomNav } from "@/components/bottom-nav"
import { Slider } from "@/components/ui/slider"

const presets = [
  { id: "flat", name: "Plat", values: [50, 50, 50, 50, 50] },
  { id: "pop", name: "Pop", values: [45, 65, 70, 65, 50] },
  { id: "rock", name: "Rock", values: [70, 60, 50, 60, 75] },
  { id: "jazz", name: "Jazz", values: [60, 55, 50, 55, 65] },
  { id: "classical", name: "Classique", values: [55, 50, 45, 50, 60] },
  { id: "bass", name: "Bass Boost", values: [80, 70, 50, 40, 35] },
]

const frequencies = ["60Hz", "250Hz", "1kHz", "4kHz", "16kHz"]

export default function EqualizerPage() {
  const [selectedPreset, setSelectedPreset] = useState("flat")
  const [values, setValues] = useState(presets[0].values)

  const handlePresetChange = (presetId: string) => {
    const preset = presets.find((p) => p.id === presetId)
    if (preset) {
      setSelectedPreset(presetId)
      setValues(preset.values)
    }
  }

  const handleSliderChange = (index: number, value: number[]) => {
    const newValues = [...values]
    newValues[index] = value[0]
    setValues(newValues)
    setSelectedPreset("custom")
  }

  const handleReset = () => {
    setSelectedPreset("flat")
    setValues(presets[0].values)
  }

  return (
    <div className="min-h-screen bg-background pb-24">
      <div className="mx-auto max-w-md px-4 py-6">
        {/* Header */}
        <div className="mb-8 flex items-center justify-between">
          <div className="flex items-center gap-4">
            <Link href="/now-playing" className="text-foreground hover:text-primary">
              <ChevronLeft className="h-6 w-6" />
            </Link>
            <h1 className="text-xl font-bold text-foreground">Égaliseur</h1>
          </div>
          <button onClick={handleReset} className="text-muted-foreground hover:text-primary">
            <RotateCcw className="h-5 w-5" />
          </button>
        </div>

        {/* Presets */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold text-muted-foreground">PRERÉGLAGES</h2>
          <div className="grid grid-cols-3 gap-2">
            {presets.map((preset) => (
              <button
                key={preset.id}
                onClick={() => handlePresetChange(preset.id)}
                className={`rounded-lg p-3 text-sm font-medium transition-colors ${
                  selectedPreset === preset.id
                    ? "bg-primary text-primary-foreground"
                    : "bg-secondary text-foreground hover:bg-secondary/80"
                }`}
              >
                {preset.name}
              </button>
            ))}
          </div>
        </section>

        {/* Equalizer Sliders */}
        <section className="mb-8">
          <h2 className="mb-6 text-sm font-semibold text-muted-foreground">FRÉQUENCES</h2>
          <div className="flex items-end justify-between gap-4">
            {frequencies.map((freq, index) => (
              <div key={freq} className="flex flex-1 flex-col items-center gap-4">
                <div className="h-48 w-full">
                  <Slider
                    value={[values[index]]}
                    onValueChange={(value) => handleSliderChange(index, value)}
                    max={100}
                    step={1}
                    orientation="vertical"
                    className="h-full"
                  />
                </div>
                <span className="text-xs text-muted-foreground">{freq}</span>
              </div>
            ))}
          </div>
        </section>

        {/* Info */}
        <div className="rounded-lg bg-secondary/50 p-4">
          <p className="text-center text-sm text-muted-foreground">
            Ajustez les fréquences pour personnaliser votre expérience audio
          </p>
        </div>
      </div>

      <BottomNav />
    </div>
  )
}
