"use client"

import { useState, useEffect } from "react"
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Button } from "@/components/ui/button"
import { useToast } from "@/hooks/use-toast"
import { Loader2 } from "lucide-react"

interface ConfiguracaoRedisProps {
  onConfigured: (status: boolean) => void
}

export function ConfiguracaoRedis({ onConfigured }: ConfiguracaoRedisProps) {
  const { toast } = useToast()
  const [redisUrl, setRedisUrl] = useState("redis://default:johnny@321@98tjcc.easypanel.host:35654")
  const [testando, setTestando] = useState(false)
  const [salvando, setSalvando] = useState(false)

  useEffect(() => {
    // Carregar configuração existente
    async function carregarConfig() {
      try {
        const response = await fetch("/api/redis/config")
        if (response.ok) {
          const data = await response.json()
          if (data.url) {
            setRedisUrl(data.url)
          }
        }
      } catch (error) {
        console.error("Erro ao carregar configuração:", error)
      }
    }

    carregarConfig()
  }, [])

  const testarConexao = async () => {
    setTestando(true)
    try {
      const response = await fetch("/api/redis/test", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ url: redisUrl }),
      })

      const data = await response.json()

      if (data.success) {
        toast({
          title: "Conexão bem-sucedida",
          description: "A conexão com o Redis foi estabelecida com sucesso.",
          variant: "default",
        })
      } else {
        toast({
          title: "Falha na conexão",
          description: data.error || "Não foi possível conectar ao Redis. Verifique a URL e tente novamente.",
          variant: "destructive",
        })
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Ocorreu um erro ao testar a conexão.",
        variant: "destructive",
      })
    } finally {
      setTestando(false)
    }
  }

  const salvarConfig = async () => {
    setSalvando(true)
    try {
      const response = await fetch("/api/redis/config", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ url: redisUrl }),
      })

      const data = await response.json()

      if (data.success) {
        toast({
          title: "Configuração salva",
          description: "A configuração do Redis foi salva com sucesso.",
          variant: "default",
        })
        onConfigured(true)
      } else {
        toast({
          title: "Erro ao salvar",
          description: data.error || "Não foi possível salvar a configuração.",
          variant: "destructive",
        })
        onConfigured(false)
      }
    } catch (error) {
      toast({
        title: "Erro",
        description: "Ocorreu um erro ao salvar a configuração.",
        variant: "destructive",
      })
      onConfigured(false)
    } finally {
      setSalvando(false)
    }
  }

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>Configuração do Redis</CardTitle>
        <CardDescription>Configure a conexão com o banco de dados Redis</CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="redis-url">URL de Conexão Redis</Label>
          <Input
            id="redis-url"
            placeholder="redis://username:password@host:port"
            value={redisUrl}
            onChange={(e) => setRedisUrl(e.target.value)}
          />
          <p className="text-sm text-muted-foreground">Formato: redis://username:password@host:port</p>
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={testarConexao} disabled={testando || !redisUrl}>
          {testando ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Testando...
            </>
          ) : (
            "Testar Conexão"
          )}
        </Button>
        <Button onClick={salvarConfig} disabled={salvando || !redisUrl}>
          {salvando ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Salvando...
            </>
          ) : (
            "Salvar Configuração"
          )}
        </Button>
      </CardFooter>
    </Card>
  )
}