"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"
import { HardDrive, CheckCircle, Database } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"

export default function StorageSettingsPage() {
  const { toast } = useToast()
  const [loading, setLoading] = useState(false)
  const [storageStatus, setStorageStatus] = useState<{
    blob: boolean
    database: boolean
  }>({ blob: false, database: false })

  useEffect(() => {
    checkStatus()
  }, [])

  const checkStatus = async () => {
    try {
      const response = await fetch("/api/admin/storage")
      const data = await response.json()
      setStorageStatus({
        blob: data.blobConfigured || false,
        database: data.databaseConfigured || false,
      })
    } catch (error) {
      console.error("Error checking status:", error)
    }
  }

  const handleTestUpload = async () => {
    setLoading(true)
    try {
      const response = await fetch("/api/admin/storage", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "test" }),
      })

      if (response.ok) {
        toast({
          title: "Test réussi",
          description: "La connexion au stockage fonctionne correctement",
        })
      } else {
        throw new Error("Test failed")
      }
    } catch (error) {
      console.error("Error testing storage:", error)
      toast({
        title: "Erreur",
        description: "Le test de stockage a échoué",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

  return (
    <div className="min-h-screen bg-black p-6">
      <div className="max-w-4xl mx-auto space-y-6">
        <div>
          <h1 className="text-3xl font-bold text-white mb-2">Configuration du stockage</h1>
          <p className="text-zinc-400">Statut des services de stockage</p>
        </div>

        <Card className="bg-zinc-900 border-zinc-800">
          <CardHeader>
            <CardTitle className="text-white">Services actifs</CardTitle>
            <CardDescription className="text-zinc-400">
              Cette application utilise Neon PostgreSQL pour la base de données et Vercel Blob pour le stockage des fichiers
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="space-y-4">
              <div className="flex items-start space-x-3 p-4 bg-zinc-800/50 rounded-lg border border-zinc-700">
                <Database className="w-5 h-5 text-blue-400 mt-0.5" />
                <div className="flex-1">
                  <div className="text-white font-medium flex items-center gap-2">
                    Neon PostgreSQL
                    {storageStatus.database && <CheckCircle className="w-4 h-4 text-green-500" />}
                  </div>
                  <p className="text-sm text-zinc-400 mt-1">
                    Base de données serverless PostgreSQL pour toutes les données de l&apos;application
                  </p>
                  <div className="mt-2">
                    <span className={`text-xs px-2 py-1 rounded ${storageStatus.database ? 'bg-green-900/50 text-green-400' : 'bg-red-900/50 text-red-400'}`}>
                      {storageStatus.database ? 'Connecté' : 'Non configuré'}
                    </span>
                  </div>
                </div>
              </div>

              <div className="flex items-start space-x-3 p-4 bg-zinc-800/50 rounded-lg border border-zinc-700">
                <HardDrive className="w-5 h-5 text-purple-400 mt-0.5" />
                <div className="flex-1">
                  <div className="text-white font-medium flex items-center gap-2">
                    Vercel Blob Storage
                    {storageStatus.blob && <CheckCircle className="w-4 h-4 text-green-500" />}
                  </div>
                  <p className="text-sm text-zinc-400 mt-1">
                    Stockage pour tous les fichiers : audio, images, covers, etc.
                  </p>
                  <div className="mt-2">
                    <span className={`text-xs px-2 py-1 rounded ${storageStatus.blob ? 'bg-green-900/50 text-green-400' : 'bg-red-900/50 text-red-400'}`}>
                      {storageStatus.blob ? 'Connecté' : 'Non configuré'}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <Alert className="bg-blue-950/50 border-blue-800">
              <AlertTitle className="text-blue-300">Configuration simplifiée</AlertTitle>
              <AlertDescription className="text-blue-200">
                Cette application utilise uniquement Neon et Vercel Blob. Les variables d&apos;environnement requises sont :
                <ul className="list-disc list-inside mt-2 space-y-1">
                  <li><code className="text-blue-400">DATABASE_URL</code> - Connexion Neon PostgreSQL</li>
                  <li><code className="text-blue-400">BLOB_READ_WRITE_TOKEN</code> - Token Vercel Blob</li>
                </ul>
              </AlertDescription>
            </Alert>

            <Button onClick={handleTestUpload} disabled={loading} className="w-full">
              {loading ? "Test en cours..." : "Tester la connexion"}
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
