"use client"

import { useState } from "react"
import Link from "next/link"
import { ChevronLeft, Clock, Check, X } from "lucide-react"
import { BottomNav } from "@/components/bottom-nav"
import { Button } from "@/components/ui/button"
import { usePlayer } from "@/components/player-provider"

const timerOptions = [
  { id: "5", label: "5 minutes", minutes: 5 },
  { id: "10", label: "10 minutes", minutes: 10 },
  { id: "15", label: "15 minutes", minutes: 15 },
  { id: "30", label: "30 minutes", minutes: 30 },
  { id: "45", label: "45 minutes", minutes: 45 },
  { id: "60", label: "1 heure", minutes: 60 },
  { id: "90", label: "1h 30", minutes: 90 },
]

function formatTimeRemaining(seconds: number): string {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  if (mins >= 60) {
    const hours = Math.floor(mins / 60)
    const remainingMins = mins % 60
    return `${hours}h ${remainingMins.toString().padStart(2, "0")}m ${secs.toString().padStart(2, "0")}s`
  }
  return `${mins}m ${secs.toString().padStart(2, "0")}s`
}

export default function SleepTimerPage() {
  const { sleepTimerMinutes, sleepTimerRemaining, setSleepTimer, cancelSleepTimer } = usePlayer()
  const [selectedTimer, setSelectedTimer] = useState<string | null>(
    sleepTimerMinutes ? sleepTimerMinutes.toString() : null,
  )

  const handleSetTimer = (timerId: string) => {
    const option = timerOptions.find((t) => t.id === timerId)
    if (option) {
      setSelectedTimer(timerId)
      setSleepTimer(option.minutes)
    }
  }

  const handleCancel = () => {
    setSelectedTimer(null)
    cancelSleepTimer()
  }

  const isActive = sleepTimerRemaining !== null && sleepTimerRemaining > 0

  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 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">Minuteur de veille</h1>
        </div>

        {/* Active Timer Info */}
        {isActive && sleepTimerRemaining && (
          <div className="mb-8 rounded-xl bg-primary/10 p-6">
            <div className="flex items-center justify-between mb-4">
              <div className="flex items-center gap-3">
                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary/20">
                  <Clock className="h-6 w-6 text-primary" />
                </div>
                <div>
                  <p className="font-semibold text-foreground">Minuteur actif</p>
                  <p className="text-sm text-muted-foreground">La musique s'arrêtera bientôt</p>
                </div>
              </div>
              <button
                onClick={handleCancel}
                className="rounded-full p-2 text-muted-foreground hover:bg-secondary hover:text-foreground"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="text-center">
              <p className="text-4xl font-bold text-primary tabular-nums">{formatTimeRemaining(sleepTimerRemaining)}</p>
              <p className="mt-2 text-sm text-muted-foreground">restant</p>
            </div>
          </div>
        )}

        {/* Timer Options */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold text-muted-foreground uppercase tracking-wider">
            Sélectionner la durée
          </h2>
          <div className="space-y-2">
            {timerOptions.map((option) => (
              <button
                key={option.id}
                onClick={() => handleSetTimer(option.id)}
                className={`flex w-full items-center justify-between rounded-xl p-4 transition-colors ${
                  sleepTimerMinutes === option.minutes
                    ? "bg-primary text-primary-foreground"
                    : "bg-secondary text-foreground hover:bg-secondary/80"
                }`}
              >
                <span className="font-medium">{option.label}</span>
                {sleepTimerMinutes === option.minutes && <Check className="h-5 w-5" />}
              </button>
            ))}
          </div>
        </section>

        {/* Actions */}
        {isActive && (
          <div className="space-y-3">
            <Button onClick={handleCancel} variant="outline" className="w-full bg-transparent">
              Annuler le minuteur
            </Button>
          </div>
        )}

        {/* Info */}
        <div className="mt-8 rounded-xl bg-secondary/50 p-4">
          <p className="text-center text-sm text-muted-foreground">
            La lecture de musique s'arrêtera automatiquement après le délai choisi. Parfait pour s'endormir en musique.
          </p>
        </div>
      </div>

      <BottomNav />
    </div>
  )
}
