"use client"

import { useState } from "react"
import Link from "next/link"
import {
  ChevronLeft,
  ChevronRight,
  Search,
  MessageCircle,
  Mail,
  FileText,
  Headphones,
  CreditCard,
  Shield,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { BottomNav } from "@/components/bottom-nav"

const helpCategories = [
  { icon: Headphones, title: "Lecture & Audio", description: "Problèmes de lecture, qualité audio", count: 12 },
  { icon: CreditCard, title: "Compte & Abonnement", description: "Paiement, Premium, facturation", count: 8 },
  { icon: Shield, title: "Confidentialité", description: "Données, sécurité, partage", count: 6 },
  { icon: FileText, title: "Playlists & Bibliothèque", description: "Créer, modifier, organiser", count: 15 },
]

const popularQuestions = [
  "Comment télécharger de la musique hors connexion ?",
  "Comment annuler mon abonnement Premium ?",
  "Pourquoi certains titres ne sont pas disponibles ?",
  "Comment améliorer la qualité audio ?",
  "Comment créer une playlist collaborative ?",
]

export default function HelpPage() {
  const [searchQuery, setSearchQuery] = useState("")

  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">Aide</h1>
        </div>

        {/* Search */}
        <div className="relative mb-8">
          <Search className="absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted-foreground" />
          <Input
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
            placeholder="Rechercher dans l'aide..."
            className="pl-10"
          />
        </div>

        {/* Categories */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Catégories</h2>
          <div className="space-y-2">
            {helpCategories.map((category) => (
              <button
                key={category.title}
                className="flex w-full items-center gap-4 rounded-xl bg-secondary/50 p-4 transition-colors hover:bg-secondary"
              >
                <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/20">
                  <category.icon className="h-5 w-5 text-primary" />
                </div>
                <div className="flex-1 text-left">
                  <p className="font-medium text-foreground">{category.title}</p>
                  <p className="text-sm text-muted-foreground">{category.description}</p>
                </div>
                <span className="text-sm text-muted-foreground">{category.count}</span>
                <ChevronRight className="h-5 w-5 text-muted-foreground" />
              </button>
            ))}
          </div>
        </section>

        {/* Popular questions */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Questions fréquentes</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            {popularQuestions.map((question, index) => (
              <button
                key={index}
                className="flex w-full items-center justify-between p-4 text-left transition-colors hover:bg-secondary"
              >
                <span className="text-foreground">{question}</span>
                <ChevronRight className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
              </button>
            ))}
          </div>
        </section>

        {/* Contact */}
        <section>
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Nous contacter</h2>
          <div className="grid grid-cols-2 gap-3">
            <button className="flex flex-col items-center gap-2 rounded-xl bg-secondary/50 p-4 transition-colors hover:bg-secondary">
              <MessageCircle className="h-6 w-6 text-primary" />
              <span className="text-sm text-foreground">Chat en direct</span>
            </button>
            <button className="flex flex-col items-center gap-2 rounded-xl bg-secondary/50 p-4 transition-colors hover:bg-secondary">
              <Mail className="h-6 w-6 text-primary" />
              <span className="text-sm text-foreground">Email</span>
            </button>
          </div>
        </section>
      </div>

      <BottomNav />
    </div>
  )
}
