import { AppLayout } from "@/components/app-layout"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { FormasJuridicasConfig } from "@/components/configuracion/formas-juridicas-config"

export default function ConfiguracionPage() {
  return (
    <AppLayout userRole="admin">
      <div className="p-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-foreground">Configuración</h1>
          <p className="text-muted-foreground mt-2">Configuración general del sistema</p>
        </div>

        <div className="grid gap-6 max-w-4xl">
          {/* Configuración de Formas Jurídicas */}
          <FormasJuridicasConfig />

          {/* Configuración de la Cooperativa */}
          <Card>
            <CardHeader>
              <CardTitle>Información de la Cooperativa</CardTitle>
              <CardDescription>Datos que aparecerán en reportes e impresiones</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-2">
                <Label htmlFor="coop-name">Nombre de la Cooperativa</Label>
                <Input id="coop-name" placeholder="Cooperativa de Trabajo..." />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="coop-cuit">CUIT</Label>
                <Input id="coop-cuit" placeholder="XX-XXXXXXXX-X" />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="coop-address">Dirección</Label>
                <Input id="coop-address" placeholder="Calle, número, ciudad" />
              </div>
              <div className="grid gap-2">
                <Label htmlFor="coop-logo">Logo (URL)</Label>
                <Input id="coop-logo" placeholder="https://..." />
              </div>
            </CardContent>
          </Card>

          {/* Configuración de Notificaciones */}
          <Card>
            <CardHeader>
              <CardTitle>Notificaciones</CardTitle>
              <CardDescription>Configurar alertas y recordatorios</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Notificar vencimientos</Label>
                  <p className="text-sm text-muted-foreground">
                    Enviar alertas cuando un trámite esté próximo a vencer
                  </p>
                </div>
                <Switch />
              </div>
              <Separator />
              <div className="flex items-center justify-between">
                <div className="space-y-0.5">
                  <Label>Recordatorios de confirmación</Label>
                  <p className="text-sm text-muted-foreground">Recordar confirmar trámites periódicamente</p>
                </div>
                <Switch />
              </div>
              <Separator />
              <div className="grid gap-2">
                <Label htmlFor="days-before">Días de anticipación</Label>
                <Input id="days-before" type="number" placeholder="30" className="w-32" />
              </div>
            </CardContent>
          </Card>

          {/* Configuración de Permisos */}
          <Card>
            <CardHeader>
              <CardTitle>Roles y Permisos</CardTitle>
              <CardDescription>Gestionar permisos por rol de usuario</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="space-y-3">
                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">Lectura</p>
                    <p className="text-sm text-muted-foreground">Solo puede ver trámites y catálogos</p>
                  </div>
                  <Button variant="outline" size="sm">
                    Editar
                  </Button>
                </div>
                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">Edición</p>
                    <p className="text-sm text-muted-foreground">Puede crear y editar trámites</p>
                  </div>
                  <Button variant="outline" size="sm">
                    Editar
                  </Button>
                </div>
                <div className="flex items-center justify-between p-3 border rounded-lg">
                  <div>
                    <p className="font-medium">Administrador</p>
                    <p className="text-sm text-muted-foreground">Acceso completo al sistema</p>
                  </div>
                  <Button variant="outline" size="sm">
                    Editar
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="flex justify-end gap-3">
            <Button variant="outline">Cancelar</Button>
            <Button>Guardar cambios</Button>
          </div>
        </div>
      </div>
    </AppLayout>
  )
}