"use client"

import { useState, useEffect } from "react"
import { Save, Globe, Bell, Shield, Mail, Database, Server } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Textarea } from "@/components/ui/textarea"

export default function AdminSettingsPage() {
  const [saved, setSaved] = useState(false)
  const [compressionSettings, setCompressionSettings] = useState({ quality: "high", bitrate: "320kbps" })

  useEffect(() => {
    // Simulate fetching compression settings from a server
    setCompressionSettings({ quality: "high", bitrate: "320kbps" })
  }, [])

  const handleSave = () => {
    setSaved(true)
    setTimeout(() => setSaved(false), 2000)
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Parametres</h1>
          <p className="text-zinc-400 text-sm">Configurez les parametres de la plateforme</p>
        </div>
        <Button onClick={handleSave} className="bg-purple-600 hover:bg-purple-700">
          <Save className="w-4 h-4 mr-2" />
          {saved ? "Enregistre !" : "Enregistrer"}
        </Button>
      </div>

      {/* Tabs */}
      <Tabs defaultValue="general" className="space-y-4">
        <TabsList className="bg-zinc-800/50 border border-zinc-700 flex-wrap h-auto">
          <TabsTrigger value="general" className="data-[state=active]:bg-purple-600">
            <Globe className="w-4 h-4 mr-2" /> General
          </TabsTrigger>
          <TabsTrigger value="notifications" className="data-[state=active]:bg-purple-600">
            <Bell className="w-4 h-4 mr-2" /> Notifications
          </TabsTrigger>
          <TabsTrigger value="security" className="data-[state=active]:bg-purple-600">
            <Shield className="w-4 h-4 mr-2" /> Securite
          </TabsTrigger>
          <TabsTrigger value="email" className="data-[state=active]:bg-purple-600">
            <Mail className="w-4 h-4 mr-2" /> Email
          </TabsTrigger>
          <TabsTrigger value="system" className="data-[state=active]:bg-purple-600">
            <Server className="w-4 h-4 mr-2" /> Systeme
          </TabsTrigger>
        </TabsList>

        {/* General Settings */}
        <TabsContent value="general" className="space-y-4">
          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Informations generales</CardTitle>
              <CardDescription className="text-zinc-400">Configurez les informations de base</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Nom de l'application</Label>
                  <Input className="bg-zinc-800 border-zinc-700" defaultValue="AfricanMusic" />
                </div>
                <div className="space-y-2">
                  <Label>URL du site</Label>
                  <Input className="bg-zinc-800 border-zinc-700" defaultValue="https://www.africanmusic.online" />
                </div>
              </div>
              <div className="space-y-2">
                <Label>Description</Label>
                <Textarea
                  className="bg-zinc-800 border-zinc-700 min-h-20"
                  defaultValue="La meilleure plateforme de streaming musical"
                />
              </div>
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Langue par defaut</Label>
                  <Select defaultValue="fr">
                    <SelectTrigger className="bg-zinc-800 border-zinc-700">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-zinc-800 border-zinc-700">
                      <SelectItem value="fr">Francais</SelectItem>
                      <SelectItem value="en">English</SelectItem>
                      <SelectItem value="es">Espanol</SelectItem>
                      <SelectItem value="de">Deutsch</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label>Fuseau horaire</Label>
                  <Select defaultValue="europe-paris">
                    <SelectTrigger className="bg-zinc-800 border-zinc-700">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-zinc-800 border-zinc-700">
                      <SelectItem value="europe-paris">Europe/Paris</SelectItem>
                      <SelectItem value="america-new-york">America/New_York</SelectItem>
                      <SelectItem value="asia-tokyo">Asia/Tokyo</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Fonctionnalites</CardTitle>
              <CardDescription className="text-zinc-400">Activez ou desactivez des fonctionnalites</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Mode maintenance</p>
                  <p className="text-sm text-zinc-400">Desactiver l'acces public temporairement</p>
                </div>
                <Switch />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Inscriptions ouvertes</p>
                  <p className="text-sm text-zinc-400">Permettre aux nouveaux utilisateurs de s'inscrire</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Telechargements hors-ligne</p>
                  <p className="text-sm text-zinc-400">Permettre le telechargement de musique</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Paroles synchronisees</p>
                  <p className="text-sm text-zinc-400">Afficher les paroles en temps reel</p>
                </div>
                <Switch defaultChecked />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Notifications Settings */}
        <TabsContent value="notifications" className="space-y-4">
          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Notifications push</CardTitle>
              <CardDescription className="text-zinc-400">Configurez les notifications push</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Nouveaux followers</p>
                  <p className="text-sm text-zinc-400">Notifier les utilisateurs de nouveaux followers</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Nouvelles sorties</p>
                  <p className="text-sm text-zinc-400">Notifier des nouvelles sorties d'artistes suivis</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Recommandations</p>
                  <p className="text-sm text-zinc-400">Envoyer des recommandations personnalisees</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Concerts a proximite</p>
                  <p className="text-sm text-zinc-400">Alerter des concerts d'artistes suivis</p>
                </div>
                <Switch />
              </div>
            </CardContent>
          </Card>

          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Notifications admin</CardTitle>
              <CardDescription className="text-zinc-400">Notifications pour l'equipe admin</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Signalements urgents</p>
                  <p className="text-sm text-zinc-400">Alerter immediatement pour signalements critiques</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Rapport quotidien</p>
                  <p className="text-sm text-zinc-400">Resume des activites chaque jour</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Alertes systeme</p>
                  <p className="text-sm text-zinc-400">Problemes techniques et performances</p>
                </div>
                <Switch defaultChecked />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Security Settings */}
        <TabsContent value="security" className="space-y-4">
          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Authentification</CardTitle>
              <CardDescription className="text-zinc-400">Parametres de securite des comptes</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Authentification a deux facteurs</p>
                  <p className="text-sm text-zinc-400">Exiger 2FA pour les admins</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Connexion sociale</p>
                  <p className="text-sm text-zinc-400">Google, Apple, Facebook</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Duree de session (jours)</Label>
                  <Input type="number" className="bg-zinc-800 border-zinc-700" defaultValue="30" />
                </div>
                <div className="space-y-2">
                  <Label>Tentatives de connexion max</Label>
                  <Input type="number" className="bg-zinc-800 border-zinc-700" defaultValue="5" />
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Protection du contenu</CardTitle>
              <CardDescription className="text-zinc-400">Securite du contenu musical</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">DRM</p>
                  <p className="text-sm text-zinc-400">Protection des droits numeriques</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Detection de piratage</p>
                  <p className="text-sm text-zinc-400">Scanner les uploads pour contenu pirate</p>
                </div>
                <Switch defaultChecked />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Watermarking audio</p>
                  <p className="text-sm text-zinc-400">Ajouter un filigrane invisible aux streams</p>
                </div>
                <Switch />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* Email Settings */}
        <TabsContent value="email" className="space-y-4">
          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Configuration SMTP</CardTitle>
              <CardDescription className="text-zinc-400">Parametres du serveur email</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <Label>Serveur SMTP</Label>
                  <Input className="bg-zinc-800 border-zinc-700" defaultValue="smtp.africanmusic.com" />
                </div>
                <div className="space-y-2">
                  <Label>Port</Label>
                  <Input className="bg-zinc-800 border-zinc-700" defaultValue="587" />
                </div>
                <div className="space-y-2">
                  <Label>Nom d'utilisateur</Label>
                  <Input className="bg-zinc-800 border-zinc-700" defaultValue="noreply@africanmusic.com" />
                </div>
                <div className="space-y-2">
                  <Label>Mot de passe</Label>
                  <Input type="password" className="bg-zinc-800 border-zinc-700" defaultValue="********" />
                </div>
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">TLS/SSL</p>
                  <p className="text-sm text-zinc-400">Utiliser une connexion securisee</p>
                </div>
                <Switch defaultChecked />
              </div>
            </CardContent>
          </Card>

          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Modeles d'email</CardTitle>
              <CardDescription className="text-zinc-400">Personnalisez les emails automatiques</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-2">
                <Label>Email de bienvenue</Label>
                <Textarea
                  className="bg-zinc-800 border-zinc-700 min-h-20"
                  defaultValue="Bienvenue sur AfricanMusic ! Decouvrez des millions de titres..."
                />
              </div>
              <div className="space-y-2">
                <Label>Email de reinitialisation</Label>
                <Textarea
                  className="bg-zinc-800 border-zinc-700 min-h-20"
                  defaultValue="Cliquez sur le lien ci-dessous pour reinitialiser votre mot de passe..."
                />
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* System Settings */}
        <TabsContent value="system" className="space-y-4">
          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Base de donnees</CardTitle>
              <CardDescription className="text-zinc-400">Informations sur la base de donnees</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <div className="bg-zinc-800/50 rounded-lg p-4">
                  <Database className="w-5 h-5 text-purple-400 mb-2" />
                  <p className="text-sm text-zinc-400">Taille</p>
                  <p className="text-lg font-semibold text-white">42.5 GB</p>
                </div>
                <div className="bg-zinc-800/50 rounded-lg p-4">
                  <Server className="w-5 h-5 text-blue-400 mb-2" />
                  <p className="text-sm text-zinc-400">Connexions</p>
                  <p className="text-lg font-semibold text-white">234/500</p>
                </div>
                <div className="bg-zinc-800/50 rounded-lg p-4">
                  <Database className="w-5 h-5 text-green-400 mb-2" />
                  <p className="text-sm text-zinc-400">Uptime</p>
                  <p className="text-lg font-semibold text-white">99.99%</p>
                </div>
                <div className="bg-zinc-800/50 rounded-lg p-4">
                  <Server className="w-5 h-5 text-yellow-400 mb-2" />
                  <p className="text-sm text-zinc-400">Latence</p>
                  <p className="text-lg font-semibold text-white">12ms</p>
                </div>
              </div>
              <div className="flex gap-2">
                <Button variant="outline" className="border-zinc-700 text-zinc-300 bg-transparent">
                  Optimiser
                </Button>
                <Button variant="outline" className="border-zinc-700 text-zinc-300 bg-transparent">
                  Backup
                </Button>
              </div>
            </CardContent>
          </Card>

          <Card className="bg-zinc-800/30 border-zinc-700/50">
            <CardHeader>
              <CardTitle className="text-white">Cache et performances</CardTitle>
              <CardDescription className="text-zinc-400">Optimisez les performances</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Cache Redis</p>
                  <p className="text-sm text-zinc-400">Taille actuelle: 2.3 GB</p>
                </div>
                <Button variant="outline" className="border-zinc-700 text-zinc-300 bg-transparent">
                  Vider
                </Button>
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">CDN</p>
                  <p className="text-sm text-zinc-400">Cloudflare - 156 TB transferes ce mois</p>
                </div>
                <Button variant="outline" className="border-zinc-700 text-zinc-300 bg-transparent">
                  Purger
                </Button>
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium text-white">Compression audio</p>
                  <p className="text-sm text-zinc-400">Qualite: {compressionSettings.quality}</p>
                  <p className="text-sm text-zinc-400">Bitrate: {compressionSettings.bitrate}</p>
                </div>
                <Button variant="outline" className="border-zinc-700 text-zinc-300 bg-transparent">
                  Modifier
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
