"use client"

import { useState } from "react"
import Link from "next/link"
import { ChevronLeft, Eye, EyeOff, Users, Activity, Download } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { Button } from "@/components/ui/button"
import { BottomNav } from "@/components/bottom-nav"

export default function PrivacyPage() {
  const [privateSession, setPrivateSession] = useState(false)
  const [showActivity, setShowActivity] = useState(true)
  const [showRecentlyPlayed, setShowRecentlyPlayed] = useState(true)

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

        {/* Private Session */}
        <section className="mb-8">
          <div className="rounded-xl bg-gradient-to-r from-primary/20 to-violet-600/20 p-4">
            <div className="flex items-start gap-4">
              <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/20">
                {privateSession ? (
                  <EyeOff className="h-5 w-5 text-primary" />
                ) : (
                  <Eye className="h-5 w-5 text-primary" />
                )}
              </div>
              <div className="flex-1">
                <div className="flex items-center justify-between">
                  <p className="font-semibold text-foreground">Session privée</p>
                  <Switch checked={privateSession} onCheckedChange={setPrivateSession} />
                </div>
                <p className="mt-1 text-sm text-muted-foreground">
                  {privateSession
                    ? "Votre activité d'écoute est masquée"
                    : "Activez pour masquer votre activité d'écoute"}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Activity Settings */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Activité</h2>
          <div className="space-y-1 rounded-xl bg-secondary/50">
            <div className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Activity className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground">Afficher mon activité</p>
                  <p className="text-sm text-muted-foreground">Les autres peuvent voir ce que vous écoutez</p>
                </div>
              </div>
              <Switch checked={showActivity} onCheckedChange={setShowActivity} />
            </div>
            <div className="flex items-center justify-between p-4">
              <div className="flex items-center gap-3">
                <Users className="h-5 w-5 text-muted-foreground" />
                <div>
                  <p className="font-medium text-foreground">Écoutes récentes</p>
                  <p className="text-sm text-muted-foreground">Visible sur votre profil public</p>
                </div>
              </div>
              <Switch checked={showRecentlyPlayed} onCheckedChange={setShowRecentlyPlayed} />
            </div>
          </div>
        </section>

        {/* Data Management */}
        <section className="mb-8">
          <h2 className="mb-4 text-sm font-semibold uppercase text-muted-foreground">Vos données</h2>
          <div className="space-y-3">
            <Button variant="outline" className="w-full justify-start gap-3 bg-transparent">
              <Download className="h-5 w-5" />
              Télécharger mes données
            </Button>
            <Button
              variant="outline"
              className="w-full justify-start gap-3 text-destructive hover:text-destructive bg-transparent"
            >
              Supprimer mon compte
            </Button>
          </div>
        </section>

        <p className="text-center text-sm text-muted-foreground">
          Pour en savoir plus, consultez notre{" "}
          <Link href="/about" className="text-primary underline">
            politique de confidentialité
          </Link>
        </p>
      </div>

      <BottomNav />
    </div>
  )
}
