"use client"

import { useState, useEffect } from "react"
import { useAuth } from "@/lib/auth-context"
import { useRouter } from "next/navigation"
import { DashboardLayout } from "@/components/dashboard-layout"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Settings, User } from "lucide-react"
import { apiFetch } from "@/lib/apiutils"

export default function ConfiguracionPage() {
  const { user, refreshUser } = useAuth()
  const router = useRouter()

  const [profileData, setProfileData] = useState({
    name: "",
    matricula: "",
  })

  // Mock settings for General tab (simplified)
  const [settings, setSettings] = useState({
    companyName: "AgroRecetas",
    companyEmail: "contacto@agroreceta.com",
  })

  useEffect(() => {
    if (user) {
      setProfileData({
        name: user.name || "",
        matricula: user.matricula || "",
      })
    }
  }, [user])

  // Protección de ruta para admin
  useEffect(() => {
    if (user && user.role !== "admin") {
      router.push("/dashboard")
    }
  }, [user, router])

  if (user?.role !== "admin") {
    return null
  }

  const handleSave = () => {
    alert("Configuración general guardada exitosamente (Simulado)")
  }

  const handleSaveProfile = async () => {
    try {
      const res = await apiFetch("/profile", {
        method: "PUT",
        body: JSON.stringify(profileData),
      })

      if (res.ok) {
        const data = await res.json()
        setProfileData({
          name: data.user.name,
          matricula: data.user.matricula
        })
        await refreshUser()
        alert("Perfil actualizado exitosamente.")
        // Optionally trigger a re-fetch of auth user if possible, or just let next reload handle it.
      } else {
        alert("Error al actualizar el perfil.")
      }
    } catch (error) {
      console.error(error)
      alert("Error de conexión al actualizar perfil.")
    }
  }

  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-3xl font-bold tracking-tight text-foreground text-balance">Configuración</h1>
          <p className="text-muted-foreground mt-2">Administra las configuraciones del sistema</p>
        </div>

        <Tabs defaultValue="perfil" className="space-y-6">
          <TabsList className="grid w-full grid-cols-2 lg:w-auto">
            <TabsTrigger value="perfil" className="gap-2">
              <User className="h-4 w-4" />
              <span className="hidden sm:inline">Perfil</span>
            </TabsTrigger>
            <TabsTrigger value="general" className="gap-2">
              <Settings className="h-4 w-4" />
              <span className="hidden sm:inline">General</span>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="perfil" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Información Personal</CardTitle>
                <CardDescription>Actualiza tu nombre y matrícula profesional</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="userName">Nombre y Apellido</Label>
                  <Input
                    id="userName"
                    value={profileData.name}
                    onChange={(e) => setProfileData({ ...profileData, name: e.target.value })}
                    placeholder="Ej: Ing. Agr. Juan Pérez"
                  />
                  <p className="text-sm text-muted-foreground">Este nombre aparecerá en las recetas que emitas</p>
                </div>
                <div className="space-y-2">
                  <Label htmlFor="userMatricula">Matrícula Profesional</Label>
                  <Input
                    id="userMatricula"
                    value={profileData.matricula}
                    onChange={(e) => setProfileData({ ...profileData, matricula: e.target.value })}
                    placeholder="Ej: MP 12345"
                  />
                  <p className="text-sm text-muted-foreground">Tu matrícula profesional para firmar recetas</p>
                </div>
                <div className="space-y-2">
                  <Label>Email</Label>
                  <Input value={user?.email || ""} disabled />
                  <p className="text-sm text-muted-foreground">El email no puede ser modificado</p>
                </div>
                <Button onClick={handleSaveProfile} className="bg-green-600 hover:bg-green-700">
                  Guardar Cambios de Perfil
                </Button>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="general" className="space-y-4">
            <Card>
              <CardHeader>
                <CardTitle>Información de la Empresa</CardTitle>
                <CardDescription>Configura los datos básicos de tu organización</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="companyName">Nombre de la Empresa</Label>
                  <Input
                    id="companyName"
                    value={settings.companyName}
                    onChange={(e) => setSettings({ ...settings, companyName: e.target.value })}
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="companyEmail">Email de Contacto</Label>
                  <Input
                    id="companyEmail"
                    type="email"
                    value={settings.companyEmail}
                    onChange={(e) => setSettings({ ...settings, companyEmail: e.target.value })}
                  />
                </div>
                <Button onClick={handleSave}>Guardar Cambios</Button>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </DashboardLayout>
  )
}