"use client"

import Link from "next/link"
import { ChevronLeft, Check, Wifi, Download } from "lucide-react"
import { BottomNav } from "@/components/bottom-nav"
import { useUser } from "@/components/user-provider"
import { useToast } from "@/hooks/use-toast"

const qualityOptions = [
  { id: "low", label: "Économique", description: "Environ 24 kbps", data: "~0.5 Mo/min", bitrate: 24 },
  { id: "normal", label: "Normal", description: "Environ 96 kbps", data: "~1 Mo/min", bitrate: 96 },
  { id: "high", label: "Élevé", description: "Environ 160 kbps", data: "~2 Mo/min", bitrate: 160 },
  {
    id: "very_high",
    label: "Très élevé",
    description: "Environ 320 kbps",
    data: "~3.5 Mo/min",
    premium: true,
    bitrate: 320,
  },
]

export default function AudioQualityPage() {
  const { settings, updateSettings, user } = useUser()
  const { toast } = useToast()

  const isPremium = user?.isPremium ?? false

  const handleQualityChange = (type: "streaming" | "download", qualityId: string, label: string, isLocked: boolean) => {
    if (isLocked) {
      toast({
        title: "Premium requis",
        description: "Cette qualité nécessite un abonnement Premium",
        variant: "destructive",
      })
      return
    }

    if (type === "streaming") {
      updateSettings({ streamingQuality: qualityId as typeof settings.streamingQuality })
      toast({
        title: "Qualité de streaming mise à jour",
        description: `Maintenant en ${label}`,
      })
    } else {
      updateSettings({ downloadQuality: qualityId as typeof settings.downloadQuality })
      toast({
        title: "Qualité de téléchargement mise à jour",
        description: `Maintenant en ${label}`,
      })
    }
  }

  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="/settings" className="text-foreground hover:text-primary">
            <ChevronLeft className="h-6 w-6" />
          </Link>
          <h1 className="text-xl font-bold text-foreground">Qualité Audio</h1>
        </div>

        {/* Streaming Quality */}
        <section className="mb-8">
          <div className="mb-4 flex items-center gap-2">
            <Wifi className="h-5 w-5 text-muted-foreground" />
            <h2 className="font-semibold text-foreground">Streaming (WiFi)</h2>
          </div>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            {qualityOptions.map((option) => {
              const isSelected = settings.streamingQuality === option.id
              const isLocked = option.premium && !isPremium
              return (
                <button
                  key={option.id}
                  onClick={() => handleQualityChange("streaming", option.id, option.label, isLocked)}
                  disabled={isLocked}
                  className={`flex w-full items-center justify-between p-4 transition-colors ${isLocked ? "opacity-50" : "hover:bg-secondary"}`}
                >
                  <div>
                    <p className="flex items-center gap-2 font-medium text-foreground">
                      {option.label}
                      {option.premium && (
                        <span className="rounded bg-primary/20 px-1.5 py-0.5 text-xs text-primary">Premium</span>
                      )}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {option.description} • {option.data}
                    </p>
                  </div>
                  {isSelected && <Check className="h-5 w-5 text-primary" />}
                </button>
              )
            })}
          </div>
        </section>

        {/* Download Quality */}
        <section className="mb-8">
          <div className="mb-4 flex items-center gap-2">
            <Download className="h-5 w-5 text-muted-foreground" />
            <h2 className="font-semibold text-foreground">Téléchargement</h2>
          </div>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            {qualityOptions.map((option) => {
              const isSelected = settings.downloadQuality === option.id
              const isLocked = option.premium && !isPremium
              return (
                <button
                  key={option.id}
                  onClick={() => handleQualityChange("download", option.id, option.label, isLocked)}
                  disabled={isLocked}
                  className={`flex w-full items-center justify-between p-4 transition-colors ${isLocked ? "opacity-50" : "hover:bg-secondary"}`}
                >
                  <div>
                    <p className="flex items-center gap-2 font-medium text-foreground">
                      {option.label}
                      {option.premium && (
                        <span className="rounded bg-primary/20 px-1.5 py-0.5 text-xs text-primary">Premium</span>
                      )}
                    </p>
                    <p className="text-sm text-muted-foreground">
                      {option.description} • {option.data}
                    </p>
                  </div>
                  {isSelected && <Check className="h-5 w-5 text-primary" />}
                </button>
              )
            })}
          </div>
        </section>

        <p className="text-center text-sm text-muted-foreground">
          Une qualité plus élevée utilise plus de données. La qualité s{"'"}adapte automatiquement à votre réseau.
        </p>
      </div>

      <BottomNav />
    </div>
  )
}
