"use client"

import Link from "next/link"
import {
  ChevronLeft,
  ChevronRight,
  Wifi,
  Download,
  Bell,
  Lock,
  HelpCircle,
  Info,
  Trash2,
  Volume2,
  MessageCircle,
} from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { BottomNav } from "@/components/bottom-nav"
import { useUser } from "@/components/user-provider"

export default function SettingsPage() {
  const { settings, updateSettings } = useUser()

  const qualityLabels = {
    low: "Basse (96 kbps)",
    normal: "Normale (160 kbps)",
    high: "Haute (320 kbps)",
    very_high: "Très haute (Lossless)",
  }

  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-6 flex items-center gap-4">
          <Link href="/profile" className="text-foreground hover:text-primary">
            <ChevronLeft className="h-6 w-6" />
          </Link>
          <h1 className="text-xl font-bold text-foreground">Paramètres</h1>
        </div>

        {/* Audio Quality Section */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Qualité Audio</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            <Link href="/audio-quality" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Wifi className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground">Streaming</p>
                  <p className="text-sm text-muted-foreground">{qualityLabels[settings.streamingQuality]}</p>
                </div>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
            <Link href="/audio-quality" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Download className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground">Téléchargement</p>
                  <p className="text-sm text-muted-foreground">{qualityLabels[settings.downloadQuality]}</p>
                </div>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </div>
        </section>

        {/* Playback Section */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Lecture</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            <div className="flex items-center justify-between p-4">
              <div>
                <p className="font-medium text-foreground">Lecture automatique</p>
                <p className="text-sm text-muted-foreground">Jouer automatiquement le contenu similaire</p>
              </div>
              <Switch
                checked={settings.autoplay}
                onCheckedChange={(checked) => updateSettings({ autoplay: checked })}
              />
            </div>
            <div className="flex items-center justify-between p-4">
              <div>
                <p className="font-medium text-foreground">Économiseur de données</p>
                <p className="text-sm text-muted-foreground">Réduire l{"'"}utilisation des données</p>
              </div>
              <Switch
                checked={settings.dataSaver}
                onCheckedChange={(checked) => updateSettings({ dataSaver: checked })}
              />
            </div>
            <div className="flex items-center justify-between p-4">
              <div>
                <p className="font-medium text-foreground">Contenu explicite</p>
                <p className="text-sm text-muted-foreground">Autoriser le contenu explicite</p>
              </div>
              <Switch
                checked={settings.explicitContent}
                onCheckedChange={(checked) => updateSettings({ explicitContent: checked })}
              />
            </div>
            <Link href="/equalizer" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Volume2 className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Égaliseur</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </div>
        </section>

        {/* Privacy Section */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Confidentialité</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            <div className="flex items-center justify-between p-4">
              <div>
                <p className="font-medium text-foreground">Session privée</p>
                <p className="text-sm text-muted-foreground">Vos écoutes ne seront pas enregistrées</p>
              </div>
              <Switch
                checked={settings.privateSession}
                onCheckedChange={(checked) => updateSettings({ privateSession: checked })}
              />
            </div>
          </div>
        </section>

        {/* Account Section */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Compte</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            <Link href="/notifications-inbox" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Bell className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Notifications</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
            <Link href="/privacy" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Lock className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Données et confidentialité</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </div>
        </section>

        {/* Support Section */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Support</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            <Link href="/chat" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <MessageCircle className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Chat en direct</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
            <Link href="/promotions" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Bell className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Promotions</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
            <Link href="/support" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <HelpCircle className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Support</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
            <Link href="/help" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <HelpCircle className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">Aide</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
            <Link href="/about" className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Info className="h-5 w-5 text-muted-foreground" />
                <p className="font-medium text-foreground">À propos</p>
              </div>
              <ChevronRight className="h-5 w-5 text-muted-foreground" />
            </Link>
          </div>
        </section>

        {/* Danger Zone */}
        <section>
          <div className="rounded-xl bg-secondary/50">
            <button className="flex w-full items-center gap-3 p-4 text-destructive">
              <Trash2 className="h-5 w-5" />
              <p className="font-medium">Supprimer le cache</p>
            </button>
          </div>
        </section>

        <p className="mt-8 text-center text-sm text-muted-foreground">Version 2.1.0</p>
      </div>

      <BottomNav />
    </div>
  )
}
